Skip to content
Driive Help Center home
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 full booking experience opens without 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 to a separate site, which keeps the experience seamless.
  • Match your brand. The button's label, style, and color are all customizable, so it looks like a natural part of your website.

How to set up the widget

Step 1: Open the widget page

Go to Setup > Website Widget in the left sidebar. You'll see the two-step installation with your embed code and a live preview.

Step 2: Install the script

Copy the script tag and add it anywhere on your website — the <head> or just above the closing </body> tag both work:

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

Step 3: Add the Book Now button

Paste the button code wherever you want the button to appear on your page:

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

Use the configurator on the widget page to customize the button before you copy it — the live preview updates as you go:

  • Style — Default, Outline, Rounded, Pill, or Text Link.
  • Size — Small, medium, or large.
  • 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.
  • Appointment type — Optionally link the button straight to one service instead of your full booking page.
  • Full width — Stretch the button to fill its container.

The configurator generates the exact snippet for your choices, so what you copy is what you get.

Step 4: Verify it's working

Refresh your website. You should see your "Book Now" button where you placed it. Click it to confirm the booking flow opens correctly.

Once the widget is live, its status on the widget page updates from Setup to Live.

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.
  • Don't hide it behind cookie banners. If your site uses a cookie consent banner, make sure it doesn't overlap the button. Test on both desktop and mobile.
  • Test on mobile. Over half of home-service bookings come from mobile devices. Verify the button is easy to tap and that the booking 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.

Status tracking

The widget page at Setup > Website Widget shows the current status:

  • Setup — You haven't completed the installation yet. The embed code is ready but hasn't been detected on a live site.
  • Live — The widget is installed and active. Customers can book through it.

What's next

Powered by Plain