What is it?

A call-to-action (CTA) instructs 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.

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

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.

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.

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.

Sizing of CTA Widget Images

Below are the minimum image dimensions when the CTA Widget spans all available columns.

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

• Images are always cropped to the center of the CTA.
• On mobile, the CTA height stays the same while the width can vary. As a result, potential cropping can occur and it is best to avoid using images that contain text.
• Adding large paragraphs of text to a CTA can increase the height of the CTA.