Embed Guide
Add the QuoteLab booking widget to your website with one line of code.
Quick Start
Copy the following script tag and paste it anywhere on your website where you want the booking widget to appear. Replace your-business-slug with your business slug, which you can find in your dashboard settings.
<script src="https://quotelab.io/embed.js" data-business="your-business-slug" async></script>That is it. The widget loads automatically, fetches your services and pricing, and lets customers book and pay directly on your site.
Configuration Options
Customize the widget behavior using data-* attributes on the script tag.
| Attribute | Required | Description |
|---|---|---|
| data-business | Yes | Your business slug (e.g., sparkle-detail-co) |
| data-mode | No | Display mode: inline (default), floating, or modal |
| data-theme | No | Color scheme: light (default), dark, or auto (follows system preference) |
<script src="https://quotelab.io/embed.js"
data-business="your-business-slug"
data-mode="floating"
data-theme="auto"
async></script>WordPress
We have an official WordPress plugin with Gutenberg blocks, Elementor and WPBakery widgets, shortcodes, a floating “Book Now” button, SEO schema markup, and more. See the WordPress Plugin Guide for full setup instructions.
If you prefer not to use the plugin, you can also embed manually. In the WordPress block editor (Gutenberg), add a Custom HTML block to the page where you want the widget. Paste the script tag into the block. Alternatively, if you want the widget on every page, go to Appearance → Theme File Editor and paste the script tag before the closing </body> tag in your theme's footer.php. If you use a page builder like Elementor or Divi, use their HTML or code module to embed the script.
Wix
In the Wix Editor, click Add (+) → Embed Code → Embed HTML. Paste the script tag into the code box and resize the container to fit the widget. For Wix Studio sites, use the Custom Element component and add the script tag in the HTML settings panel.
Squarespace
Go to Settings → Advanced → Code Injection and paste the script tag into the Footer field to load it on every page. To add the widget to a specific page, edit the page and add a Code Block (available under Add Section → Code). Paste the script tag and disable the “Display Source” toggle.
Widget Events
The widget dispatches custom events on the document object that your page can listen to. Use these for conversion tracking, analytics, or custom behavior.
| Event Name | Description |
|---|---|
| bookkit:quote-calculated | Fired when a quote is calculated. Detail includes total, services, and lineItems. |
| bookkit:booking-confirmed | Fired when a booking is successfully created. Detail includes bookingId and total. Use this for conversion tracking. |
| bookkit:step-changed | Fired when the user moves between widget steps. Detail includes step (e.g., "service", "payment"). |
document.addEventListener('bookkit:booking-confirmed', (e) => {
// Fire your conversion tracking
gtag('event', 'purchase', { value: e.detail.total });
});Troubleshooting
Widget does not appear
Check that your business slug is correct and that your account has at least one active service configured. Open your browser's developer console (F12) and look for error messages. If you see a 404 error, verify the script URL matches https://quotelab.io/embed.js.
Content Security Policy (CSP) errors
If your site has a strict Content Security Policy, you may need to add quotelab.io to your script-src and connect-src directives. If you use Stripe payments, also add js.stripe.com to your CSP.
Styling conflicts
The widget uses Shadow DOM to isolate its styles from your page. In rare cases, aggressive CSS resets on your site can affect the widget container element. If you notice layout issues, try wrapping the script tag in a <div> with a fixed width, or contact our support team for help.
Need more help? Contact our support team or email [email protected].