CSS Buttons on Email Templates
Brent Kleinheksel avatar
Written by Brent Kleinheksel
Updated over a week ago

Some prefer having a more prominent call to action button in their email templates. Please follow the instructions below 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 support article.

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

The renter 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>

Did this answer your question?