Skip to main content
How to Embed Our Booking Platform into Your WordPress Site Embedding our widget into your WordPress site is straightforward. Follow these simple steps to get started.

Step 1: Copy the Iframe code

First, you need to obtain the iframe code that will allow you to embed the booking platform. This code should look something like this, You can get this snippet pre filled via the Dashboard.
iframe
<iframe 
    src="https://getbacch.com/booking/my-restaurant-slug" 
    width="100%" 
    height="500px" 
    frameborder="0"
/>

[Insert Image: Screenshot of where to copy the iframe code from your platform]

Step 2: Choose Where to Embed the Iframe

You have several options on where you can place the iframe within your WordPress site:
  • In a Widget
    • Ideal for sidebars or footers.
  • In a Post or Page
    • Suitable for including the booking form within specific content.
  • Directly in Theme Files
    • For advanced users who want a permanent placement.
Embedding in a Post or Page Navigate to the Post or Page: Go to your WordPress dashboard, and either create a new post/page or edit an existing one. Add a Custom HTML Block: In the WordPress editor, click the ”+” button to add a new block, search for “Custom HTML,” and select it. Paste the Iframe Code: In the Custom HTML block, paste the iframe code you copied earlier.

[Insert Image: Screenshot showing how to add a Custom HTML block and paste the code]

Publish or Update the Page: Once the code is in place, click ‘Publish’ or ‘Update’ to make the changes live. Embedding in a Widget From your WordPress dashboard, navigate to ‘Appearance’ -> ‘Widgets’. Choose the area where you want the widget to appear and add a ‘Custom HTML’ widget. Paste the iframe code into the widget area.

[Insert Image: Screenshot showing how to add a Custom HTML widget]

Click ‘Save’ and then arrange the widget as desired within your sidebar or footer. Embedding Directly in Theme Files (For Advanced Users) Access your theme files either through the ‘Theme Editor’ in WordPress or via FTP. Common files to edit are page.php, single.php, or footer.php. Choose an appropriate place in the HTML structure and paste the iframe code. Ensure you are comfortable with HTML and PHP before attempting this.

[Insert Image: Screenshot of theme file editing]

Check and Test

After embedding the iframe, visit the page or area where you placed the iframe to ensure it displays correctly. Check different devices and browsers to confirm it’s responsive and functioning properly.

Need Help?

If you encounter any issues or have questions, please refer to our FAQ section or contact our support team. We’re here to help!