Buttons

Buttons are crucial call-to-action (CTA) elements in emails. This section explains how to add buttons to your template and customise their appearance, text, and behaviour.

Adding a Button to Your Email

1. Open the Content Tab: Ensure the Content tab is active in the right-hand sidebar.

2. Drag and Drop: Click and drag the "Button" element from the sidebar onto a column or content area in your email canvas.

Once dropped, the button will appear on the canvas with default text (e.g., "Button Text"), and its properties will load in the right-hand sidebar under the "Content" tab, specifically for the "Button" element.

Customising Button Properties

With the button selected on the canvas, its properties will be available in the right-hand sidebar.

Button Text and Smart Buttons (AI)

You can change the button's text and leverage AI for suggestions.

Using Smart Buttons (AI Text Generation):

• At the top of the button's content properties in the sidebar, you'll find the "Smart Buttons" section.

• Initial Text: Type your desired initial button text into the input field (e.g., "Coupon").

• Get Suggestions: Click the arrow button (or a "Generate" button) next to the input field. The AI will process your input and provide alternative text suggestions.

• Select a Tone (Optional): You might be able to select a tone (e.g., "Friendly") to influence the suggestions.

• Choose a Suggestion: Review the "Alternate suggestions against your text." Click on one of the suggestions (e.g., "Grab Your Discount") to apply it to your button. The button text on the canvas will update immediately.

Inline Text Editing:

• You can also directly click on the button text on the canvas to edit it. A toolbar with basic formatting options (Bold, Italic, Underline, Strikethrough) and "Merge Tags" may appear above or below the button.

Action

Define what happens when the user clicks the button.

• Action Type: Choose the button's action from the dropdown. Common options include:

  • Open Website (Default)

  • Send Email

  • Call Phone Number

  • Send SMS

• URL: If "Action Type" is "Open Website," enter the destination URL (e.g., http://www.discount.com).

  • Note: Always include the protocol (e.g., http:// or https://). A validation message like "Please enter a URL" might appear if the format is incorrect.

• Target: For "Open Website," specify where the link should open:

  • New Tab (Opens the link in a new browser tab or window)

  • Same Tab (Opens the link in the current browser tab or window)

Button Options

Customise the visual appearance of the button.

• Background Colour: Click the colour swatch to select the button's main background color. (e.g., a bright green #5FE03A).

• Text Colour: Click the colour swatch to select the colour of the button's text. (e.g., a dark red #AA4848).

• Hover Background Colour: Click the colour swatch to set the button's background colour when a user hovers their mouse over it. (e.g., a yellow #BFE03A).

• Hover Text Colour: Click the colour swatch to set the button's text colour on hover. (e.g., a dark blue #236FA1).

• Width:

  • Auto On/Off: By default, "Auto" is usually on, meaning the button width adjusts to its text content and padding.

  • Manual Width: Toggle "Auto" off to manually control the button width using a slider or input field (percentage or pixels). The video shows the slider changing the button's width on the canvas.

• Font Family: Select a font for the button text from the dropdown (e.g., "Arial Black").

• Font Weight: Choose the font weight (e.g., "Regular," "Bold") from the dropdown.

• Font Size: Adjust the size of the button text using the + / - buttons or by typing a pixel value (e.g., 20px).

• Line Height: Control the space above and below the text within the button, specified as a percentage or pixel value (e.g., 240%).

• Letter Spacing: Adjust the space between characters in the button text, specified in pixels (e.g., 20px).

Spacing (for the Button Element)

Control the button's alignment and padding within its container.

• Alignment: Choose how the button is aligned within its content block/column: Left, Center, or Right. (e.g., "Center" selected).

• Padding: Add space around the button text, inside the button's borders.

  • More Options: Toggle this on/off. When off, a single value might apply to all sides. When on (as shown in the video), you can set individual "Top," "Right," "Bottom," and "Left" padding values (e.g., Top: 10px, Right: 20px, Bottom: 10px, Left: 20px).

Border (for the Button Element)

Add a border around the button itself.

• All Sides / More Options: Similar to padding, you can apply border settings to all sides uniformly or individually if "More Options" is enabled.

• Style: Select border style (e.g., "Solid," "Dotted," "Dashed").

• Width: Set border thickness in pixels (e.g., 4px).

• Colour: Choose the border colour (e.g., a dark red #C60000).

Rounded Border (for the Button Element)

Create rounded corners for the button.

• All Sides / More Options: Apply radius uniformly or to individual corners.

• Radius: Enter a pixel value to control the roundness (e.g., 419px to create a pill shape).

General (Padding for the Content Block)

This section controls padding for the block that contains the button, not the button itself. This is useful for adding space around the entire button element within its column.

• Container Padding:

  • All Sides / More Options: Similar to other padding controls.

  • Set pixel values for padding around the button container (e.g., 30px for all sides).

Responsive Design

Control the button's visibility on different devices.

• Hide on Desktop: Toggle to hide the button when the email is viewed on desktop devices.

• Hide on Mobile: Toggle to hide the button when viewed on mobile devices.