Advanced Widget Configuration

Multiple Widget Configurations

You can create multiple widget configurations in your dashboard under Settings → Widget. Each configuration has its own settings for display mode, theme, pre-selected services, and form behavior. This is useful when you want different widgets on different pages of your website.

For example, you might have a full booking widget on your homepage and a quote-only widget on your pricing page. Each configuration gets its own embed code with a unique config identifier passed via the data-config attribute:

<!-- Full booking widget -->
<script src="https://quotelab.io/embed.js"
  data-business="your-business-slug"
  data-config="default"
  async></script>

<!-- Quote-only widget on pricing page -->
<script src="https://quotelab.io/embed.js"
  data-business="your-business-slug"
  data-config="quote-only"
  async></script>

Form Modes

The widget supports three form modes that control the customer flow:

Set the form mode via the data-form-mode attribute or in your widget configuration in the dashboard:

<script src="https://quotelab.io/embed.js"
  data-business="your-business-slug"
  data-form-mode="quote"
  async></script>

Theme Customization

The widget inherits your brand colors from your dashboard settings by default. You can override colors per embed using data-* attributes or CSS custom properties on the host page:

<!-- Override via data attributes -->
<script src="https://quotelab.io/embed.js"
  data-business="your-business-slug"
  data-primary-color="#1e40af"
  data-accent-color="#3b82f6"
  data-theme="dark"
  async></script>

<!-- Or via CSS custom properties on the host page -->
<style>
  :root {
    --bk-primary: #1e40af;
    --bk-accent: #3b82f6;
    --bk-radius: 12px;
    --bk-font-family: 'Inter', sans-serif;
  }
</style>

The widget reads CSS custom properties from the host page via getComputedStyle() as a fallback when data attributes are not set. This allows seamless integration with your existing site design. The data-theme attribute supports light, dark, and auto (follows the user's system preference).

Widget Events for Tracking

The widget dispatches custom events on the document object that you can use for analytics, conversion tracking, and custom behavior on your site. All events are prefixed with bookkit:.

// Google Analytics 4 conversion tracking
document.addEventListener('bookkit:booking-confirmed', (e) => {
  gtag('event', 'purchase', {
    value: e.detail.total,
    currency: 'USD',
    transaction_id: e.detail.bookingId
  });
});

// Facebook Pixel
document.addEventListener('bookkit:quote-calculated', (e) => {
  fbq('track', 'AddToCart', { value: e.detail.total, currency: 'USD' });
});

// Track funnel abandonment
document.addEventListener('bookkit:step-changed', (e) => {
  gtag('event', 'widget_step', { step: e.detail.step });
});

Display Modes

The widget supports three display modes controlled by the data-mode attribute:

<script src="https://quotelab.io/embed.js"
  data-business="your-business-slug"
  data-mode="floating"
  data-button-text="Book Now"
  async></script>

<button onclick="document.querySelector('bookkit-widget').open()">
  Book an Appointment
</button>

<script src="https://quotelab.io/embed.js"
  data-business="your-business-slug"
  data-mode="modal"
  async></script>

Review Widget

In addition to the booking widget, QuoteLab offers a separate lightweight review widget that displays your aggregate rating and recent customer reviews. Embed it on your website to build trust and drive more bookings:

<script src="https://quotelab.io/reviews.js"
  data-business="your-business-slug"
  async></script>

The review widget is under 3KB and shows your star rating, total review count, and the most recent reviews with customer names and comments. It updates automatically as new reviews come in. Place it near your booking widget or on a testimonials page for maximum impact.

Pre-Selected Services via URL

You can create links that pre-select a specific service and dimensions in the widget. This is useful for sharing instant quote links via social media, email, or SMS:

https://quotelab.io/book/your-business-slug?service=full_detail&vehicle_size=suv

<!-- Or pass pre-selection via data attributes -->
<script src="https://quotelab.io/embed.js"
  data-business="your-business-slug"
  data-service="full_detail"
  data-vehicle-size="suv"
  async></script>

The customer lands on the widget with the service and options already selected. They just confirm and proceed to booking. This reduces friction and is especially effective for Instagram bio links or responding to customer inquiries.