One line of code · No Wix app required

Add a booking widget to your Wix website

Create a booking form in minutes and accept direct reservations with ease. Paste one line of code into Wix Custom Code and a full booking flow — availability calendar, guest details, rental agreement, and Stripe payment — slides out over your page. No apps, no developer, no design changes. No Book button on your site? The widget adds its own floating one.

Get your booking widget — $9/month See the 4 steps

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

A booking form that respects your Wix design

Your Wix site already looks great. The booking widget slides out over it — it never pushes your layout around or forces a clunky embedded calendar into the page.

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.

Or a floating button, no setup

No Book button on your Wix site? Leave data-trigger off and the widget drops its own floating "Book now" button into the corner of every page.

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 Wix page.

Mobile-first and on brand

On phones the drawer becomes a full-screen sheet. The booking content uses your DirectBookings colors and fonts; set the launcher accent with one attribute.

How to add the booking widget to Wix

Four steps, about five minutes, no code experience needed

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.

Open Wix Custom Code

In the Wix Editor, go to Settings → Custom Code → + Add Custom Code. Paste the script, name it, and choose to load it on All pages in the Body - end placement so it works site-wide.

Point it at your Book button — or go floating

Set data-trigger to your button's CSS selector, e.g. "#book-now". If your Wix site has no Book button, leave data-trigger out and a floating "Book now" button appears automatically on every page.

Apply and publish

Click Apply, then Publish your Wix site. Click your button (or the floating one) — 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.

No Book button? Use the floating button

Many Wix templates don't have a dedicated Book button. Just leave data-trigger off and the widget adds its own floating "Book now" button to every page — no element to wire up.

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

data-label

The text on the floating button (default Book now). Set it to Check availability or Reserve to match your voice.

See it live

Try the floating button on a sample property site in the floating button demo.

Prefer to use the Wix AI assistant? Paste this prompt

Wix Studio includes an AI assistant that can add custom code and behaviors. Paste this prompt, swap in your real values from the dashboard, and it will place the script. On the classic Wix Editor you add it yourself under Settings → Custom Code — same one-line paste.

Add this booking widget script to my Wix site using the AI assistant / custom code. Load it on all pages in the "Body - end" placement so it runs site-wide. Keep the script's src and data-website exactly as given. If my site has a "Book" or "Request dates" button, give it the id "book-now" and set data-trigger="#book-now" so the widget opens when it is clicked. If there is no Book button, leave data-trigger off so the widget shows its own floating "Book now" button. 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>

In Wix Studio, open the AI assistant (or right-click an element and choose Add Custom Behavior with AI), paste the prompt, and replace YOUR-SUBDOMAIN and YOUR_WEBSITE_ID with the values shown on your Embed page.

Make it match your brand

The drawer works out of the box, but you can tune the chrome to your Wix 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 */
}

Booking widget questions

How do I add a booking widget to my Wix website?

Copy the one-line script from your DirectBookings dashboard (Website Builder → Embed → Slide-out Booking Drawer). In the Wix Editor, open Settings → Custom Code → Add Custom Code, paste the script, set it to load on all pages in the Body - end section, and apply. Then point the script's data-trigger attribute at your Book button, or leave it out to get a floating Book now button. Publish your Wix site and the booking drawer slides out when guests click.

What if my Wix site has no Book now button?

You don't need one. Leave the data-trigger attribute off the script and the widget adds its own floating Book now button in the corner of every page. Guests tap it and the booking drawer slides out. You can change the button text with data-label and its color with data-accent.

Can guests pay inside the booking widget on Wix?

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 Wix site. Payments go directly to your connected Stripe account, not through Wix.

Do I need the Wix Bookings app for this?

No. This is independent of Wix Bookings. The DirectBookings widget is a single script that works on any Wix plan that allows custom code, and it handles vacation-rental booking with nightly rates, a rental agreement, and Stripe — things the generic Wix Bookings app is not built for.

Does the booking widget work with the Wix AI assistant?

Yes. Wix Studio includes an AI assistant that can add custom code and behaviors. Paste the ready-made prompt from this page, swap in your real website ID and subdomain, and it will place the script for you. On the classic Wix Editor you add the script yourself through Settings → Custom Code — it is still just one paste.

Will the booking widget match my Wix site'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 and header accent with a data-accent attribute to match your Wix palette. The drawer itself is a clean, neutral panel that sits over your page without disturbing your Wix design.

Is the booking widget mobile friendly on Wix?

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 tap-to-close and the browser back gesture, and the floating button respects mobile safe areas.

Learn more about direct bookings

Add to any website

WordPress, Squarespace, Webflow, GoDaddy, Hostinger — the same one line.

Website Builder

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

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

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

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 Wix 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