Embedding the Bookeo scheduling widget on your Colibri Builder page is very easy.
In this article:
- Step 1 - Set up the Website integration in Bookeo
- Step 2 - Set up the integration in your WordPress Colibri Builder
- Step 3 - Set up the integration in Bookeo
Step 1 - Set up the Website integration in Bookeo
1. in your Bookeo account, click on Settings>Web site 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:
- 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 [5] dropdown menu, select:
- use the widget embedded in the website
- enlarge the widget to full screen
Click here for more information on the options offered by Bookeo for the mobile widget.
6. leave the browser window open and open a new tab in your browser
Step 2 - Set up the integration in your WordPress Colibri Builder
1. Create the page where you want your Bookeo widget to appear. A good name for the page could be "Online Bookings"
2. Open the page in WordPress Colibri Builder, click on +[6] in the top left toolbar
3. Select Components [7]. Scroll down and click on Widget Area [8]. Drag and drop the HTML in the section of the page where you want to show the booking widget
4. Click on the Empty widget area[9], then on Manage Widgets[10]
5. Click on Add a widget[11], then on Custom HTML[12]
6. In the Custom HTML [13] field, paste the code copied earlier at Step 1 - Point 2. The widget won't show on the page, but don't worry!
4. Click on the Done [14] button to Save. Save the page and preview it or publish it
5. Go to your Booking Page and copy the URL of the page
Step 3 - Set up the integration 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 [3] (the booking page in your website)
3. Save