It's very easy to integrate a Bookeo booking widget into your Wix web site.
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>Web site integration
2. From the Page location  scroll down menu, select the option embed a widget in my website
3. Copy the widget code shown in the Widget section at point #1 
4. In the Options section from the Second screen  dropdown menu, select:
- remain inside the widget, or
- open a separate full-screen page
Click here to learn more about these options.
5. In the Options section from the Mobile  dropdown menu, select:
- use the widget embedded in the web site
- enlarge the widget to full screen
Click here for more information on the options offered by Bookeo for the mobile widget.
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 +  icon from the toolbar. Select Embed , then Embed a Widget 
3. A new grey rectangle will be added to your page. Use your mouse to place it on the page, and adjust its dimension. Set a Width  of at least 660 px and a Height  between 600px and 700px
4. Click on the Enter Code  button
5. Select that you want to add a Code , and paste the widget code copied at step 3 below the text Add your code here (HTTPS only) .
6. Click on the Update button
7. 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>Web site integration.
2. In the Widget section #2, paste the URL of the webpage where you put the widget  (the booking page on your website)
For mobile bookings, you can opt to use the widget embedded in the website on mobile devices (default option) or to enlarge the widget to full screen on mobile devices.
Use the widget embedded in the website on mobile devices
If you use the widget embedded in the website on mobile devices you should make sure to resize the height and width of the HTML element for mobile devices in Wix:
1. In your Wix dashboard, click on your booking page
2. Click on the Mobile icon  in the top menu to edit the page on mobile
3. Click on the HTML widget element , then in the Size section, set a width of 320px and a height of 550px.
4. Click on the Publish button
Please note if you use Square to accept online payments, the Square payment form may have issues on some mobile devices when used inside Wix. We recommend using the option to enarge widget to full screen on mobile devices (see below) if accepting payments via Square.
.wixsite.com addressWhen you have not published your website in Wix, your site will typically be served out of a *.wixsite.com address. When you use wixsite.com, Wix adds additional security restrictions to the page, which prevents the widget to work on mobile devices (desktop browsers will work fine). As soon as you publish the site using your own domain name, the problem no longer occurs.
Enlarge the widget to full screen on mobile devices
If in Settings>Website integration, in the Options section, you set to enlarge the widget to full screen on mobile devices, when customers visit your booking page using a mobile device, 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.