Customise Email CTAs

Email CTAs are crucial for directing recipients to take specific actions, and the editor provides several intuitive options for tailoring their functionality and design.

Inserting a CTA Button

To add an Email CTA, simply click the Insert CTA button in your editor's toolbar. The CTA will be placed wherever your cursor is positioned within the editor.

By default:

• If specific content is linked to the email, the CTA will display the text "View event" and use the content_link_auto_login as its link.

• If no content is linked, the CTA will default to the text "View hub" and use the fallback link hub_link_auto_login.

---

Interacting with a CTA

When you insert a CTA using the toolbar, you can hover over the button or link to reveal five customization options. These options allow for easy editing and styling of the CTA:

• Open Link Click this option to test and verify the link associated with the CTA. The link will open in a new tab or window.

• Change Text Color

  • Updates the text color of the CTA by adding inline styles to the closest anchor (<a>) element.

  • There’s no need to highlight the entire text—this option automatically applies the style to the relevant anchor.

• Change Background Color

  • Customizes the background color of the CTA.

  • Similar to changing the text color, this adds inline styling directly to the anchor (<a>) element, ensuring the change is localized to the CTA.

• Edit Link Allows you to modify the URL or action associated with the CTA. This is useful for updating or correcting links.

• Unlink Removes the link functionality from the CTA, effectively turning it into plain text or an unlinked button.

---

Customizing Colors

1. Text Color: To change the text color of a CTA, hover over the CTA and select Change Text Color. This adds an inline style attribute to the closest <a> element. Example:

<a 
    href="[hub_link_auto_login]" 
    class="button button-blue" 
    target="_blank" 
    rel="noopener noreferrer" 
    style="color: rgb(0, 0, 0);">
        View hub
</a>

1. Background Color: To change the background color, hover over the CTA and select Change Background Color. This modifies the inline style attribute of the anchor (<a>) element. Example:

<a 
    href="[hub_link_auto_login]" 
    class="button button-blue" 
    target="_blank" 
    rel="noopener noreferrer" 
    style="border-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);">
        View hub
    </a>

These changes are immediately visible in the editor and will render in the final email.

---

Best Practices

1. Use Meaningful Links: Ensure that the CTA’s destination is clear and relevant to the email’s purpose.

2. Contrast for Accessibility: Choose text and background colors with sufficient contrast for readability, ensuring compliance with accessibility standards.

3. Test Links: Always use the Open Link option to confirm the CTA points to the correct URL.

4. Avoid Over-Styling: Use inline styles sparingly to maintain email performance and compatibility across email clients.