It's very easy to integrate a Bookeo booking widget into your Wix website.
In this article:
- Step 1 - Set up the integration in Bookeo
- Step 2 - Set up the integration in Wix
- Step 3 - Set up the URL of your booking page in Bookeo
- Mobile bookings
Step 1 - Set up the integration in Bookeo
1. In your Bookeo account, click on Settings> Theme and Layout> Website integration
2. From the Page location [1] dropdown menu, select the option embed a widget in my website
3. Copy the widget code shown in the Widget section at point #1 [2]
4. In the Options section from the Second screen [4] dropdown menu, select open a separate full-screen page
Recommended: open a separate full-screen page for the second screen
Wix's limitations prevent Bookeo from scrolling back to the top of the booking widget when users move to the next page or click on a category. This can lead to a less than ideal experience for your customers. To enhance usability, we strongly recommend expanding the second widget page to full screen in a new browser tab. You may consider only embedding the initial booking page on your Wix site.
Click here to learn more about these options.
5. In the Options section from the Mobile [5] dropdown menu, select: enlarge the widget to full-screen
Recommended: enlarge the mobile widget to full screen
Wix's limitations prevent Bookeo from scrolling back to the top of the booking widget when users move to the next page or click on a category. This can lead to a less than ideal experience for your customers. To enhance usability, we strongly advise displaying the mobile widget to full screen (not embedded in your website). Bookeo will automatically display a Book Now button that website visitors have to click to see the Bookeo booking page. The Book Now button can be customized. Click here for more information.
Step 2 - Set up the integration in Wix
1. Login to your Wix.com account, and create a new page for online bookings or edit an existing page
2. Click the + [1] icon from the toolbar. Select Embed code [2], then Embed HTML[3]
3. A blue-outlined rectangle[4] will be added to your page. Select that you want to add a Code [5], and paste the widget code copied at step 3 below the text Add your code here (HTTPS only) [6].
4. Click on the Apply[7] button
5. Adjust the dimensions of the HTLM element.
6. Click on Publish to publish your updated website
8. Copy the address of your Wix.com page where you've put the widget
Step 3 - Set up the URL of your booking page in Bookeo
1. In your Bookeo account, click on Settings> Theme and Layout> Website integration
2. In the Widget section #2, paste the URL of the webpage where you put the widget [3] (the booking page on your website)
3. Save
.wixsite.com or wixstudio.io address
When you have not published your website in Wix, your site will typically be served out of a *.wixsite.com or perhaps a *.wixstudio.io address. When you use these addresses, Wix usually applies additional security restrictions to the page, which prevents the widget from working. As soon as you publish the site using your own domain name, the problem no longer occurs.