Add a call to action (button)

Flexmail offers you easy ways to add a call to action to any messages regardless of the way you are building them. A call to action is basically the main point of your message. You reach out to get a reaction. Convert your messages into sales, get people subscribed to your events or get feedback. Those are just examples. You can use your call to action for any goal you are pursuing. 

This article will walk you through a helpful example of adding a call to action in all of those three tools - the Drag & Drop Builder, the Wizard Template and the HTML Editor.

Drag & Drop Builder

You can drag and drop a button element onto an empty structure or a predefined structure that includes a button element onto the canvas. 

1. In the Element tab you can find the Button element. Drag and drop it onto the canvas over an empty structure.

   

2. Next, click on the Button element on the canvas to open the Button Properties.

   

3. First, type in the content of your button in the Button text field. 
4. Then, you can customise the appearance of your button: 
   • Set the width and height of the button by pressing either the plus or minus on the button right next to the Width or Height title. 
   • Pick the background colour of your button. 
   • Adjust the alignment and radius of the button.
   • Choose the border style for your button - click on 'more options' if you want to style all sides of the button differently. 
5. The next and most important step is to choose the action of your button. You can choose between various actions for your button:
   • Email - when your contacts click on the button it will redirect them to an email address, it will start an email message from them to you. 
   • Link - forward your contacts to an external source. 
   • Forms - ask your contacts to fill in a form for you, e.g. an invitation RSVP.
   • Surveys - ask your contacts to answer several questions for you, e.g. customer feedback.
   • Landing pages - forward your contacts to a landing page. 
   • File library - clicking on the button will download a file.

   

6. Next, you can adjust the text style, margins and the padding of your button. You can choose the colour, font family and size, as well as the typography - bold, italic and underlined - of your button text.

Wizard Template

In the Wizard Template you can add a call to action to the personalisation elements Call to action and Articles. 

Call to action

1. Click on the Call to action element to expand it. 
2. First, you can edit the text of your call to action.
   • Set the title for your call to action - this will be a title that describes the purpose of the button to the user. 
   • Set the colour of the text of your title. 
   • Pick a name for your button - that will be the text your button shows.
3. Now, what you need to do is pick the action of your button in the Link field. Here you can choose to enter a URL in the field or click on any of the small letters in the field. Every letter lets you pick a different action.  
   • 'L' stands for Landing page
   • 'F' stands for Forms
   • 'S' stands for Surveys
   • 'D' stands for Document
     
4. You will notice that you have 3 colour pickers next. 
   • The first colour is for the text in the button.
   • The second colour is for the background of the button.
   • The third colour is the background of the canvas.

   

Articles

1. Click on the Article element to expand it. 
2. Click on Add an article to start.
   

   

3. First, fill in your article content. Then, to manage your call to action button, scroll to the bottom until you reach the end of the Content text field.
4. Next, insert the Link name for your button to make your call to action in your article most engaging. 

5. Now, what you need to do is pick the action of your button in the Link field. Here you can choose to enter a URL in the field or click on any of the small letters in the field. Every letter lets you pick a different action.   
• 'L' stands for Landing page
• 'F' stands for Forms
• 'S' stands for Surveys
• 'D' stands for Document
6. You will notice that in some of the templates you have some colour pickers in your article element. Here you can set the colour of the text and background of your button or even the background colour of your call to action canvas.
   
   
   Support tip
   You can always choose the colours of your call to action button. When you don't find colour pickers in the article element, you can always scroll down to Layout to set the text and background colour of your button.

   

HTML Editor

The WYSIWYG HTML Editor does not have a specific option to add a button. This article will give you a simple suggestion how to add a button via HTML, however, please note we do not provide support for custom HTML code.

1. From your WYSIWYG options, click on the HTML Source button.
2. In the source code, you can add the following code.
   
   

   <button>Button text</button>
   	

3. Then click on Update to edit the source code. 
4. This action will add a button to your HTML message. 
5. Next, highlight the text in the button and click on the Hyperlink button at the top.

   

6. That will open the Insert/Edit Link pop-up. Here you can choose what your button will do or what type of action you are calling your audience to. You can link to an external source, a landing page, form, survey or even a file for download.

   

7. Next, you can also customise the Popup, Events and Advanced settings to adjust the appearance of your link. E.g. you can choose for the link to open in a popup or to select an action that happens upon hovering over the link.
8. Click on Insert when you are ready to apply the functionality to your button.

Related articles