Docs›Getting started

How to Add a Booking Widget to a Custom Code Website

3 min read

A custom code booking widget lets guests check availability and book on a site your developer built by hand, without paying anyone a commission. This guide covers plain HTML sites and JavaScript frameworks such as Vue, Nuxt, Svelte, Astro and Angular. If your site uses React or Next.js, follow the React booking widget guide instead.

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 widget snippet to your clipboard. It looks like this:

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

Step 2: Paste it into your HTML

On a plain HTML page, paste the snippet in the <body>, exactly where the form should appear. The script creates the form right before its own tag.

<section class="booking">
  <h1>Book your stay</h1>
  <script async data-form-id="BOOKINGFORMID" src="https://www.mangobeds.com/js/widget/booking-form.js"></script>
</section>

Vue, Svelte, Angular and other frameworks

Frameworks that render the page with JavaScript usually do not run a <script> tag written in a template. Add it from code once the container exists, and empty the container when the page is left:

function mountMangobedsBookingForm(container, formId) {
  const script = document.createElement("script")
  script.src = "https://www.mangobeds.com/js/widget/booking-form.js"
  script.async = true
  script.dataset.formId = formId
  container.appendChild(script)
  return () => { container.innerHTML = "" }
}

Call it from onMounted in Vue, onMount in Svelte or ngAfterViewInit in Angular, and run the returned function when the component is destroyed.

Rules for developers and AI coding assistants

If you are an AI assistant or a developer adding the custom code booking widget, follow these rules exactly. Breaking any of them is the usual reason a form looks fine but guests cannot finish a booking.

  • The widget sizes itself. The form tells the page its height every time it changes, and the script resizes the iframe to fit. Never set height, min-height, max-height, overflow: hidden or scrolling="no" on the iframe or on its container, and never add code that rewrites those styles. A fixed height cuts off the end of the form, which is where the book and payment buttons are.
  • Load the script from our URL, unchanged. Use https://www.mangobeds.com/js/widget/booking-form.js exactly, with no query string, and do not host a copy of the file yourself. The script finds its own tag by that URL.
  • Do not add the iframe yourself. A bare <iframe src="https://www.mangobeds.com/booking-forms/..."> shows the form, but it will not resize and the AI booking assistant will not load.
  • Give it the full width of its column and let the page scroll normally around it.

If the booking widget does not work

The form is cut off, or the book button is missing: something on your site is fixing the iframe’s height. Look for CSS or JavaScript that sets height, min-height, overflow or scrolling on the booking form and remove it.

Nothing appears: check that the script URL is exactly the one above and that data-form-id holds your booking form ID. On a framework site, make sure the script is added from code as shown, not written into a template.

Still stuck? Email us and we will help you add it, free.

For the website builders (WordPress, Wix, Squarespace and more), the link-only option and the tips that turn visitors into bookings, see Getting bookings from your website with Mangobeds.