How to Embed Your Booking Page / Widget on a Wix Website

Written By bookthatin

Last updated 5 months ago

There are two ways to embed a booking widget on your website - the Basic way and the Advanced way.

How to embed your booking widget on your website

In the videos below, we show you how to embed your booking page/widget onto a Wix website using both methods:

1. Basic Embed on a Wix Website:

Step-by-Step Instructions

Step 1: Prepare Your Wix Page

  1. Log in to your Wix editor and navigate to the page where you want your booking widget to appear.

  2. Add a new section if you don’t already have one available for the widget.

Step 2: Add an Embed Element

  1. On the left-hand toolbar, click Add Elements.

  2. Select Embed Code.

  3. Choose Embed a Site.

  4. Wix will insert a box asking for a website address.

Step 3: Get the Widget Link from BookThatIn

  1. Log in to your BookThatIn account.

  2. Scroll down to find your Booking Widget options.

  3. You will see two main links:

    • Location view

    • Category view

  4. Right-click on the option you want (e.g., Location view) and copy the link.

Step 4: Insert the Widget Link into Wix

  1. Go back to the Wix editor.

  2. Paste the copied link into the website address box of the embed element.

  3. Click Apply.

  4. The booking widget will now appear on your Wix page.

Step 5: Resize the Widget Frame

  1. Adjust the size of the embed box by dragging the corners to fit the content.

  2. Make the section tall enough so that the booking form fits comfortably.

    • If the content is larger than the frame, a scroll bar will appear, allowing users to scroll through the booking form.

Step 6: Publish and Check Your Website

  1. Click Publish in Wix.

  2. Visit your live site.

  3. Navigate to the page where you embedded the widget.

  4. Confirm that the booking form displays correctly and that customers can go through the booking process.

Notes

  • The basic embed method works fine for most cases, but it has a limitation:

    • On mobile devices, after completing a booking, users may see white space because the confirmation message appears at the top of the widget.

  • The advanced embed method solves this by automatically adjusting the widget’s height and scrolling the customer back to the top. This requires a more technical setup, which is covered in a separate tutorial.

Conclusion

By following these steps, you can quickly embed the BookThatIn booking widget into your Wix website using the basic method. It’s simple, effective, and allows customers to book directly without leaving your site. If you’d like a smoother experience for mobile users, check out the advanced embed tutorial.

2. Advanced Embed on a Wix Website:

Step-by-Step Instructions

Step 1: Prepare Your Wix Page

  1. Log in to your Wix editor and navigate to the page where you want the booking widget to appear.

  2. Add a new section if necessary.

  3. Click Add > Embed Code > Embed HTML.

  4. Wix will insert an HTML box onto the page.

Step 2: Copy the Advanced Embed Code from BookThatIn

  1. Log in to your BookThatIn account.

  2. Go to Business > My Booking Widget.

  3. Click How to Embed Your Widget.

  4. Under the Advanced Embed Option, copy the embed code provided in Step 1.

Step 3: Insert the Widget URL

  1. Paste the advanced embed code into the HTML box in Wix.

  2. In the code, look for the placeholder text widget URL.

  3. Replace widget URL with the link to the booking view you want customers to see when the widget first loads.

  4. The two most common options are:

    • Location view – displays bookings by location.

    • Category view – displays bookings by category.

  5. If you need something more specific, you can also use links from other areas of your BookThatIn account, such as:

    • Group overview (for a particular group of sessions).

    • Appointments (for appointment-based bookings).

    • Subscriptions (for subscription products).

    • Addresses (for address-specific bookings).

  6. For example, if you want to show all available bookings by location, copy the Location view link and paste it in place of widget URL in the code.

Step 4: Add the Script Code

  1. Return to the How to Embed Your Widget page in BookThatIn.

  2. Copy the script code provided in Step 2 of the advanced embed option.

  3. Paste this directly underneath your first code block in Wix.

  4. Click Update.

Step 5: Resize the Widget Area

  1. Adjust the size of the HTML box on your Wix page so the booking form is easy to view.

  2. Expand the section to fit the entire form, especially the booking form step, which usually requires more space.

  3. Run through a test booking to confirm the whole form displays without a scroll bar cutting it off.

Step 6: Publish and Test

  1. Click Publish in Wix.

  2. Visit your live website and open the page with the widget.

  3. Test the booking flow to confirm that:

    • The widget resizes automatically depending on the content.

    • On mobile devices, the page scrolls back to the top at key points, avoiding white space issues.

Conclusion

The advanced embed method is simple to set up but offers a much smoother and more mobile-friendly experience than the basic embed. By dynamically adjusting height and scrolling, it ensures that customers never get lost during the booking process. If you run into any problems, contact BookThatIn support for help.