Start free trial
One line of code · Works on any website

Add a booking widget to your Hostinger website

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.

Get your booking widget — $9/monthSee the 4 steps

5-day free trial · Live in minutes · Payments go to your Stripe

A booking form that respects your design

Your Hostinger site already looks great. The booking widget slides out over it — it never pushes your layout around.

Opens from your own button

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.

Full booking flow inside

Guests pick dates on a live availability calendar, enter details, accept your rental agreement, and pay with Stripe — all without leaving your Hostinger page.

Mobile-first

On desktop it slides from the side. On phones it becomes a full-screen sheet, so the booking form is always comfortable to use.

On brand, automatically

The booking content uses the colors and fonts from your DirectBookings property site. Set the launcher accent with one attribute if you want.

How to add the booking widget to Hostinger

Four steps, about five minutes, no code experience needed

1

Copy your one-line widget code

In DirectBookings, open Website Builder → Embed → Slide-out Booking Drawer. Your website ID is already filled in. Copy the script.

2

Open your Hostinger editor

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.

3

Point it at your Book button

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.

4

Publish and test

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.

The code you paste

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>

data-trigger

The CSS selector of the button that opens the drawer, like #book-now or .request-dates. Omit it to get a floating fallback button.

data-position

right (default) or left — which side the drawer slides out from.

Make it match your brand

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.

Quick — set attributes

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.

Advanced — your own CSS

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.

Prefer to use AI? Paste this prompt

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.

Booking widget questions

How do I add a booking widget to my Hostinger website?
Copy the one-line script from your DirectBookings dashboard (Website Builder → Embed → Slide-out Booking Drawer). In the Hostinger Website Builder, add an Embed / Custom Code element (or paste into the site-wide custom code before the closing body tag) and paste the script. Point its data-trigger attribute at your existing 'Book' or 'Request dates' button. Save and publish. The booking drawer now slides out over your page when guests click that button.
Does the booking widget work on any website, not just Hostinger?
Yes. The same one-line script works on Hostinger, WordPress, Wix, Squarespace, Webflow, GoDaddy, Carrd, or any plain HTML site. It has no dependencies and does not require a plugin. Paste it once and it works.
Can guests pay inside the booking widget?
Yes. The slide-out drawer runs the full booking flow — date selection, guest details, rental agreement acceptance, and a real Stripe payment — without the guest ever leaving your website. Payments go directly to your connected Stripe account.
Will the booking widget match my website's colors?
The booking content inside the drawer uses the colors and fonts you set for your DirectBookings property site, so it stays on-brand. You can also set the launcher accent color with a data-accent attribute. The drawer itself is a clean, neutral panel that sits over your page without disturbing your design.
Is the booking widget mobile friendly?
Yes. On desktop the drawer slides out from the side. On phones it expands to a full-screen sheet so guests get a comfortable, full-width booking form. It supports swipe, tap-to-close, and the browser back gesture.
Do I need a developer to install the booking widget?
No. Installation is copy and paste — one line of code. If you use an AI website assistant on Hostinger, you can paste the ready-made prompt from this page and it will place the script for you.
How is this different from an iframe booking calendar?
An inline iframe calendar takes up space in your page layout and can look bolted on. The slide-out drawer floats over your page and opens only when a guest clicks your button, so it never disturbs a polished design. DirectBookings offers both — use the inline calendar for a booking section, or the drawer for a design-heavy homepage.

Learn more about direct bookings

Website Builder

Booking engine, payments, calendar sync — built for hosts, from $9/mo.

Airbnb vs Own Website

Compare fees, guest ownership, and profit side by side.

Resources

Guides for getting more direct bookings and keeping more revenue.

Turn one-time guests into repeat direct bookings

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.

The repeat booking engine
1

Guest books on Airbnb

You pay the OTA commission

2

Stays at your property

Their only visit — for now

3

Connects to your WiFi

Branded splash page

4

Email captured

Added to your guest CRM

5

Automated follow-up

Offers & seasonal discounts

Books directly next trip

Zero OTA commission

Step 1

Direct Booking Website

Accept commission-free reservations from day one. Your own branded site with payments, calendar sync, and automated check-in — live in 15 minutes.

  • Branded booking website with custom domain
  • Stripe payments — zero booking fees
  • Calendar sync with Airbnb & VRBO
  • Pre-signed rental agreements & waivers
Start accepting direct bookings →
Step 2

Guest WiFi Marketing

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.

  • Branded WiFi splash page & guest email capture
  • Automated rebooking campaigns & seasonal offers
  • Repeat-guest discounts to win the direct booking
  • Guest CRM across all your properties — any router
See WiFi Marketing →

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.

Browse our free Airbnb alternative →

Turn your Hostinger site into a booking machine.

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.

Start your free trial

No credit card required · Cancel anytime

Add a Booking Widget to Your Hostinger Website (2026 Guide) | DirectBookings