All Collections
Sharing Your Booking Page
Advanced: Use your own button graphic for links
Advanced: Use your own button graphic for links

HTML for Buttons, Images, and Plain Links

Jared Morse avatar
Written by Jared Morse
Updated over a week ago

This article is for the Legacy version of Appointlet. Click here to browse the knowledge base on the most recent app version.

Don't love our amazing button designs? That's ok! Here's how you can use your own button.

Let's start by looking at the website embed code:

<script src="https://d35xd5ovpwtfyi.cloudfront.net/loader/loader.min.js?v=1440696613" async defer></script>
<img data-appointlet-organization="..." src="https://d35xd5ovpwtfyi.cloudfront.net/loader/buttons/008DBD.png?v=1440696613">

The <img...> portion draws the button on your site, so it's what needs to be replaced with the custom button. The important thing to note about it is the data-appointlet-organization="..." part. Any HTML element that has this attribute will become click-able and opens the booking page.

With that in mind, let's do some examples:

Plain Link:

<script src="https://d35xd5ovpwtfyi.cloudfront.net/loader/loader.min.js?v=1440696613" async defer></script>
<a href="#" data-appointlet-organization="...">Book Now</a>

Image:

<script src="https://d35xd5ovpwtfyi.cloudfront.net/loader/loader.min.js?v=1440696613" async defer></script>
<img src="/path/to/image" data-appointlet-organization="...">

Button:

<script src="https://d35xd5ovpwtfyi.cloudfront.net/loader/loader.min.js?v=1440696613" async defer></script>
<button type="button" data-appointlet-organization="...">Book Now</button>

Did this answer your question?