How to use a button in appointment e-mail templates?

This article explains how to replace an appointment invite or reschedule link in an e-mail template by a styled button. In order to make appointment e-mail templates look better, you can use several styling options to put the invite or reschedule link behind a button.

IN THIS ARTICLE
Step 1: Insert link
Step 2: Add "ul", "text" and "style"
Step 3: Name Your Template
Other variables

Navigate to the invite template (under "Communication) of the appointment type 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 {{slinkBtn}} as value in the url field.
  • Text: enter the desired button label (ie: "Book an appointment")

  • 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).


    Click "Update" to save the changes. The button will now show in the style you configured.

Reschedule button

In confirmation, reminder or reschedule templates you can also use the reschedule link to give a candidate the option to reschedule the appointment themselves.

For these cases simply replace the {{slinkBtn}} variable by {{rclinkBtn}}.

Related Articles