Skip to main content
Use a Custom "Book now" Button Image

Replace the default button image with your own graphic

Setmore Support avatar
Written by Setmore Support
Updated over a week ago

Setmore allows you to add a "Book now" button on your website, which links to your Setmore Booking Page. Click here if you want to learn more about how to add the default "Book Appointment" button on your website. This enables customers to book appointments with you online. As part of this integration, you'll be provided a standardized button image that looks something like this:

While we don't offer customizable button options for the "Book now" button, it's a fairly simple process to use a button image of your own making. We'll go through the process of retrieving and modifying the button code, below. To clarify, you'll have to create or provide your own button image.

Retrieve the default button code

1. Navigate to Apps & Integrations, then scroll down to Integrations and click the Booking Widget card.

2. You'll be presented with the Booking Widget form. In Step 1, make sure that the radio button is activated for "Place my button..."

3. In Step 2, either option works, so choose your preferred method for opening the Booking Page.

4. Under Step 3, choose "I'll embed the code myself."

5. Copy the code in Step 4 and paste it somewhere you can edit it, such as in a Word or Google doc.

Modifying the button code

What you have now is a piece of HTML code. You want to preserve all of the code except for the part that references the button image, which you will change to point at your own button image. In order for this to work, you'll have to have another button image file that's already hosted online somewhere, and you should have a specific URL for that image.

  1. In the excerpt of code from the previous section, find the part that reads precisely, word-for-word, as follows:
    ​

    src=”https://storage.googleapis.com/full-assets/setmore/images/1.0/Settings/book-now-blue.svg"

  2. Replace the HTTPS URL with the URL of your own custom image file. Make sure that you keep the quotation marks before and after the HTTPS URL.

  3. Now copy and paste the entire excerpt of code into your website source file and save or publish your changes.

All you are doing with this process is changing the line of code that references an image file. All the other code remains the same.

Did this answer your question?