Customization

How to customize the booking widget

Tune the drawer with a few attributes, or take full control with CSS variables and element selectors. The booking form inside stays styled from your property settings so checkout is always consistent.

Two layers of control: attributes on the script tag for quick theming, and CSS from your own stylesheet for full control. Use whichever fits.

Layer 1 — script attributes

Add any of these to the <script> tag. All are optional except data-website. Values are sanitized, so an invalid color or number simply falls back to the default.

Attribute	Values	What it does
`data-website`	`your website ID`	Required. The property this widget books for. Pre-filled in your dashboard snippet.
`data-trigger`	`CSS selector`	The element(s) that open the drawer, e.g. "#book-now". Omit to show a floating button.
`data-position`	`"right" \| "left"`	Which side the panel slides from. Default: right.
`data-accent`	`any CSS color`	Color of the launcher, header bar, and spinner. hex, rgb(), hsl(), or a color name.
`data-header`	`text`	Header bar title. Set to "" (empty) to hide the header entirely.
`data-label`	`text`	Text of the floating fallback button. Default: "Book now".
`data-launcher`	`"floating" \| "none"`	Set to "none" to suppress the fallback button when no trigger matches.
`data-width`	`320–620`	Desktop panel width in pixels. Default: 440. (Mobile is always full-screen.)

Example

<script
  src="https://your-subdomain.directbookinghost.com/embed-drawer.js"
  data-website="YOUR_WEBSITE_ID"
  data-trigger="#book-now"
  data-position="left"
  data-accent="#c8a04f"
  data-header="Sunnyside Oasis"
  data-width="480"
  defer
></script>

Layer 2 — your own CSS

The drawer chrome lives in your page's DOM, so your site's CSS can style it. The cleanest approach is to override the CSS variables on the panel:

[data-db-drawer="panel"] {
  --db-accent: #c8a04f;      /* buttons, header, spinner */
  --db-panel-bg: #101418;    /* panel surface */
  --db-header-bg: #c8a04f;   /* header bar */
  --db-header-text: #101418; /* header title + close icon */
}

Available CSS variables

Variable	Controls
`--db-accent`	Launcher, header background, and spinner color.
`--db-panel-bg`	Panel surface / body background.
`--db-header-bg`	Header bar background (defaults to --db-accent).
`--db-header-text`	Header title and close-icon color.
`--db-shadow`	Panel drop shadow.

Element selectors

For finer control, target elements directly. Each carries a stable data attribute:

Selector	Element
`[data-db-drawer="launcher"]`	The floating fallback button (when no trigger is set).
`[data-db-drawer="overlay"]`	The dimmed backdrop behind the panel.
`[data-db-drawer="panel"]`	The sliding panel itself (also carries the CSS variables).
`[data-db-drawer="header"]`	The colored header bar.
`[data-db-drawer="title"]`	The header title text.
`[data-db-drawer="close"]`	The close (X) button.
`[data-db-drawer="body"]`	The scroll area holding the booking form.

/* Example: uppercase launcher + blurred header */
[data-db-drawer="launcher"] {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[data-db-drawer="header"] {
  backdrop-filter: blur(6px);
}
[data-db-drawer="overlay"] {
  background: rgba(0,0,0,0.6);
}

Using an AI website assistant? Tell it: “Add CSS that targets [data-db-drawer="panel"] and sets --db-accent, --db-panel-bg, and --db-header-text to match my brand colors.”

What you can't restyle (on purpose)

The booking form inside the drawer renders in a secure same-origin iframe and is themed from your DirectBookings property settings (its colors and fonts). This keeps checkout consistent and trustworthy for guests, and prevents host CSS from accidentally breaking the payment step. Set your form's look under Website Builder → Design instead.

Mobile behavior

On screens 640px and narrower, the panel automatically becomes a full-screen sheet with safe-area padding for notched phones — regardless of your data-width setting, which applies to desktop.

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 →