Call to Action Widget

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.

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.

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.

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.

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.

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

Note: Text will always be centered vertically.

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. 

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

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).

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.

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.

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.

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).

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.

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.

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.

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.

• 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.