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 booking widget is tied to one listing. If you have several properties, add one <div data-haven-booking-widget> per property page on your site, and use the search widget below to search all of them at once.
Have several listings? The search widget searches every stay on a multi-unit site at once, right on your page. Guests pick dates and guests, see which stays are open with the price for their stay, and click through to book. Stays that don't fit the search are listed underneath, marked with the reason (booked, too small, no pets). Before a guest picks dates it lists every stay on the site, so it also works as an "Our properties" grid.
Each stay opens the same page the multi-unit site's own card opens: your own page for that listing when the site sends guests there (see below), otherwise its Haven page with the dates and guests filled in. Prices come from the same pricing as each listing's own booking bar. Listings whose bookings OwnerRez processes show no Haven price in the results; the price appears on the listing page.
<script src="https://bookwithhaven.com/embed/haven-widget.js" async></script>
<div data-haven-search-widget data-code="YOUR-SITE-CODE"></div>
data-color and data-font work the same as on the booking widget. It is the same haven-widget.js script, so a page with both a search widget and a booking widget loads it once.
Moving off the OwnerRez WordPress plugin? Paste the search widget where your OwnerRez search or property-list widget was, and put a booking widget on each property page in place of the OwnerRez booking widget. Property details the OwnerRez plugin's [ownerrez] shortcodes pulled in (descriptions, amenities, photo carousels) are not covered by the widget and need to stay as page content.
A listing whose page lives on your own site, with the widget on it, can still appear on a Haven multi-unit site alongside your other properties. Guests who pick it are sent to your page rather than its Haven page. In the multi-unit site editor, open the Properties tab, click Own site on the listing's row, paste the page address, and click Check page. Haven confirms the widget for that listing is on the page before it starts sending guests there. See Managing Multi-Unit Sites for the details.
A blog that keeps publishing useful local posts is one of the strongest ranking signals a small site can send — and you do not have to write it. Turn on Blog Autopilot for a blog, then open Settings → Widget (optional) → Blog widget, copy the two-line code and paste it on the page you want to be your blog (for example yoursite.com/blog). The posts render as real page content on your site, each with its own address, and new posts appear on their own.
Under the code, tell Haven which copy search engines should index: My Haven site (the default) or My website. Pick My website, enter the page's address and click Check my page — once Haven finds the code there, your posts rank on your own domain and your Haven site's copies point to them, so the two never compete. See Blog Autopilot for the details.
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.
If the domain is moving off CraftedStays, leftover A and AAAA records on the root host can keep the old site answering even after www is Active on Haven. The Domains panel has a Coming from CraftedStays? button with that checklist; the same steps are in Custom domains.
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