How to Integrate Mews Booking Engine with WordPress
If you’re looking to integrate the Mews Booking Engine with your WordPress website, follow this step-by-step guide to seamlessly add the booking widget to your site.
Step 1: Retrieve Your Configuration ID
To embed the Mews Booking Engine, you first need your unique Configuration ID from Mews Operations.
- Log in to Mews Operations – Go to your Mews dashboard and sign in.
- Navigate to Services – From the main menu, go to Settings > Services.
- Select a Bookable Service – Click on the service you want to configure (e.g., Stay).
- Access Booking Engine Settings – Click on the Booking Engine tab.
- Copy the Configuration ID – This unique ID will be required for the next steps.
If you can’t find your Configuration ID, contact Mews Support for assistance.
Step 2: Install the Booking Engine Loader Script
Once you have the Configuration ID, the next step is to add the Mews Booking Engine script to your website.
- Log in to WordPress – Navigate to your WordPress dashboard.
- Go to Theme Editor – In the menu, go to Appearance > Theme Editor.
- Edit the Header File – Open header.php and insert the following script inside the <head> section:
<script src=”https://api.mews.com/distributor/distributor.min.js”></script> - Save and Update – Click Update File to apply the changes.
Step 3: Initialize the Booking Engine Widget
Next, you’ll need to configure the Mews widget to work on your site.
- Edit the Footer File – Open footer.php in the Theme Editor.
Insert the Initialization Script – Before the closing </body> tag, add the following code:
<script>
Mews.Distributor({
configurationIds: [‘Your Configuration ID’],
openElements: ‘.distributor-open’,
});
- </script>
Replace ‘Your Configuration ID’ with the actual ID you copied earlier. - Save and Update – Click Update File to apply the changes.
Step 4: Add a Booking Button to Your Site
To allow users to access the booking engine, you need to add a button.
- Edit Your Page or Widget Area – Navigate to the page or section where you want the button.
- Insert the Booking Button Code – Add the following HTML:
<button class=”distributor-open”>Book Now</button> - Save and Publish – Update the page to make the button live.
Final Steps
After completing these steps, test your website to ensure the booking engine widget works correctly. Clicking the “Book Now” button should open the Mews booking interface seamlessly.
For further customization and troubleshooting, refer to the Mews Booking Engine Guide or contact Mews Support.
By following this guide, you can provide a smooth and professional booking experience for your website visitors.