How to use a button in automation e-mail templates?
This article explains how to replace an automation invite link in an e-mail template by a styled button. In order to make an automation invite e-mail look better you can use several styling options to put the automation invite link behind a button.
| IN THIS ARTICLE |
|---|
| Step 1: Insert link |
| Step 2: Add "ul", "text" and "style" |
| Step 3: Name Your Template |
Step 1: Insert link
Navigate to the automation invite template you want to add the button to and click the "Insert Link" icon.
Step 2: Add "url", "text" and "style"
You now see a pop-up with 3 fields: "url", "text" and "style".
- Url: use {{qlinkBtn}} as value in the url field.
- Text: enter the desired button label (ie: "Start")
Style: this requires some finetuning. There are several options to change like font size, color, background color and radius.
Use the following format:
display: inline-block; padding: 10px 20px; font-size: 15px; color: #ffffff; text-decoration: none; border-radius: 10px; background-color: green;
Click "Insert" to submit the data. The button will show.
Step 3: Change styling values
In order to style the button into your own preferences, click the button and click the "Edit link" icon. Update the values you want to change accordingly.
- padding: 10px 20px -> update this value to change the height and width of the button.
- font-size: 15px -> update this value in case you want to change the font size of the button label.
- color: #ffffff -> update this color code into the text color you like.
- text-decoration: none
- border-radius: 10px -> update this value in case you want the corner radius to be bigger or smaller
- background-color: green -> update this value in case you want a different background color of the button. You can also use hex color codes here (ie: #337ab8 for blue).
