How to add a call-to-action (CTA) module into email templates?

Email templates created with email template designer

Call-to-action modules are a standard feature of Custobar and they are automatically included in all new email templates created with the email template designer. To add the CTA module to your templates, create a new email template with the email template designer which you can find from Settings -> Content templates -> Email template designer.

Custom templates

If you have a custom email template, follow these instructions to create a custom CTA module for your template.

1. In Custobar, go to Settings -> Content templates -> New template (bottom of the screen).
2. Give your module a name, for example, “Custom CTA module”.
3. From the “Kind” drop-down menu, select “Email module”.

4. Select which templates you want to show the module for.

5. Go to the “Message source” tab.
6. Download sample CTA module code that you can paste into the “Message source” field. You can ignore the CSS-class warning at this stage.

7. Click “Create”.
8. Now the CTA module is ready to be used in email campaigns, or you can continue to customise it.

Further customisation of the CTA module

A call-to-action module is a content module, with 1 to 5 buttons, each with its own unique action and redirection link. The buttons are edited with email content editor. To create a call-to-action module, decorate a normal module as follows.

• Decorate the element wrapping buttons with class cb-cta- module-btns, and add two attributes to it.

• data-cb-cta-mail-width is the pixel width of the entire message

• data-cb-button-widths is a JSON array of five button widths, where the first width is for a single button and the last a width for each of the five buttons.

• Add a single element as the direct child of cb-cta-module-btns, and create your button layout with it. Decorate one of the descendant elements with class cb-cta-module-btn. This will be the button that is managed by Custoboar. Custobar manages the buttons, so that it clones the first direct child element of cb-cta-module-btns and updates the data-* attributes of the nested descendant, which has the class cb-cta-module-btn.