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
😉