There are various ways to customize buttons in your email.
Link
When a user clicks on a button, you can make it:
Open a web page. A website address is required.
Send an email. A mail to email address, subject and body is required.
Make a call. A phone number is required.
Send SMS. A phone number is required.
FAQ: How do I add in a token into a button?
First you should create a Knak Merge tag in Admin > Integrations > Merge Tags:
Then add in the Knak Tag Syntax to the link input field! Example: {{!Link Tag Name!}} → http://www.knak.com/{{!Link Tag Name!}}
With buttons, you can customize the:
Font. Select the type of font you want for the button.
Text Color and Button Color. You can easily select your brand's primary, secondary or link color or any other color of your liking.
Text Size. Choose the size of the text inside the button.
Text Styles. The text can be regular, bold, italics or underlined.
Button Width. As a default, the button width will be set to auto which means it will fit the width of the text. You can uncheck 'Auto' and set the width of the text as a % of the section.
To set a separate button width for mobile and desktop, add two buttons, set one to hide on desktop and the other to hide on mobile under the 'Responsive Options'. Set the preferred widths for each.
Text Align. The text inside the button can be aligned to the left, center, right or justified.
Align. The button itself can be aligned (left, center, right) within the column.
Line Height. This sets the distance between lines of text.
Highlight on hover
When this toggle is on, the button will be highlighted when the mouse cursor hovers over the button.
Not hovering:
Hovering over the button:
Padding
Inner padding can be changed to customize a button. This will create space around the text to the button.
Outer Padding can also be changed which will create more space around the button itself.
If you'd like padding to be different for each side around the text and button, selecting More Options which will allow you to customize the button further.
Border
A border can be added to button to further customize the look.
The border of the button can be:
Solid, Dotted or Dashed
Different colors including the Primary, Secondary and Link colors to keep branding consistent.
The thickness of the border can be increase.
You can also add rounded corners to your button by adjusting the button radius, Changing the number will determine how round the corners of the button will be. 0 pixels will be square and 100 pixels will be rounded completely.
More options allows you to change the side of each border's type, color and thickness.
Responsive Options
Buttons can be hid on mobile or desktop by clicking the either option.
Troubleshooting Button Links
When setting tel: and sms: links, you may encounter issues with some email clients not prompting a call or text. Support for these links may vary depending on the email client. Below is a table of how these links function in each major email client:
| iOS & Apple Mail | Gmail WebMail | Gmail App | Yahoo & Yahoo App | Outlook.com & Outlook Apps | Outlook (Windows) | Outlook (Mac) |
Call Button | ✔️ Works | ✔️ Works | Retained but requires long press and then select “Call ___” | Button remains but is not clickable | ✔️ Works | ✔️ Works, phone-capable app needed on PC to make the call | ✔️ Works |
SMS Button | ✔️ Works | Button remains but is not clickable | Button remains but is not clickable | Button remains but is not clickable | Button is removed | Retainedbut displays a security warning when clicking. SMS-capable app needed on PC to send an SMS. | Button remains but is not clickable |
Call Link | ✔️ Works | ✔️ Works | Retained but requires long press and then select “Call ___” | Text remains but is not clickable, link styling is retained (eg any underline or color) | ✔️ Works | ✔️ Works, phone-capable app needed on PC to make the call | ✔️ Works |
SMS Link | ✔️ Works | Text remains but is not clickable link styling is retained (eg any underline or color) | Text remains but is not clickable, link styling is retained (eg any underline or color) | Text remains but is not clickable, link styling is retained (eg any underline or color) | Text remains but is not clickable, link styling is lost | Retained but displays a security warning when clicking. SMS-capable app needed on PC to send an SMS. | Text remains but is not clickable, link styling is retained (eg any underline or color) |
Need more help? Contact Support via live chat within Knak using the chat bubble in the bottom right corner or email support@knak.com.