Setup guide

How to add the booking widget to your website

Copy one line of code, paste it into your website, point it at your Book button, and publish. About five minutes, no coding experience needed.

Before you start, you need a DirectBookings property with a published site and Stripe connected. If you haven't set that up yet, do it first — the widget uses your live availability and payment settings.

Step by step

Copy your one-line widget code

In DirectBookings, go to Website Builder → Embed and find the Slide-out Booking Drawer card. Your website ID is already filled in. Click Copy code. It looks like this:

<script
  src="https://your-subdomain.directbookinghost.com/embed-drawer.js"
  data-website="YOUR_WEBSITE_ID"
  data-trigger="#book-now"
  defer
></script>

Open the custom code area on your site

Where you paste depends on your builder. Use the site-wide option so the widget is available on every page:

Hostinger: Website Builder → add an Embed / Custom Code element, or Settings → Custom Code.
WordPress: a Custom HTML block, or a header/footer code plugin, or your theme's footer.
Wix: Add → Embed Code → Embed HTML, or Settings → Custom Code (site-wide).
Squarespace: a Code Block, or Settings → Advanced → Code Injection → Footer.
Webflow: an Embed component, or Project Settings → Custom Code → Footer Code.
GoDaddy: add an HTML / Custom Code section in the Website Builder.
Plain HTML: paste directly before the closing </body> tag.

Paste the script

Paste the code you copied. If your builder asks where, choose the footer / before the closing </body> tag. The defer attribute makes sure it never slows your page down.

Point it at your Book button

The data-trigger value is the CSS selector of the button that should open the drawer. If your button has an ID of book-now, use data-trigger="#book-now". A class works too, e.g. data-trigger=".request-dates".

No button yet? Remove data-trigger and a floating Book now button appears automatically in the corner.

Publish and test

Save and publish your site. Click your button — the booking drawer should slide out. Run a quick test booking to confirm the calendar, the rental agreement checkbox, and Stripe payment all work. That's it.

Troubleshooting

The drawer doesn't open when I click my button

Your data-trigger selector probably doesn't match the button. Right-click the button → Inspect to find its ID or class, and update the selector. As a quick test, remove data-trigger entirely — if the floating button then works, it confirms the script is loading and the selector was the issue.

Nothing appears at all

Confirm the script is actually on the published page (view source and search for embed-drawer.js). Make sure your property's site is published in DirectBookings — the widget is intentionally hidden for unpublished sites.

I want it to match my brand

See how to customize the booking widget for accent color, header title, position, width, and full CSS control.

Add the booking widget to your site

One line of code. Guests book and pay without leaving your page. $9/month, 5-day free trial.

Start your free trial →