Skip to content
Driive Help Center home

Website Widget

The website widget is the fastest way to turn your existing website into a booking machine. It adds a "Book Now" button anywhere on your pages, and when customers click it, your booking page opens without them leaving your site. No redesign needed — just paste two small snippets and you're live.

Why use the widget

  • Capture visitors before they leave. A "Book Now" button means customers can schedule the moment they decide to hire you — no hunting for a phone number or contact form.
  • Stay on your site. The widget opens an overlay on your page. Customers book without being redirected, which keeps the experience seamless.
  • Match your brand. The button's label, style, size, and color are all customizable, so it looks like a natural part of your website.

Where to get your embed code

The widget belongs to a booking page, so its code lives with that page:

  1. Go to Setup > Booking Pages and open the page you want the button to open.
  2. Click the Embed tab.
  3. Choose Book Now button (or Inline embed for a booking page rendered into your layout).
  4. Copy the script tag, then customize and copy the button snippet.

Because each page generates its own snippet, one website can point at several booking pages — a general button in the header, a "Free Estimate" button on your services page. See Embedding Your Booking Page for the full walkthrough.

The two snippets

Step 1: Install the script

Add this once per site — the <head> or just above the closing </body> tag both work:

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

One tag covers every button on the site. You don't repeat it per page or per booking page.

Step 2: Add the Book Now button

Paste this wherever the button should appear:

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

The configurator on the Embed tab customizes it for you, with a live preview that updates as you go:

  • Variant — Default, Outline, Rounded, Pill, or Text Link.
  • Size — SM, MD, or LG.
  • Label — Change "Book Now" to anything you like ("Get a Free Estimate," "Schedule Service").
  • Color — Pick a preset or enter your brand's hex code.
  • Full width — Stretch the button to fill its container.

The generated snippet only includes the attributes you actually changed, so what you copy stays readable.

Step 3: Verify it's working

Refresh your website. You should see your button where you placed it. Click it to confirm the booking page opens.

Note: The button opens a booking page, so that page has to be Published. A draft page won't open.

Placement best practices

  • Put it where eyes go. Your site header, hero section, and services page are prime spots. You can place the button snippet on as many pages as you like.
  • Use more than one. A button in the header plus one at the bottom of your services page catches customers whenever they're ready.
  • Point campaign pages at campaign booking pages. A "Free Estimate" button that opens a purpose-built page converts better than one that opens your general page.
  • Don't hide it behind cookie banners. If your site uses a consent banner, make sure it doesn't overlap the button. Test on desktop and mobile.
  • Test on mobile. Over half of home-service bookings come from mobile devices. Verify the button is easy to tap and the overlay is usable on small screens.

Platform-specific installation

WordPress

  1. Use a plugin like Insert Headers and Footers (or WPCode) to add the script tag site-wide.
  2. Place the <driive-btn> snippet in your page content using a Custom HTML block.
  3. Save and clear any caching plugins.

Squarespace

  1. Go to Settings > Advanced > Code Injection and paste the script tag in the Footer field.
  2. Add a Code block to any page and paste the <driive-btn> snippet where you want the button.
  3. Click Save.

Wix

  1. Go to Settings > Custom Code (available on premium plans) and add the script tag with placement Body - End, applied to All Pages.
  2. Add an Embed HTML element to your page and paste the <driive-btn> snippet.
  3. Click Apply and publish.

Webflow

  1. Go to Project Settings > Custom Code and paste the script tag in the Footer Code section.
  2. Add an Embed element where you want the button and paste the <driive-btn> snippet.
  3. Publish your site.

GoDaddy Website Builder

  1. Open the page editor and add an HTML section.
  2. Paste both the script tag and the <driive-btn> snippet into the HTML section.
  3. Publish your site.

Tip: After installing on any platform, clear your browser cache and any site-level caches (like WordPress caching plugins) before testing. Cached pages may not show the widget right away.

What's next