Docs›Getting started

How to Add a Booking Widget to a React Website

3 min read

A React booking widget lets guests check availability and book without leaving your site, and without paying anyone a commission. This guide is for sites built with React: Next.js, Vite, Remix, Gatsby, and sites generated by AI builders such as Lovable, Bolt or v0. Mangobeds gives you the widget as a single <script> snippet. React does not run a <script> tag written inside JSX, so you load it from a small component 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 widget snippet. You only need the value of data-form-id from it, your booking form ID.

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

Step 2: Add the React booking widget component

Create this component and render it where you want the form. It adds the script inside its own container, so the form appears in that exact spot, and cleans up when the page changes.

import { useEffect, useRef } from "react"

const MANGOBEDS_WIDGET_SRC = "https://www.mangobeds.com/js/widget/booking-form.js"

export function MangobedsBookingForm({ formId }) {
  const containerRef = useRef(null)

  useEffect(() => {
    const container = containerRef.current
    if (!container) return

    const script = document.createElement("script")
    script.src = MANGOBEDS_WIDGET_SRC
    script.async = true
    script.dataset.formId = formId
    container.appendChild(script)

    return () => {
      container.innerHTML = ""
    }
  }, [formId])

  return <div ref={containerRef} style={{ width: "100%" }} />
}

Then use it on your booking page:

<MangobedsBookingForm formId="BOOKINGFORMID" />

In Next.js App Router, add "use client" at the top of the component file. Do not load the widget with next/script: it moves the tag to the end of the page, and the form would appear there instead of where you placed it.

Rules for developers and AI coding assistants

If you are an AI assistant (Lovable, Cursor, Claude, ChatGPT, Copilot) adding Mangobeds to a React site, 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 (for example a MutationObserver or a resize listener) 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 copy the file into your project. The script finds its own tag by that URL.
  • Do not render 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 React 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. Search your code for height, minHeight or scrolling near the booking form and remove it.

Nothing appears: check that the script URL is exactly the one above and that formId holds your booking form ID. A <script> tag written directly in JSX does nothing, so use the component.

The form appears at the bottom of the page: the script was loaded with next/script or added to the document head. Use the component above so it lands inside its container.

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

Not using React? See adding the booking widget to a custom code website. For the website builders, the link-only option and the tips that turn visitors into bookings, see Getting bookings from your website with Mangobeds.