Button Overview in Email Templates
The Button element lets you create clickable buttons for actions like navigating to a website, sending an email, or making a call. This feature is useful for guiding participants to learn about a study, complete surveys, contact staff, and more, streamlining call-to-action responses.
How to Add the Button Element to Your Template
To add a button element to your email template, go to the Content section, click the BUTTON icon, and drag it into the email body.
Properties of the Button Element
You can customize the Button element in both Desktop and Mobile modes, but Mobile mode offers fewer styling options. Notably, Mobile mode does not allow you to:
- Use the Smart Button functionality to enhance the messaging in the button's text.
- Set Actions for the button, such as opening a survey, sending an email, or initiating a phone call.
Smart Buttons
The Smart Button feature can assist with rephrasing or writing button text. After entering your text, the Smart Buttons section uses AI to provide alternative suggestions. You can select a preferred option (red) or adjust the tone to be more friendly, professional, witty, or other styles (green).
Action
The Action section allows you to define what happens when a participant clicks the Button. The email can perform one of the following actions:
- Open Website: Redirects the participant to a specified URL in a new or the same tab.
- Send Email: Opens an email draft with a preset email address, subject line, and body text.
- Call Phone Number: Initiates a phone call to a chosen number (available only when clicked on a phone).
Warning
The Send Email and Call Phone Number actions may not function properly depending on the recipient's email browser. To improve the chances of these actions working, consider using a hyperlink instead of a button.
Button Options
Button options allow you to customize the following:- Text Color: Adjust the color of the Button's text.
- Background Color: Set the color surrounding the Button's text.
- Auto Width: Enable automatic sizing of the Button, or toggle it off to set a custom width.
- Alignment: Align the Button to the left, center, right, or justify it within the column or row.
Spacing
The Spacing section allows you to adjust the spacing and formatting within the Button. It includes the following options:
- Line Height: Adjust the vertical space between lines of text to bring them closer or farther apart.
- Padding: Add spacing between the Button's border and its content. Use the "More Options" toggle to customize padding for the top, right, left, and bottom individually.
- Border: Customize the Button's border, including thickness, color, corner rounding, and style (solid, dotted, or dashed).
General
The General section lets you adjust the padding between the Button's border and the column or row it is placed in. Use the "More Options" button (red) to customize the padding individually for the top, right, left, and bottom of the Button.
Responsive Design
Responsive Design allows you to customize emails for optimal display on various devices. Buttons can be adjusted to display perfectly or be hidden on specific devices. To customize for a particular device, click the desktop icon, mobile icon, or select the Desktop or Mobile tab at the bottom left of the editor. This lets you edit button features based on whether the recipient views the email on a desktop or mobile device.
In the Responsive Design section, you can choose to hide the button on either desktop or mobile devices. When "Hide on Desktop" or "Hide on Mobile" is toggled on, the button will appear faded in the email template and will be invisible to participants based on the device they use to view the email.
