Wix booking widget: take direct bookings

A Wix booking widget lets guests check availability and book without leaving your site, and without paying anyone a commission. There are two ways to add it on Wix, and the one you should use depends on your Wix plan.

Embed HTML, on any Wix plan. You paste the same <script> snippet you would paste on WordPress or Squarespace, wrapped in <body> tags if Wix asks for a full page. Its one drawback is that the box keeps a fixed height you set by hand, so a form taller than that box gets a scrollbar. Set it up in Step 2.
Custom Element, on a Wix Premium plan with a connected domain and no Wix ads. There is no script to paste here: you point Wix at a small file we host, and it puts a <mangobeds-booking-form> tag on your page. The element has no fixed height, so the form grows and pushes the rest of your page down, the way it behaves on other website builders. Set it up in A better option on Wix Premium.

The widget also carries the AI booking assistant, so visitors who are not ready to book can ask about dates, prices and house rules and leave you a booking lead instead of leaving the page.

Step 1: Copy your embed code

Navigate to Booking Forms: In your Mangobeds dashboard, go to the Forms section.
Select Your Booking Form: Choose the booking form you want to embed.
Copy the Embed Code: Click on the Insert in my web button. This copies the full Mangobeds widget code, a small <script> snippet, to your clipboard.
Paste the Code on Your Website: Insert this snippet into the HTML of your website where you want the booking form to appear. The widget loads the form, resizes it automatically, and enables the AI booking assistant chat. The snippet looks like this:

<script async data-form-id="BOOKINGFORMID" src="https://www.mangobeds.com/js/widget/booking-form.js"></script>

Important: do not embed the booking form as a bare <iframe> on its own. If you copy only the iframe (for example <iframe src="https://www.mangobeds.com/booking-forms/..."></iframe>), the form may still appear, but the widget features will not work: the AI booking assistant chat will not load, and the form will not resize correctly on your page. Always paste the full <script> widget code shown above so these features load.

Step 2: Paste it into Wix (Embed HTML)

In the Wix Editor, click Add (+) → Embed Code → Embed HTML.
Choose Code and paste the full <script> widget code, then position and resize the element on the page.
Click Publish.
If the form still doesn’t display, paste the widget code inside the page body, between the <body> tags, e.g. <body><script async data-form-id="BOOKINGFORMID" src="https://www.mangobeds.com/js/widget/booking-form.js"></script></body>

If the widget has a scrollbar

Wix puts embedded code inside a box with a fixed height, the one you set by dragging the element in the editor. The Mangobeds widget resizes itself to fit its content, but it cannot resize the Wix box around it. So as soon as the form grows taller than that box, for example when a guest opens a property or the availability calendar, Wix adds a scrollbar instead of letting the page grow. This is a Wix limitation and it affects every embedded widget, not only ours.

The fix: select the Embed HTML element in the Wix editor and drag it taller, then republish. Aim for the tallest screen your guests will actually reach, not the first one. A single booking form usually needs somewhere around 2000 to 2500 pixels, and a property group portal needs more, because guests start on the list of properties and then open one. The trade-off is some empty space under the shorter screens, since Wix keeps the box at a single height.

Not sure which height to use? Email us and we will measure your form and send you the number.

A better option on Wix Premium

If your site is on a Wix Premium plan, with a connected domain and no Wix ads, there is a second way to add the widget that removes the height problem entirely. Wix offers a block called a Custom Element, and unlike an Embed HTML box it is allowed to change the height of the page, so the form can grow and push the rest of your page down. No fixed height, no scrollbar and no empty space.

You do not paste a <script> tag for this one. Instead you point Wix at a small file we host, which teaches it a new tag called <mangobeds-booking-form>, and then Wix places that on your page like any other element. Here is how to set it up.

Add a new element rather than reusing the old one. Embed HTML and Custom Element are two different Wix blocks, so an embed box you already have cannot be switched into a custom element. If the widget is already on the page as an Embed HTML box, add the Custom Element next to it, check the published page, and delete the old box once the new one works. That order means your page is never left without a booking form.

In the Wix Editor, click Add (+) → Embed Code → Custom Element. In Wix Studio it is Add Elements → Embed & Social → Custom Element.
Click Choose Source, pick Server URL, and paste: https://www.mangobeds.com/js/widget/booking-form-element.js
In Tag Name, enter: mangobeds-booking-form
Click Set Attributes and add one attribute. For a single booking form, the name is form-id. For a property group portal, the name is property-group-form-id. The value is the same id that appears in your embed snippet in Mangobeds, the long code after data-form-id=.
With the element still selected, open the Stretch panel and turn on Stretch to full width. This one matters: without it Wix keeps the element in a narrow column, and the form renders its mobile layout even on a desktop.
Position the element on the page and click Publish.

Two things catch everybody out. The first is the width: if the form looks like the narrow mobile version on a desktop, you have missed Stretch to full width in step 5. The second is the editor itself: in the Wix editor and in preview the element shows an error instead of the form, usually “Something went wrong” with a message about the document being sandboxed and lacking the allow-same-origin flag. That is Wix’s editor sandbox, not a problem with your setup. Wix only renders custom elements properly on the published site, so do not undo anything when you see it. Open your live page and check there.

If the Wix booking widget does not appear

Check three things, in this order. First, that you pasted the full <script> snippet and not a bare <iframe>. Second, that the block you pasted into accepts raw HTML rather than escaping it. Third, that you are looking at the published site: Wix often does not run embedded scripts inside its own editor preview.

Using the Custom Element instead? Those three checks do not apply, because there is no script tag involved. Check that the tag name is exactly mangobeds-booking-form, that the attribute name matches your form type (form-id for a single booking form, property-group-form-id for a property group portal), and that you are looking at the published page. In the Wix editor and in preview the element shows a sandbox error in place of the form, which is normal and not something to undo.

Still stuck? Email us and we will add it to your site for you, free.

This guide covers Wix only. For the other builders, the link-only option and the tips that actually turn visitors into bookings, see Getting bookings from your website with Mangobeds.

Any questions about either route? Write to support@mangobeds.com and we will help you pick the right one for your plan, or set it up on your site for you.