Call to Action widget

Use the Call to Action (CTA) widget to spotlight links to important information. Designed to be visually prominent, CTAs catch users' attention and guide them to relevant next steps or additional information. CTAs often include action words directing users to complete tasks or view essential information, such as Learn more, Submit your feedback, or Contact us.

With the CTA widget, you can create and customize CTAs that prompt users to navigate to specific areas of your digital workplace, quickly link users to commonly requested information, and showcase timely events or initiatives.

The Call to Action widget on a page.

Sections in this article: 

Use cases

The CTA widget is ideal for funneling traffic from your homepage to popular areas of your digital workplace, directing users to where they need to go quickly and easily. Encourage users to explore new areas, the latest news, or the most commonly viewed channels, pages, or spaces.

You can also use the CTA widget to enhance your digital workplace solutions:

  • Link to specific articles or areas of your Newsroom
  • Drive members to key templates and forums in your Brand Portal
  • Highlight updates or changes to policies in your Governance Center
  • Identify new hires and steps of the onboarding process in your Onboarding Centre
  • Promote upcoming events and initiatives found in your Social Zone

Set up

Follow these steps to set up this widget:

  1. Place a Call to Action widget on a page, space, or dashboard. For more information, see Placing and setting up a widget
  2. Select the placed widget's Edit button.
  3. Review and make changes to the settings on the Options, Layout, and Appearance tabs. You can find details about the widget's settings in the Settings section below.
  4. In the widget editor, select Update to apply your changes or Cancel to discard them.  
  5. At the bottom of your page, space, or dashboard, select Publish or Save as Draft to save your changes.

Settings

Options Tab

Setting Description
Title

Enter a title for the widget. The title appears as a heading above the widget's contents. You should use the title to provide context to the widget and better structure a page's content by clearly denoting different sections.

When entering a title, you do so only for your currently selected language. If your digital workplace supports multiple languages, you should select  Translation and enter a title for each supported language. 

This field can contain a maximum of 140 characters.

Description

Enter a description for the widget. The description appears between the title and the widget's contents. You can use this text to provide information to users about the widget.

When entering a description, you do so only for your currently selected language. If your digital workplace supports multiple languages, you should select  Translation and enter a description for each supported language.

General Options

Layout tab

Setting Description
Display setting

Select an option under Display as: 

  • Text button: A simple CTA with only text and a colored background. Often used to navigate users to secondary sources of information, such as subpages.
  • Description: A CTA that includes title text, secondary text, and optional link text ideal for including action words such as "Learn" or "Discover". The Description CTA is best used in small columns or full-width columns to give users more information about where the link will take them.
  • Color Bar: A visually-rich CTA that uses background colors or images with minimal text. The Color Bar CTA is ideal for aligning with visual elements of your brand, such as your brand colors.

CTA's will change opacity when users hover their mouse over them. Dark background CTA's will have their opacity decrease, while light background CTA's will have their opacity increase.

Number of CTAS

Controls the number of CTAs the Widget will display (up to 4). For best results, select 1 CTA for small columns, a maximum of 2 for middle columns, and a maximum of 3 or 4 for full-width columns.

CTA height

Controls the minimum height of the CTA(s) for that Widget (Short, Medium or Tall). Choose the height of your CTA(s) based on the placement of the widget and how visible you'd like the CTA(s) to be.

Text alignment

Controls the horizontal text alignment (Left, Centered or Right).

Note: Text will always be centered vertically.

Background style

Controls the appearance of the CTA background (Filled or Border).

Note: Background style is not available for the Color Bar CTA display because a background image must be included. 

Rounded corners

Controls the curve of your CTA corners. Select None for square corners, or Small, Medium, or Large rounded corners.

Link arrow style

Available for the Description CTA, this setting controls the appearance and style of an arrow following the link text (None, Arrow, Chevron or Filled Chevron).

Text box style

Available for the Color Bar CTA, this setting controls the appearance of the text box (Fill or Transparent) that appears in front of the background image.

Customize CTA

Depending on the display setting you select, multiple fields to customize content will be available for each CTA (up to 4). 

Drag CTA's by their headers to place them in the order that works best for you. You cannot do this if the widget contains only one CTA.

Customize CTA: 

Title text, secondary text, and link text

