The embed snippet

Two lines. One target div, one async script. Paste anywhere in your HTML — typically a /book, /enquire or Get a quote page.

<div id="innkept-quote"></div>
<script src="https://quote.innkept.com/embed/v1/loader.js"
        data-key="pk_live_xxx"
        async></script>

Find your snippet — pre-filled with your live publishable key — under Embed in the dashboard.

What the loader does

1. Reads the data-key attribute from its own script tag.
2. Finds the target div (#innkept-quote).
3. Attaches a shadow DOM root inside it — your site's CSS can't leak in, our CSS can't leak out.
4. Injects the widget bundle (widget.js) and stores the boot config on window.__INNKEPT__.
5. The widget bundle (Preact, ~12 kB gzipped) fetches your config from /api/widget/v1/config?key=… and renders the configurator.

Bundle sizes & performance

Bundle	Size (gz)	When loaded
loader.js	~1 kB	Immediately, asynchronously (doesn't block render).
widget.js	~12 kB	After loader runs.
Config request	~3 kB	After widget loads.

Total: under 30 kB before the widget can show its first step. No jQuery, no React on your page, no font requests against your domain.

The target div

The widget inherits its width from the div — make the div full-width and the widget will fill its container. The widget's height grows as the user advances through steps. There's no fixed height — give it room to grow.

<div id="innkept-quote" style="max-width: 720px; margin: 0 auto;"></div>

Custom mount target

If you can't use the id innkept-quote (e.g. a CMS that mangles ids), pass data-target="#my-custom-id" on the script tag and we'll mount there instead.

<div id="my-custom-id"></div>
<script src="https://quote.innkept.com/embed/v1/loader.js"
        data-key="pk_live_xxx"
        data-target="#my-custom-id"
        async></script>

Loading multiple instances

Don't. One configurator per page. If you need a second one (e.g. a corporate-only version), use a second publishable key and a second URL — different keys can scope to different products and event types.

Shadow DOM in plain English

The widget renders inside a Web Components shadow root. Practically: your site's CSS doesn't affect the widget, and the widget's CSS doesn't affect your site. You can use Innkept on a page with the messiest, most opinionated CSS in the world and nothing will collide.