Loading...
This is for hosts who already have a marketing website and want Haven to handle bookings. You do not need to rebuild your site. The highest-leverage step is to make your main Book now or Check availability button point to your Haven direct booking page. Once that button goes to Haven, every visitor who is ready to book lands on your official checkout flow.
Look for anything on your current site that sends guests somewhere other than Haven:
The goal is one clear path: your website introduces the property, and Haven completes the booking.
If you can edit your website yourself, this usually takes a few minutes.
If you are not live yet or need help finding your link, start with Go live and grab your booking link.
If someone else manages your website, copy the message below and send it to them with your Haven direct booking link filled in.
Please replace our main Book now / Check availability button with this Haven direct booking link: [paste link]. This should be the primary booking path from the homepage, property pages, and any navigation buttons.
Ask them to confirm once the change is live so you can test it as a guest.
If you want guests to check dates and pricing without leaving your website, embed the Haven booking widget. It shows the same availability calendar, pricing, and Book button as your Haven property page, and renders directly on your page (not in an iframe) so the date calendar overlays your own content. When a guest books, checkout opens on your Haven booking page in a new tab — payments and the guest guidebook work exactly as they do everywhere else.
The widget is responsive: it shows the full Arrival / Checkout / Who booking bar in wide columns and an inline stacked card in narrow ones, so the same snippet works wherever you drop it — there is no layout setting to choose.
Color and font are data- attributes on the widget <div>. A developer can change them in the snippet without logging into Haven:
| Attribute | Values | Notes |
|---|---|---|
data-code | your listing code (e.g. XXXX) | Which listing the widget books |
data-color | hex without # (e.g. c9a227) | Accent / primary button color |
data-font | curated font key (e.g. inter, playfair-display) | Matches the fonts in the dashboard picker |
Example:
<script src="https://bookwithhaven.com/embed/haven-widget.js" async></script>
<div
data-haven-booking-widget
data-code="XXXX"
data-color="c9a227"
data-font="playfair-display"
></div>
Load the haven-widget.js script once per page (even if you show more than one widget). The widget renders on your page inside its own isolated styling, so it won't clash with your site's CSS, and it resizes itself as the calendar opens.
Because the mount point is a plain <div>, the snippet drops straight into React, Next.js, and other TypeScript sites with no extra setup.
Each widget is tied to one listing. If you have several properties, add one <div data-haven-booking-widget> per property page on your site.
Your default Haven link works immediately, but a custom domain makes the booking experience feel fully branded — for example, book.yourproperty.com instead of a generic subdomain. Guests still complete checkout on Haven; the address just matches the rest of your brand.
See Custom domains when you are ready to connect a domain you already own. You can also set a memorable Haven subdomain through Custom URLs without buying a new domain.
A few common mistakes send guests to the wrong place or split your traffic:
Pick one primary booking button and make it obvious on desktop and mobile.
Once Haven is wired in, put the same link everywhere else guests might find you. See Launch your direct booking site for where to share it next.
New to Haven?
Haven is the direct booking platform these guides are written for — a branded site, secure payments, and guest relationships you own. Build yours free.
Free to build · No credit card · Private until you publish
© 2026 Book With Haven, LLC.