We recommend that you enter content for at least one text field to clearly communicate where the CTA will take your users. As you enter text into the Title or Link fields the tab header will automatically update to reflect this information.

Note: Use the Workplace URL Search function to automatically fill in the link text, and link URL of the active CTA. It will search the workplace for destinations that have titles that match the search query in all supported languages and provides a list of matching results. The desired destination link can then be selected from this list.

Customize CTA: 

Link URL

 

Enter the URL (an internal or external link) of where you'd like the CTA to send your users. A checkbox option also allows you to open this link in a new window instead of the current window (default).

Customize CTA: 

Background color

 

Select a background color for your CTA. This color will appear according to the background style you selected in the CTA layout settings:

  • Fill will display the background color within the entire CTA.
  • Border will display the background color as an outline around the CTA.

Customize CTA: 

Text Color

 

Select a text color for your CTA. 

  • Use contrasting color will dynamically choose Black (#333333) or White (#FFFFFF) based on what provides the most contrast given the current background color.
  • Select custom color will provide the option to manually select a color or enter a color RGB code.

Customize CTA: Text box style

Available for the Color Bar CTA, select a color for your text box. This color will appear according to the text box style you selected in the CTA layout settings:

  • Fill will display a solid background color.
  • Transparent will display a transparent background color so the CTA background image behind the text box is still visible.

Customize CTA: Background image

Upload an image to appear as the background of your CTA. The max file size for this image is 1MB, and only the following image types are valid:

  • JPG
  • PNG
  • GIF
  • SVG
  • BMP.
Layout options

Appearance Tab

Setting Description
Class Enter CSS class selectors to provide additional styling to the widget. For more information, see Applying custom CSS to widgets.
Height Select the height of the widget. Options include:
  • Auto: The leftmost slider position. The height of the widget will increase and decrease to contain what it is displaying.
  • Fixed: Select a fixed height between 50px to 600px in increments of 50px. A vertical scrollbar will appear on the widget if the content exceeds this fixed value.
Appearance options

Note

Your digital workplace's theme overwrites many of the settings on the Appearance tab. However, the settings listed above are usable.

Configurations

  • Use up to 4 CTAs in a full-width column and under banners. Include action words to prompt users to click on a CTA, and select a CTA height that works well with the space available.
  • Include CTAs in a side-column for stacked quick links to important information and commonly requested areas. Use the "Border" background style and rounded corners for a clean look and feel that still draws a user's attention.
  • Direct users to specific documents or articles using a single CTA and use the "Fill" background style to make your CTA stand out visually with a solid colored background.
  • Create CTAs that align with your brand's look and feel by using the "Fill" background style and "Large" rounded corners. When there is enough space, use the "Tall" CTA height for a clean and visually-pleasing design.

Image sizes

Image dimensions depend on browser width, layout, the number of columns, and selected height. If your theme modifies the page width available to widgets, your exact sizes will differ. To find what sizes your CTA uses, place the widget on the page, publish it, and then inspect it using your browser's developer tools.

When picking a CTA image, use an image that matches the aspect ratio of the CTA. The greater the deviation between ratios, the more the image will be cropped. Images are always cropped to the center of the CTA.

The top and bottom of images getting cropped due to a differing aspect ratios.

Keep in mind the following when referencing sizing tables:

  • Full-screen display:
    • Dimensions below are for standard full-screen desktop display only and do not cover all screen sizes, zoom, or manual scaling of the browser window.
  • Display variance:
    • Dimensions do not consider product variances with image cropping (e.g., an image that may look perfect in one square widget may not look the same in another square widget, such as a Blog vs. Call to Action).
  • Widget position
    • Unless otherwise stated, the dimensions below are for a CTA widget that spans the entire width of a page.
  • Description layout:
    • Sizes are based on a single-line title, description, and link title
  • Color Bar layout:
    • Sizes are based on a single-line title. The text color bar covers the bottom 50px of the image. Images should be the height listed below, with the understanding that the bottom 50px of the image will be fully or partially obscured.
  • Narrow displays:
    • As the width of the browser decreases, the width of CTAs also decreases. However, the height stays the same. As a result, potential cropping can occur, and avoiding using images containing text is best.
    • At browser widths below 875px, CTAs stop being displayed as columns and are instead stacked. When this occurs, the image width is approximately 772px. This width continues to decrease as the window gets smaller.

If you don't know the width of your digital workplace:

  1. Fully enlarge your browser window.
  2. Open your browser's developer tools (pressing F12 on most browsers).
  3. Select the Console tab.
  4. Enter the following into the console and press enter:
    console.log(document.getElementById("footer-inner").clientWidth);

1100px site width 

Number of CTAs CTA Height Width (px) Height (px)
1
Short
1100
85
Medium 
1100
115
Tall
1100
150
2
Short
542
85
Medium
542
115
Tall
542
150
3
Short
356
85
Medium 
356
115
Tall
356
150
4
Short
263
85
Medium
263
115
Tall
263
150
1 (within a single left/right column)
Short 220
85
Medium 220
115
Tall 220
150
Text Button (1100px site width)
Number of CTAs CTA Height Width (px) Height (px)
1
Short
1100
98
Medium  1100
115
Tall
1100
150
2
Short
542
98
Medium
542
115
Tall
542
150
3
Short
356
98
Medium 
356
115
Tall
356
150
4
Short
263
98
Medium
263
115
Tall
263
150
 
1 (within a single left/right column)
 
Short 220
98
Medium 220
115
Tall 220
150
Description (1100px site width)
Number of CTAs CTA Height Width (px) Height (px)
1
Short
1100
190
Medium 
1100
220
Tall
1100
250
2
Short
542
190
Medium
542
220
Tall
542
250
3
Short
356
190
Medium 
356
220
Tall
356
250
4
Short
263
190
Medium
263
220
Tall
263
250
 
1 (within a single left/right column)
 
Short 220
190
Medium 220
220
Tall 220
250
Color Bar (1100px site width)

1400px site width

Number of CTAs CTA Height Width (px) Height (px)
1 Short 1400 85
Medium 1400 115
Tall 1400 150
2 Short 692 85
Medium 692 115
Tall 692 150
3 Short 456 85
Medium 456 115
Tall 456 150
4 Short 338 85
Medium 338 115
Tall 338 150
1 (within a single left/right column) Short 220 85
Medium 220 115
Tall 220 150
Text Button (1400px site width)
Number of CTAs CTA Height Width (px) Height (px)
1 Short 1400 98
Medium 1400 115
Tall 1400 150
2 Short 692 98
Medium 692 115
Tall 692 150
3 Short 456 98
Medium 456 115
Tall 456 150
4 Short 338 98
Medium 338 115
Tall 338 150
1 (within a single left/right column) Short 220 98
Medium 220 115
Tall 220 150
Description (1400px site width)
Number of CTAs CTA Height Width (px) Height (px)
1 Short 1400 190
Medium 1400 220
Tall 1400 250
2 Short 692 190
Medium 692 220
Tall 692 250
3 Short 456 190
Medium 456 220
Tall 456 250
4 Short 338 190
Medium 338 220
Tall 338 250
1 (within a single left/right column) Short 220 190
Medium 220 220
Tall 220 250
Color Bar (1400px site width)

1600px site width

Number of CTAs CTA Height Width (px) Height (px)
1 Short 1600 85
Medium 1600 115
Tall 1600 150
2 Short 792 85
Medium 792 115
Tall 792 150
3 Short 523 85
Medium 523 115
Tall 523 150
4 Short 388 85
Medium 388 115
Tall 388 150
1 (within a single left/right column) Short 220 85
Medium 220 115
Tall 220 150
Text Button (1600px site width)
Number of CTAs CTA Height Width (px) Height (px)
1 Short 1600 98
Medium 1600 115
Tall 1600 150
2 Short 792 98
Medium 792 115
Tall 792 150
3 Short 523 98
Medium 523 115
Tall 523 150
4 Short 388 98
Medium 388 115
Tall 388 150
1 (within single left/right column) Short 220 98
Medium 220 115
Tall 220 150
Description (1600px site width)
Number of CTAs CTA Height Width (px) Height (px)
1 Short 1600 190
Medium 1600 220
Tall 1600 250
2 Short 792 190
Medium 792 220
Tall 792 250
3 Short 523 190
Medium 523 220
Tall 523 250
4 Short 388 190
Medium 388 220
Tall 388 250
1 (within single left/right column) Short 220 190
Medium 220 220
Tall 220 250
Color Bar (1600px site width)