CSS Buttons Can Now Be Added to Email Templates

Some prefer having a more prominent call to action button in their email templates. Below are instructions to replace the “Book Now” link in your email templates with a “Book Now” button. Email templates can be found under Settings > Templates > Email

Note that this requires basic knowledge of HTML and CSS.

Example code and an illustration of the CSS Book Now button is located at the end of this entry.

Current Book Now link

By default, many email templates will include a link to book now. This is created using the [PROPERTY_BOOKING_URL] merge tag.

How Guests see the default Book Now link

The guest will receive an email containing a “Book Now” text link as seen above.

Updating the merge tag

Replace the default [PROPERTY_BOOKING_URL] merge tag with the [PROPERTY_BOOKING_URL_SIMPLE] merge tag. The merge tag can be found in the editor dropdown box.

Email template – Source Mode

To add a button using HTML and CSS, switch to the Source editor. See above.

Adding the HTML

This new merge tag will generate the url to book the property. Add a hyperlink and button text.

Adding the CSS

You can add inline CSS to style the button as you wish.

How the new button will look to guests

The emails that guests receive will now contain a “Book Now” button instead of the default Book Now hyperlink.

Complete code to insert the button shown

To insert a button styled exactly as in this example, you can use the following code:

<a href=”[PROPERTY_BOOKING_URL_SIMPLE]” target=”_blank”><span style=”background: #1793db; color: #ffffff; padding: 10px 20px; border-radius: 4px;”>Book Now</span></a>

Scroll to Top