Customize the “Book Appointment” Button

Here are the steps to follow to program or have programmed an even more customizable appointment button:

To change the booking widget colour:

1. Click on  Settings
2. Click on the Promote tab
3. Click on Booking button
4. Select Custom from the drop-down list under Button Colour
5. A button named CSS will then appear on the right, click on it 
6. Change the necessary in the CSS code
7. You can change the width and height of the container
8. Save 

Here is an example of the result:

You can also customize the booking widget background on a mobile device. First, follow steps 1-3 above, then:

4. Select Custom from the drop-down list under Look & Feel 
5. Make the necessary changes to the code or, if you just want to add a background image, identify the line with background-image:url in the text, copy the link from the desired image from a website and then replace the URL with the one you just copied (highlighted in yellow in the example below). Be careful to keep the quotes and make sure the image is royalty free!
6. Don't forget to Save 😉 

Still need help? Contact Us Contact Us