This feature available on All Plans
Contents
Widget Settings
Setup (Adding Links)
Visibility
CSS Class
Overview
The Buttons Widget adds visual buttons to your campaign. These buttons can be linked to external websites of interest, like your social media channels; or they can be linked to actions that will help visitors navigate around your campaign. They can also trigger popups and award points to your entrants.
To add one of these widgets to your campaign, click the Buttons Widget icon in the Add Widgets Panel, or click and drag the icon into your preview area.
Widget Settings
The widget settings popup is where you'll make any needed changes to your Buttons Widget. To change the widget name, click on the pencil icon in the top-left (next to the name) then type your new name.
You will also see the CSS ID (starting with a #) of your new widget listed in the top-right corner of the popup.
You'll want to move through each item in the menu on the left side to make sure you've completely customized the Buttons Widget in the way you'd like. You can navigate through these sections using the Back and Next buttons at the bottom.
When you're finished making changes to your widget, click the blue Save and Exit button.
Setup (Adding Links)
The Setup section is where you'll add the links that will make up the buttons displayed by the widget. To get started, click on the Add New Link button. Through the rest of the doc, links and buttons are used interchangeably.
This will open the Link popup, with all the options for your new button.
First, you'll determine the text or image used for your button. Add text using the Link text field, or click on the + icon under Link image to open the Media Library and select an image to appear on your button.
Now you'll decide whether you want the button to open a link or trigger an action in your campaign. To have it open a link, select the Go to URL radio button. Then type the URL of your selected site into the URL field. Finally, you'll decide whether you want to open the link in a new window, or in the same window.
If you'd like to have the button trigger an action in your campaign (which is likely if you're using it for in-campaign navigation or showing a popup), select the Take action radio button. From there, you'll choose which widget you want to trigger using the widget dropdown on the left, and which action is triggered using the Choose an action... dropdown on the right. Your options are Show, Hide, and Scroll to.
There's also a section where you can use the button to award points to an entrant via Points for Actions. Use the Form Widget dropdown to select the form where your entrants are submitting their information, add the number of points they'll receive for clicking the button using the Points to award field, and then add an Action label - this label added to this field will be applied to any entry that completes the action.
When you've finished, click on Save Link to be brought back to the Setup section.
You'll see your new button appear in the Setup section; all the needed information about the link is available at a glance.
You'll see the text you added to the button (or a thumbnail of the image you used) and then either the name of the action that is triggered or the URL to which the button is connected. In addition, these icons:
When you have multiple links, click and hold the three lines icon, then drag the link up or down to change the order in which it appears in the widget.
Click the pencil icon to edit the link's settings.
Click the X icon to delete the link.
Visibility
If you'd like to limit visibility of the widget to a specific date and time, make the widget a popup, only show the widget in your Builder, or limit in which country/countries the widget can be seen; you'd do so in the Visibility section. More information about these settings can be found in the Widget Visibility help doc.
CSS Class
In this section, you can add a CSS Class that will be associated with the Buttons Widget - that way you can target it with custom CSS code. Rules and naming conventions are provided so that you don't use a class that won't work. Simply add your CSS class(es) to the Extra CSS Classes field.
