Create a booking form in minutes and accept direct reservations with ease. Paste one line of code and a full booking flow — availability calendar, guest details, rental agreement, and Stripe payment — slides out over your page. No plugins, no developer, no design changes. Works on Hostinger, WordPress, Wix, Squarespace, Webflow, or any plain HTML site.
5-day free trial · Live in minutes · Payments go to your Stripe
Your Hostinger site already looks great. The booking widget slides out over it — it never pushes your layout around.
Point the widget at your existing "Book" or "Request dates" button. Clicking it slides the booking form out from the side. No second button, no clutter.
Guests pick dates on a live availability calendar, enter details, accept your rental agreement, and pay with Stripe — all without leaving your Hostinger page.
On desktop it slides from the side. On phones it becomes a full-screen sheet, so the booking form is always comfortable to use.
The booking content uses the colors and fonts from your DirectBookings property site. Set the launcher accent with one attribute if you want.
Four steps, about five minutes, no code experience needed
In DirectBookings, open Website Builder → Embed → Slide-out Booking Drawer. Your website ID is already filled in. Copy the script.
In the Hostinger Website Builder, drag in an Embed / Custom Code element where you want the widget available, or open Settings → Custom Code to install it across the whole site (recommended) before the closing </body> tag.
Set data-trigger to your button's CSS selector, e.g. "#book-now". If you don't have one, leave it out and a floating "Book now" button appears automatically.
Save and publish. Click your button — the booking drawer slides out. Try a test booking to confirm dates, the rental agreement checkbox, and Stripe payment all work.
Copy the exact version with your website ID pre-filled from your dashboard. This is the shape of it:
<script src="https://your-subdomain.directbookinghost.com/embed-drawer.js" data-website="YOUR_WEBSITE_ID" data-trigger="#book-now" data-position="right" data-accent="#c8a04f" data-header="Book your stay" defer ></script>
The CSS selector of the button that opens the drawer, like #book-now or .request-dates. Omit it to get a floating fallback button.
right (default) or left — which side the drawer slides out from.
The drawer works out of the box, but you can tune the chrome to your site with a few attributes — or take full control with your own CSS.
data-accent sets the launcher, header, and spinner color. data-header sets the panel title (or hides it if empty). data-position and data-width control the side and size.
Every element carries a stable [data-db-drawer] selector (launcher, overlay, panel, header, title, close, body). Override CSS variables like --db-accent, --db-panel-bg, and --db-header-bg from your site's stylesheet.
/* Example: retheme the drawer from your own site CSS */
[data-db-drawer="panel"] {
--db-accent: #c8a04f; /* buttons, header, spinner */
--db-panel-bg: #101418; /* panel surface */
--db-header-text: #ffffff; /* header title + close icon */
}The booking form itself stays styled from your DirectBookings property settings, so every property keeps a clean, consistent checkout — only the surrounding drawer is yours to theme.
Using the Hostinger AI assistant or any AI website builder? Paste this prompt and swap in your real values from the dashboard.
Add this booking widget script to my website. Place it just before the closing </body> tag so it loads on every page. Keep the script's src and data-website exactly as given. After adding it, make sure my existing "Book" / "Request dates" button has the id "book-now" so the widget opens when it is clicked. You may set data-accent to my brand color and data-header to my property name: <script src="https://YOUR-SUBDOMAIN.directbookinghost.com/embed-drawer.js" data-website="YOUR_WEBSITE_ID" data-trigger="#book-now" data-position="right" data-accent="#c8a04f" data-header="Book your stay" defer ></script>
Replace YOUR-SUBDOMAIN and YOUR_WEBSITE_ID with the values shown on your Embed page.
Most hosts never see their guests again. Every OTA stay should become your next direct booking — your website accepts commission-free reservations, your WiFi keeps your brand in front of guests long after checkout.
Guest books on Airbnb
You pay the OTA commission
Stays at your property
Their only visit — for now
Connects to your WiFi
Branded splash page
Email captured
Added to your guest CRM
Automated follow-up
Offers & seasonal discounts
Books directly next trip
Zero OTA commission
Accept commission-free reservations from day one. Your own branded site with payments, calendar sync, and automated check-in — live in 15 minutes.
Stop letting guests disappear after checkout. Capture their email when they log on to WiFi, then automatically invite them back to book direct next time.
One repeat booking often pays for your subscription many times over — there's no OTA commission the second time around. Bundle subscribers save 30% on Guest WiFi Marketing.
Add the slide-out booking widget in minutes. Guests book and pay without leaving your page. $9/month for 1 property, 5-day free trial.
No credit card required · Cancel anytime