An introduction to the Button Element

Buttons are the cornerstone of Funnels, they are responsible for advancing/navigating between steps, triggering automated emails, carrying over data and more.

In this article we will take a quick look at buttons and their settings and a brief overview on button actions.

Buttons are an important aspect of navigating websites and for Calls to Action, and so it's important to be able to fully customize them to effectively communicate whatever is needed to the customer. With this in mind, buttons have a wide array of options to be able to customize them to your specifications. Here is a breakdown of the options available:

• Button actions - Control the events that take place when customers press the button
• ID - Automatically assigned and uneditable. Available as reference or to be copied.
• Alternative ID - An optional custom ID to be able to easily reference in various context.
• Button Data Value - An optional value assigned to the button.
• Button Text - A field in the sidebar to customize the text content on a button, rather that entering in the Canvas.
• Width/height - A group of settings to specify the width and height and control how it might display on different screen sizes
• Font weight - Allows you to select between available weight variations of your font. 
• Font size - Change the default size of your text, the default is 16px.
• Text Align - Choose if the text is aligned to the left, center, or right inside the button.
• Text Color - Set the color of the button text.
• Background Color - Set the background color of the button.
• Button Shadow - Add a drop shadow to the button by selecting one of the preset options.
• Border Radius - Adjust how round the corners of the button are.
• Border - Customize the border of the button with options for style width and color.
• Button Padding - Control the padding inside the button to create space between the text and each individual side of the button
• Button Image - Add an image inside the button, with control over size and position.
• Block Options - The standard block options for all elements. The padding settings here control the distance between the button and other elements not the padding inside the button.

Button actions are the tool that allows you to control what happens when a customer presses a button, this can be simply advancing to the next step, or a single button can do several different things based on specific conditions or at the same time.

To access button actions, while you have a button selected, either press the gear icon on the toolbar for that button in the Editor Canvas.

Or you can access it in the side bar by pressing the button labeled "Button Actions" at the top.

Either option will open a modal where you can set the primary action and additional actions.

The primary action (required) allows you to choose between jumping to a step or redirecting to an external link. By default a button will be set to jump to the next step in the Funnel, but you can choose any step forward or backward, or by changing the dropdown to "Redirect to a URL" you can send customers to an external page.

Additional Actions is where the meat of button actions are. You can add an unlimited number of actions to a button with the option between nine Action Types, and set the conditions for those actions to be triggered.

For more information on Button action check out these articles:

• Understanding button action types
• Understanding button action conditions