Skip to content
Driive Help Center home

Embedding Your Booking Page

A booking page works perfectly well as a link, but the highest-converting place for it is your own website — where visitors already are. The Embed tab on every booking page generates the code to put it there, with a live preview so you can see the button before you paste it.

Two ways to embed

Open the booking page and go to the Embed tab. Pick a method at the top:

Book Now button

A button on your page that opens the booking page in a popup over your site. The visitor never leaves, and the page they came from stays behind the overlay.

This is the right choice for most websites — a header, a hero section, a service page, a footer.

Inline embed

The booking page rendered directly into your page's layout, as part of the content rather than over it.

Use it when you want a dedicated "Book an appointment" page on your site, or when campaign attribution matters — the inline embed carries the landing page's own URL parameters through into the booking, so UTM tags from your ad click survive.

Install the script

Both methods need one script tag, added once per site:

<script src="https://embed.getdriive.com/widget.js" defer></script>

Paste it in your site's <head>, or just above the closing </body> tag. Most site builders have a "custom code" or "header scripts" setting for exactly this. One tag covers every booking page and every button on the site — you don't add it again per page.

Add a Book Now button

With the script installed, add the button wherever you want it:

<driive-btn page="your-page-slug"></driive-btn>

The Embed tab generates this for you with the page's slug already filled in, and gives you controls to customize it while a live preview updates alongside:

ControlOptions
VariantDefault, Outline, Rounded, Pill, Text Link
SizeSM, MD, LG
LabelAny text — "Book Now", "Get a Free Estimate", "Schedule Service"
ColorA preset or any hex color
Full widthStretches the button to fill its container

Adjust until the preview matches your site, then copy the snippet. The generated code only includes the attributes you actually changed, so it stays readable.

Tip: Match the button to the buttons already on your site rather than to your booking page. A button that looks native gets clicked; a button that looks pasted in gets ignored.

Add an inline embed

<driive-embed page="your-page-slug"></driive-embed>

Paste it wherever the booking page should appear. It sizes itself to the container, so put it in a full-width section rather than a narrow sidebar.

Multiple buttons, multiple pages

Because the snippet names a page slug, one site can point at different booking pages from different places:

Where it livesPage it opens
Site headerYour main booking page
"Free estimates" landing pageYour estimate-only page
Maintenance plans pageYour maintenance page

Add as many <driive-btn> tags as you like — the script is loaded once and handles all of them.

If the button doesn't appear

  1. Check the script tag. It has to be present on the page the button is on. On most site builders that means a site-wide setting, not a per-page block.
  2. Check the page slug. The page attribute must match the slug on the booking page's General tab exactly.
  3. Check that the page is published. A draft page won't open — publish it first.
  4. Check for stripped HTML. Some builders' rich-text editors remove custom elements. Use a raw HTML or embed block, not a text block.
  5. Hard-refresh. Ctrl+Shift+R or Cmd+Shift+R to rule out a cached version of your page.

What's next