Skip to content
Driive Help Center
Driive Help Center

Website Widget

The website widget is the fastest way to turn your existing website into a booking machine. It adds a floating "Book Now" button to every page, and when customers click it, your full booking experience opens without leaving your site. No redesign needed — just paste one code snippet and you're live.

Why use the widget

  • Capture visitors before they leave. A persistent "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.

  • Automatic branding. The widget uses your logo and brand colors from Company Settings, so it looks like a natural part of your website.

How to set up the widget

Step 1: Navigate to the widget channel

Go to Booking Channels in the left sidebar and click Website. You'll see the widget setup page with your embed code and a live preview.

Step 2: Copy the embed code

Click the Copy Code button to copy the embed snippet to your clipboard. The code looks something like this:

<script src="https://app.driive.com/widget/your-org-slug.js" async></script>

Step 3: Paste into your website

Open your website's HTML and paste the snippet just before the closing </body> tag. This ensures the widget loads after your page content, keeping your site fast.

    <!-- Your existing page content above -->
    <script src="https://app.driive.com/widget/your-org-slug.js" async></script>
  </body>
</html>

Not comfortable editing HTML? Most website builders have a section for adding custom code. See the platform-specific tips below, or ask your web developer to paste the snippet for you.

Step 4: Verify it's working

Refresh your website. You should see a floating "Book Now" button in the bottom-right corner. Click it to confirm the booking flow opens correctly.

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

Customization

The widget automatically inherits your branding settings:

  • Button color — Uses your primary brand color.

  • Logo — Displays your uploaded logo in the booking overlay header.

  • Accent color — Applied to secondary UI elements within the booking flow.

To change any of these, update your branding in Setup > Company > Branding. The widget reflects changes immediately — no need to re-copy the embed code.

Preview

Before adding the code to your live website, you can preview the widget directly from the Booking Channels page:

  1. Go to Booking Channels > Website.

  2. Click Preview to open a simulated view of how the widget looks and behaves.

  3. Walk through the booking flow to make sure your appointment types, questions, and confirmation page all look right.

Placement best practices

  • Keep it on every page. The widget works best as a site-wide element. Customers might decide to book from your services page, your about page, or even your blog.

  • Bottom-right is standard. The default position (bottom-right corner) is where customers expect to find floating action buttons. Avoid moving it unless you have a specific reason.

  • Don't hide it behind cookie banners. If your site uses a cookie consent banner, make sure it doesn't overlap with the widget. Test on both desktop and mobile.

  • Test on mobile. Over half of home-service bookings come from mobile devices. Verify the widget is easy to tap and that the booking overlay is usable on small screens.

Platform-specific installation

WordPress

  1. Go to Appearance > Theme Editor (or use a plugin like "Insert Headers and Footers").

  2. Find the footer.php file or the custom code section for the footer.

  3. Paste the embed code just before </body>.

  4. Save and clear any caching plugins.

Squarespace

  1. Go to Settings > Advanced > Code Injection.

  2. Paste the embed code in the Footer field.

  3. Click Save.

Wix

  1. Go to Settings > Custom Code (available on premium plans).

  2. Click Add Custom Code.

  3. Paste the embed code, set placement to Body - End, and apply to All Pages.

  4. Click Apply.

Webflow

  1. Go to Project Settings > Custom Code.

  2. Paste the embed code in the Footer Code section.

  3. Publish your site.

GoDaddy Website Builder

  1. Open the page editor.

  2. Add an HTML section or widget.

  3. Paste the embed code.

  4. 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 Booking Channels page shows the current status of your website widget:

  • 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