Call to Action Widget

Use the Call to Action (CTA) Widget to instruct users to perform an action. Designed to be visually prominent, CTAs catch a user’s attention quickly and guide them to relevant next steps or additional information. CTAs often include action words directing users to complete tasks or view key 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.

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 to 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

Features and functionality

The Layout tab of the CTA Widget allows you to configure the display, layout, and content of your CTA.

Choose a display setting

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

Customize your layout

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

Customize your CTA content

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

• 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.
• 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).
• 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
• 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.
• 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
• 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, and BMP.

Tip: 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.

Reordering your CTAs

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.

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. The dimensions below are from a digital workplace that uses a default theme being displayed in a browser window that is 1200px wide. 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.

In addition to these sizes, images will also behave in the following ways:

• Images are always cropped to the center of the CTA.
• 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 it is best to avoid using images that contain text.
• 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.

Text Button

Description

* Height values assume Title text, Secondary text, and Link text each occupy one line. Height will be smaller if one of these is not included, and larger if their content of one spans multiple lines.

Color Bar

* Link text color bar covers the bottom 50px of the image.