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 😉
