Button Overview

The Button element allows you to add a button that participants can click on to navigate to a website, send an email, or call a phone number of your choice. Teams can use this feature to help participants learn more about a study, complete a survey, contact study staff, and more. Buttons help guide email recipients toward a call-to-action more quickly. 

How to Add the Button Element to Your Template

To add the button element to your email template, ensure you are in the Content section. Then, click the BUTTON icon and drag it onto the email body. 

Properties of the Button Element

You can choose to customize the Button element in Desktop or Mobile mode. However, the Mobile mode does not contain all the styling options. Specifically, the Mobile mode does not include the ability to:

• Use the Smart Button functionality to enhance the messaging of your button’s text.
• Set Actions so that when the button is clicked, it can open a survey, send an email, or initiate a phone call.

Smart Buttons

If you want help rephrasing or writing content you can use the Smart Button feature. Once you type out your Button text, the Smart Buttons section will use AI to help you rewrite your text. It will offer several suggestions you can use to replace your text by selecting your preferred alternative (red). You can choose to change the tone to make it more friendly, professional, witty, or more (green).

Action

The Action section lets you choose what happens when the participant clicks the Button. When a participant clicks the Button, the email will perform one of the following actions:

• Open Website: Redirects the participant to a URL in a new tab or the same tab.
• Send Email: Opens an email message with your chosen mailing address, subject line, and body message.
• Call Phone Number: Initiates a phone call to a number of your choice. This option only works if the participant clicks the button while on a phone.

Button Options

Button options allow you to modify the following:

• Text Color: The color of the Button’s text.
• Background Color: The color of the Button around the text.
• Auto Width: The Button will automatically size itself. You can toggle this off to customize the width of the Button.
• Alignment: Position the Button left, center, right, or justified within the column or row.

Spacing

The Spacing section allows you to control the spacing and formatting within the Button. In this section, you can control the following:

• Line Height: The vertical space between lines of text, allowing lines to be closer or farther apart.
• Padding: Added spacing between the border of the Button’s box and the content inside of it, used to separate items more clearly. You can toggle on “More Options” to customize the padding on the top, right, left, and bottom.
• Border: The border around the Button. You can control the border’s thickness, color, whether it is rounded and by how much, and if it is a solid, dotted, or dashed line.

General

The General section allows you to control how much padding there is between the border of the Buttons and the column or row it is in. You can toggle the “More Options” Button (red) to customize how much padding is on the top, right, left, and bottom of the Button.

Responsive Design

With responsive design, you can customize your emails to ensure they display properly across different devices. Buttons can be tailored to display perfectly or be hidden so that they don’t display on a certain device. To customize the email for a specific device, click on the desktop icon or mobile icon, or select the Desktop or Mobile tab at the bottom left of the editor body. You can edit different aspects of the button based on the device the recipient is using to view the email.

Under the responsive design section, you can hide the button on a desktop or mobile device. When either "Hide on Desktop" or "Hide on Mobile" is toggled on, the button will appear faded within the email template, making it invisible to participants depending on whether they are viewing the email on a desktop or a mobile device.