The Bookeo widget can be embedded into any WordPress site. You can use the Bookeo WordPress Scheduling Plugin to set up the website integration, or any plugin that lets you edit HTML directly in WordPress.

In this article:

• Integration using Bookeo's WordPress plugin
  • Step 1 - Set up the integration in Bookeo
  • Step 2 - Set up the integration in WordPress
  • Step 3 - Set up the URL of your booking page in Bookeo
  • WP Rocket plugin
  • WordPress speed optimization plugins
• Integration using any plugin that lets you edit HTML directly in WordPress

Integration using Bookeo's WordPress plugin

Click on the button below to download the Bookeo WordPress Plugin to your hard disk

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 Account ID [3] 

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 WordPress

1. Login to your WordPress account as an administrator
2. Click on Plugins [6]>Add New [7]

3. Click on Upload Plugin [8]

4. Click on the Choose file [9] button, select the plugin file from your hard disk, and click Install Now [10]

(Mac OSX tip: depending on your browser preferences, Safari may not allow you to upload zip files, and will try to open them instead. See these simple instructions on how to change your Safari setting)

5. Click on Activate Plugin [11]

6. Click on the new Bookeo [12] menu item on the left

7. Paste the Account ID [13] that you copied at Step 1 - point 3 above, and click Save Changes [14]

8. You can now embed the widget in any of your pages: simply type the text {bookeo} in the text editor [15]

If you want to show the Bookeo widget in a sidebar/WordPress text widget instead of the Page content, simply type the following in the text widget:

<div id="bookeo_position"></div>

9. Click Preview to preview the page. Click Update to Save.

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 [2] (the booking page on your website)

3. Save

WP Rocket Plugin

If you are using the WP Rocket plugin for caching, the options "Load JavaScript deferred" and "Combine JavaScript" of WP Rocket settings will conflict with the Bookeo plugin and prevent it from loading on the page.

To avoid conflicts, make sure to open the plugin settings and add bookeo.com to the list of exclusions under "Excluded JavaScript Files", for both options.
For instructions on how to change these settings please see https://docs.wp-rocket.me/article/976-exclude-files-from-defer-js and https://docs.wp-rocket.me/article/39-excluding-external-js-from-concatenation

You should then clean the cache of the plugin, following the steps here.

WordPress speed optimization plugins

If you are using a WordPress speed optimization plugin - such as Perfmatters, WP Fastest Cache, WP Super Cache, W3 Total Cache, WP-Optimize, Siteground, etc - you should make sure to disable any Javascript minifier/compressor, or at least exclude bookeo.com from the addresses that are optimized.

Integration using any plugin that lets you edit HTML directly in WordPress

Instead of using Bookeo's WordPress plugin, you can use any plugin that lets you edit HTML directly, for example, Raw Html. You can then follow these steps here to set up the website integration.