You can now add online appointment booking to your own website by simply integrating the Book Now widget. Your clients will then be able to book online appoinments the same way they do from your booxi business page, but within your own website; keeping your customers on your website.
Your booxi API Key
The API Key is unique to your business and connects the Book Now widget to your booxi account. To find your API key simply sign in your account; go to My Business; access your business details; and scroll down until you see the API Key field.
How to add online booking to your website?
Continue with this guide if your hosting your website or have access to edit the HTML code.
Click on one of the buttons to the left if your website has been created with Wix or Wordpress.
This guide does not apply if your website was created with a content management system (CMS).
Please enter your API key into the Code Generator form. You may optionally set a custom text for both English and French buttons. You can choose to present the Book Now widget as an external popup or as a floating window over your website (default). You can also set a custom z-index if the window appears under elements of your website. Once you are ready, simply click on the Generate button. You will get a custom HTML code with specific integration instructions.
The following code is the main script that adds the widget to your website. You must insert this code right after the body tag in the HTML file corresponding to the web page that will be offering online booking. Make sure to copy paste all of it, otherwise it won’t work.
The following HTML element is the container for the Book Now widget on your web page. You must insert this code in the HTML file corresponding to the web page that will be offering online booking. We recommend that this code be inserted right before the closing body tag which is located at the bottom of the HTML file.
Book Now Button
This last step tells to the booxi widget where to add the Book Now button to your page. The following code should be inserted in your HTML where you would like to the button to be. The code for both the English and French buttons is provided below.
The Book Now button appears faded on my web page.
The appointment rules "Enabled Online Booking" is most probably disabled for all your personnel and services. Please enable it in the booxi application. Also make sure that your API key has properly been entered.
When I click on the Book Now button of my web page, I get a "Service not available!" error message.
This problem can be caused by a misconfiguration of your appointment rules, please review them in your booxi application. Also make sure that your API key has been properly entered.
The code has been added to my website, but there is no Book Now button.
You most likely have an error in your code; to confirm the problem you may press F12 (with most browsers) to open the debugger. Under the console tab you will see website errors listed. If you are opening the debugger for the first time we recommend refreshing your web page (F5) as not every browser records error before the debugger is opened. The debugger may provide you a hint on the possible source of the problem, such as a mistake while copying the code.