Understand the Button block
The Button block adds a clickable call-to-action to your template. Buttons can link to a website, landing page, or other destination, and can be fully customised in terms of text, color, font, size, and alignment.
Button text supports inline formatting and personalization tags, allowing you to create dynamic, personalised calls-to-action.
Before you start
Outlined below are important factors to know before working with the Button block.
The Button block must be placed inside a column within a Columns row. It cannot be added directly to the canvas.
The button action must be configured before publishing, a button with no URL set will be flagged by the Audit tool.
Button appearance settings are separate from the button action settings. Both must be configured independently.
Add a Button block
You can add a Button block to either an email template or a landing page template.
In an email template
Follow the steps below to add a Button block to an email template.
In the left navigation menu, click Campaign Management Tools.
Click Channels, then click Emails.
Open the template you want to edit and click Designer.
Click the Content tab in the right-side panel.
Drag the Button block from the panel into a column in the canvas.
Click the block to select it. The right-side panel updates to show the Button settings.
In a landing page template
Follow the steps below to add a Button block to a landing page template.
In the left navigation menu, click Campaign Management Tools.
Click Components, then click Landing Pages.
Open the template you want to edit and click Designer.
Click the Content tab in the right-side panel.
Drag the Button block from the panel into a column in the canvas.
Click the block to select it. The right-side panel updates to show the Button settings.
Edit button text
Follow the steps below to edit the button label text.
Click the Button block in the canvas to select it.
Click directly on the button text in the canvas to enter edit mode.
Type the button label text.
Use the inline toolbar to apply formatting as needed.
The following formatting options are available in the inline toolbar.
Option | Description |
B (Bold) | Makes selected text bold. |
I (Italic) | Italicises selected text. |
U (Underline) | Underlines selected text. |
S (Strikethrough) | Applies strikethrough to selected text. |
Personalization | Opens the personalization tag picker to insert a dynamic tag into the button text. |
Configure the button action
The Action section in the right-side panel controls what happens when a recipient clicks the button.
Follow the steps below to configure the button action.
Click the Button block in the canvas to select it.
In the right-side panel, scroll to the Action section.
Configure the following fields.
Field | Description |
Action Type | Select the type of action the button performs. The default is Open Website, which navigates the recipient to a URL when clicked. |
URL | Enter the destination URL the button will link to. |
Target | Select how the link opens. New Tab opens the URL in a new browser tab. Same Tab opens the URL in the current browser tab. |
Personalization Links | Optionally select a personalization tag to dynamically generate the link URL based on recipient data, such as a unique guest portal link. |
Customise button appearance
The Button Options and Spacing sections in the right-side panel control the visual appearance of the button.
Follow the steps below to customise the button appearance.
Click the Button block in the canvas to select it.
In the right-side panel, scroll to the Button Options section.
Configure the following settings as needed.
Setting | Description |
Background Color | The fill color of the button. Select using the color picker or enter a HEX code. |
Text Color | The color of the button label text. |
Width | Turn on Auto to size the button to fit the label text, or turn off Auto to set a fixed width using the slider. |
Font Family | The font used for the button label text. |
Font Weight | The weight of the button label text, for example, Regular or Bold. |
Font Size | The size of the button label text in pixels. |
Line Height | The vertical spacing between lines of text within the button, expressed as a percentage. |
Letter Spacing | The horizontal spacing between characters in the button label text, in pixels. |
Scroll to the Spacing section and configure the following settings.
Setting | Description |
Alignment | The horizontal alignment of the button within the column: left, center, right, or justified. |
Padding | The space between the button label text and the button edges. Click More Options to set top, right, bottom, and left padding values independently. |
Use Smart Buttons
Smart Buttons is an AI-powered tool that generates suggestions for button label text in different tones and languages.
Follow the steps below to use Smart Buttons.
Click the Button block in the canvas to select it.
In the right-side panel, locate the Smart Buttons section.
Click Get Suggestions.
Review the AI-generated suggestions. Each suggestion is presented in a different tone or style.
Click a suggestion to apply it as the button label text.
đ Note: Smart Buttons supports multiple languages. Always review AI-generated suggestions for accuracy and brand alignment before publishing.
Enable Display Conditions on a Button block
Display Conditions allow the button to be shown or hidden for specific recipients based on their profile data.
Follow the steps below to enable Display Conditions on a Button block.
Click the Button block in the canvas to select it.
In the inline block toolbar that appears above the button, click the checkmark icon. The Display Condition section becomes active at the top of the right-side panel.
Configure the condition to control which recipients see this button.
đ Note: Display Conditions are also referred to as Dynamic Content. Refer to the Template Designer â Display Conditions article for full guidance.
Duplicate or delete a Button block
The inline block toolbar above the button provides options to duplicate or delete the block.
Click the copy icon to duplicate the block, creating an identical copy immediately below it.
Click the trash icon to delete the block from the template.
Key considerations
Outlined below is additional information about working with the Button block.
Personalization tags in the button URL
Use the Personalization Links field in the Action section to select a personalization tag that dynamically generates the link URL based on recipient data.
Personalization tags in the button label
While in button text edit mode, click Personalization in the inline toolbar to insert a tag directly into the button label.
Button flagged in the audit tab
The Audit tool flags buttons that have no URL set in the Action section. Configure the URL field before publishing the template.
Multiple buttons in a row
You can include more than one button in a row. Add multiple Button blocks within the same column, or place individual Button blocks in separate columns within the same Columns row.
Smart Buttons and existing button text
Clicking a Smart Buttons suggestion replaces the current button label text. If you want to keep your existing text, note it before generating suggestions.