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.
- In Custobar, go to Settings -> Content templates -> New template (bottom of the screen).
- Give your module a name, for example, “Custom CTA module”.
- From the “Kind” drop-down menu, select “Email module”.
- Select which templates you want to show the module for.
- Go to the “Message source” tab.
- Download sample CTA module code that you can paste into the “Message source” field. You can ignore the CSS-class warning at this stage.
- Click “Create”.
- 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 classcb-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 ofcb-cta-module-btns
and updates the data-* attributes of the nested descendant, which has the classcb-cta-module-btn
.