Call to action widget

Use this widget to display a one or two call to action buttons on your page. You can have a button from the primary action and a button for a secondary action. Each button can lead to a different page or can display different items from your website or from other sites.

By default, the left button is the primary and the right is the secondary, but you can switch their places or display only one button. You can also style the buttons differently.

You can place a Call to action widget only inside a Section widget.
To do this, perform the following:

1. Inside a column from the Section widget, click Add widget here…
2. Select the Content tab.
3. Click the Call to action widget.
   The widget is placed inside the selected column of the Section widget.
4. Click Create call to action.

You can configure the buttons properties in the following way:

1. Expand Primary action.
2. In Action label, enter the label of the primary button.
   If you leave the field empty, the primary button will not be displayed and you can display only the secondary button.
3. In Action link, enter the link to the page that you want to open when the button is clicked or perform the following:
   1. To select a page or an item from your website, click Select page or content.
   2. Under Site, select the website from your multisite instance where the page or the item is located and, if you have multiple languages, select the language by clicking  (Edit).
   3. Under Content type, select the content type that you want to open when the button is clicked.
      A list of content items or pages appears.
   4. Click the desired item or page and click Use selected.
4. Expand Secondary action.
5. In Action label, enter the label of the secondary button.
   If you leave the field empty, the secondary button will not be displayed and you can display only the primary button.
6. In Action link, enter the link to the page that you want to open when the secondary button is clicked or select an item from the website as described in Step 3.

To configure how to display the buttons in the widget, perform the following:

1. Expand Display settings.
2. In Style, choose how to style the primary and the secondary buttons.
   You can choose from the dropdown boxes with predefined styles.

   NOTE: By default, the primary button is displayed on the left, while the secondary on the right. You can switch them by changing their labels, actions, and by choosing Secondary style for the primary button and vice versa.

3. In Position, choose how to align the text on the button.
4. In Margins, you can choose the margins between the buttons and the column where they are placed.
   Choose from the predefined values of none, small, medium, or large.
5. Click Save.

To open the advanced settings, in the upper-right corner of the Call to action widget page, click  (Advanced settings)

• In Label, you can enter a specific name for this widget.
  This name will be displayed in:
  • The page editor as a label for the widget
  • In the treeview with the page structure in the right pane of the page editor.
• In CSS class, you can enter individual CSS class for the Call to action widget.
• In Attributes, you can enter specific HTML attributes which Sitefinity CMS applies to the HTML tags used when rendering the Call to action widget.
  For example, to open the Primary link in a new browser tab, under Attributes » Primary enter target for Key and _blank for Value.

Save your changes.

To add custom button configurations for the widget, insert an additional entry in the app.settings file as per the following example:

1. Expand Display settings.
2. In Style, choose Custom action from the dropdown box.