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.
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:
- Place a Call to Action widget on a page, space, or dashboard. For more information, see Placing and setting up a widget.
- Select the placed widget's Edit button.
- 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.
- In the widget editor, select Update to apply your changes or Cancel to discard them.
- 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. |
Layout tab
Setting | Description |
---|---|
Display setting |
Select an option under Display as:
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:
|
Customize CTA: Text Color
|
Select a text color for your CTA.
|
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:
|
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:
|
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:
|
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.
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:
- Fully enlarge your browser window.
- Open your browser's developer tools (pressing F12 on most browsers).
- Select the Console tab.
- 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
|
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
|
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
|
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 |
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 |
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 |
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 |
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 |
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 |