You can configure a CTA (Call to Action) button widget to display custom buttons with URL links on a page.
Who can do this?
- Workplace administrators
- Site administrators
Set up
- In the Page Builder, select
New Widget.
- From the Widget List, select the
handlebars beside the CTA button widget to drag and drop the widget into place on the Page Builder. See Widget placement on a page for more information on placing widgets on a page.
- Select the placed widget's
Edit button.
- Review and make changes to the settings in the Configuration side panel. See the Settings section below for more details.
- In the Configuration side panel, select Save to apply your changes or Cancel to discard them.
- At the top of the Page Builder, select Save Page to save your changes.
Settings
| Setting | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| (Optional) Select to expand and collapse the configuration side panel for increased visibility. | |||||||||||||
| Widget Title |
(Optional) Enter a title for the widget. The title appears as a heading above the widget's contents to provide context to the widget and structure the page's content with defined sections. When entering a title, you do so only for the currently selected language. To enter the title for other languages, select the desired language from the Widget Title Languages dropdown and enter a title in Widget Title. |
||||||||||||
|
(Optional) Select a color swatch from the available color palettes or enter a hexadecimal color code for the title's text. The digital workplace's theme configures the availability of palettes and the use of hexadecimal colors. To enter a hexadecimal color code, use the format: |
|||||||||||||
|
(Optional) Select a color swatch from the available color palettes or enter a hexadecimal color code for the title bar's background color. The digital workplace's theme configures the availability of palettes and the use of hexadecimal colors. To enter a hexadecimal color code, use the format: |
|||||||||||||
| Widget Title Languages | (Optional) Select a language from the dropdown to enter a Widget Title translation in the currently selected language. | ||||||||||||
| Make Widget Full Width | (Optional) Select to expand the widget to the full width of the available area or page. | ||||||||||||
| Button Count |
(Optional) Select the number of buttons to display. Options range from 1 to 4 buttons. Selecting multiple buttons will populate additional CTA buttons in the widget configuration side panel. The default number of buttons is 1. |
||||||||||||
| Number of items per row |
(Optional) Select the number of buttons to display per row. The button count defines the maximum available number of buttons per row. The default number of buttons per row is 1. |
||||||||||||
| Button size |
(Optional) Select the number of rows to display. Options include:
|
||||||||||||
| Include images? |
(Optional) Select to use images as the background for the CTA buttons. You can upload images in Background image for each CTA button when selected. When using images, the image will be displayed with a color bar of text below it. See Button Size above for more information. |
||||||||||||
| (Optional) Select the handlebars beside a CTA button to drag and drop the button in the widget configuration side panel to reorder the CTA buttons. | |||||||||||||
|
Border Color |
(Optional) Select a color swatch from the available color palettes or enter a hexadecimal color code for the CTA button's border color. The digital workplace's theme configures the availability of palettes and the use of hexadecimal colors. To enter a hexadecimal color code, use the format: |
||||||||||||
|
Title Text Color |
(Optional) Select a color swatch from the available color palettes or enter a hexadecimal color code for the CTA button's title text. The digital workplace's theme configures the availability of palettes and the use of hexadecimal colors. To enter a hexadecimal color code, use the format: |
||||||||||||
|
(Optional) Select a color swatch from the available color palettes or enter a hexadecimal color code for the CTA button and bar's background color. The digital workplace's theme configures the availability of palettes and the use of hexadecimal colors. To enter a hexadecimal color code, use the format: |
|||||||||||||
|
CTA Button: Button name |
(Optional) Enter the text to be displayed over the background color or image. | ||||||||||||
|
CTA button: Search Content |
(Optional) Enter a search term and select an article or wiki from the list to auto-populate the URL field for the CTA button. | ||||||||||||
|
CTA button: Test this link |
(Optional) Once the CTA button's URL field has been filled, select Test this link to open the link in a new tab in your browser. | ||||||||||||
|
CTA button: URL, anchor(#), or mailto |
(Optional) Enter a valid URL address for the CTA button to redirect the user to in their browser.
(Optional) A link can be tested by selecting Test this link above this field's text box. This will open the link in a new tab. |
||||||||||||
|
CTA button: Background Image |
(Optional) This option is only available if Include images? is turned on. Upload an image to appear as the background for the CTA button. For image specifications, see the Call to Action Widget Image Specifications section in the Featured image article. To upload the image:
When a button uses a background image, the button's text is displayed in a bar below the image. |
||||||||||||
|
CTA button: Open in New Tab |
(Optional) Select to allow the link to be opened in a new tab in the user's browser. | ||||||||||||
Note:
The digital workplace theme determines the appearance of the widget's content unless a widget setting specifically overrides a theme setting. See the Theme article for more information.