<p>Embed your Lockii booking system directly into your website with customizable widgets that match your brand. Choose from multiple embed types to create seamless booking experiences for your customers.</p><h1>Getting Started</h1><ol class="steps-list"><li><p><strong>Install the Base Script</strong></p><p>Add this script tag to your website's <code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">&lt;head&gt;</code> section or before the closing <code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">&lt;/body&gt;</code> tag:</p><pre class="relative  language-plaintext" data-language="plaintext" onmouseenter="initCodeBlockCopy()"><button class="absolute right-2 top-2 flex cursor-pointer items-center gap-1 rounded-lg bg-white px-1.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm dark:bg-gray-800 dark:text-gray-200" onclick="copyCodeBlock(this)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy h-3.5 w-3.5 transition-transform duration-200 ease-in-out hover:scale-110"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button><code class="language-plaintext relative"><span>&lt;script 
  data-lockii-id="YOUR_COMPANY_ID" 
  src="https://dash.lockii.app/widget.js"     
&gt;&lt;/script&gt;
</span></code></pre></li><li><p><strong>Add Widget Elements</strong></p><p>Once the script is installed, you can add any of the widget elements below to your pages.</p></li></ol><p></p><p></p><h1>Available Widget Types</h1><ol class="steps-list"><li><p><strong>Browse Widget</strong></p><p>The complete browsing experience with product filtering and selection.</p><pre class="relative  language-plaintext" data-language="plaintext" onmouseenter="initCodeBlockCopy()"><button class="absolute right-2 top-2 flex cursor-pointer items-center gap-1 rounded-lg bg-white px-1.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm dark:bg-gray-800 dark:text-gray-200" onclick="copyCodeBlock(this)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy h-3.5 w-3.5 transition-transform duration-200 ease-in-out hover:scale-110"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button><code class="language-plaintext relative"><span>&lt;lockii-browse&gt;&lt;/lockii-browse&gt;</span></code></pre><table style="min-width: 75px"><colgroup><col style="min-width: 25px"><col style="min-width: 25px"><col style="min-width: 25px"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p>Attribute</p></th><th colspan="1" rowspan="1"><p>Description</p></th><th colspan="1" rowspan="1"><p>Example</p></th></tr><tr><td colspan="1" rowspan="1"><p><code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">location_id</code></p></td><td colspan="1" rowspan="1"><p>Filter to specific location</p></td><td colspan="1" rowspan="1"><p><code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">location_id="loc_123"</code></p></td></tr><tr><td colspan="1" rowspan="1"><p><code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">hide_not_present</code></p></td><td colspan="1" rowspan="1"><p>Only show available items</p></td><td colspan="1" rowspan="1"><p><code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">hide_not_present="true"</code></p></td></tr><tr><td colspan="1" rowspan="1"><p><code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">hide_search</code></p></td><td colspan="1" rowspan="1"><p>Hide the search bar</p></td><td colspan="1" rowspan="1"><p><code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">hide_search="true"</code></p></td></tr><tr><td colspan="1" rowspan="1"><p><code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">category_id</code></p></td><td colspan="1" rowspan="1"><p>filter to show only products from this category (Right click on a category in settings to copy the ID)</p></td><td colspan="1" rowspan="1"><p><code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">category_id="cat_212131"</code></p></td></tr><tr><td colspan="1" rowspan="1"><p></p></td><td colspan="1" rowspan="1"><p></p></td><td colspan="1" rowspan="1"><p></p></td></tr></tbody></table></li><li><p><strong>Product List Widget</strong></p><p>Display your products in a clean list format.</p><pre class="relative  language-plaintext" data-language="plaintext" onmouseenter="initCodeBlockCopy()"><button class="absolute right-2 top-2 flex cursor-pointer items-center gap-1 rounded-lg bg-white px-1.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm dark:bg-gray-800 dark:text-gray-200" onclick="copyCodeBlock(this)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy h-3.5 w-3.5 transition-transform duration-200 ease-in-out hover:scale-110"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button><code class="language-plaintext relative"><span>&lt;lockii-products&gt;&lt;/lockii-products&gt;</span></code></pre><table style="min-width: 75px"><colgroup><col style="min-width: 25px"><col style="min-width: 25px"><col style="min-width: 25px"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p>Attribute</p></th><th colspan="1" rowspan="1"><p>Description</p></th><th colspan="1" rowspan="1"><p>Example</p></th></tr><tr><td colspan="1" rowspan="1"><p><code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">location_id</code></p></td><td colspan="1" rowspan="1"><p>Filter to specific location</p></td><td colspan="1" rowspan="1"><p><code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">location_id="loc_123"</code></p></td></tr><tr><td colspan="1" rowspan="1"><p><code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">hide_not_present</code></p></td><td colspan="1" rowspan="1"><p>Only show available items</p></td><td colspan="1" rowspan="1"><p><code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">hide_not_present="true"</code></p><p></p></td></tr><tr><td colspan="1" rowspan="1"><p><code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">category_id</code></p></td><td colspan="1" rowspan="1"><p>filter to show only products from this category (Right click on a category in settings to copy the ID)</p></td><td colspan="1" rowspan="1"><p><code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">category_id="cat_212131"</code></p></td></tr><tr><td colspan="1" rowspan="1"><p></p></td><td colspan="1" rowspan="1"><p></p></td><td colspan="1" rowspan="1"><p></p></td></tr></tbody></table></li><li><p><strong>Booking Selector Widget</strong></p><p>Quick date/time selection interface.</p><pre class="relative  language-plaintext" data-language="plaintext" onmouseenter="initCodeBlockCopy()"><button class="absolute right-2 top-2 flex cursor-pointer items-center gap-1 rounded-lg bg-white px-1.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm dark:bg-gray-800 dark:text-gray-200" onclick="copyCodeBlock(this)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy h-3.5 w-3.5 transition-transform duration-200 ease-in-out hover:scale-110"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button><code class="language-plaintext relative"><span>&lt;lockii-selector&gt;&lt;/lockii-selector&gt;</span></code></pre><table style="min-width: 75px"><colgroup><col style="min-width: 25px"><col style="min-width: 25px"><col style="min-width: 25px"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p>Attribute</p></th><th colspan="1" rowspan="1"><p>Description</p></th><th colspan="1" rowspan="1"><p>Example</p></th></tr><tr><td colspan="1" rowspan="1"><p><code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">show_location</code></p></td><td colspan="1" rowspan="1"><p>Show/hide location selector</p></td><td colspan="1" rowspan="1"><p><code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">show_location="false"</code></p></td></tr></tbody></table></li><li><p><strong>Order Lookup Widget</strong></p><p>Allow customers to find their existing bookings.</p><pre class="relative  language-plaintext" data-language="plaintext" onmouseenter="initCodeBlockCopy()"><button class="absolute right-2 top-2 flex cursor-pointer items-center gap-1 rounded-lg bg-white px-1.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm dark:bg-gray-800 dark:text-gray-200" onclick="copyCodeBlock(this)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy h-3.5 w-3.5 transition-transform duration-200 ease-in-out hover:scale-110"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button><code class="language-plaintext relative"><span>&lt;lockii-find&gt;&lt;/lockii-find&gt;</span></code></pre><p></p></li></ol><p></p><h1>Hosted Pages Alternative</h1><p>If you prefer not to embed widgets, use our hosted pages, you can link directly to these pages.</p><ol class="steps-list"><li><p>Browse Page</p><pre class="relative  language-plaintext" data-language="plaintext" onmouseenter="initCodeBlockCopy()"><button class="absolute right-2 top-2 flex cursor-pointer items-center gap-1 rounded-lg bg-white px-1.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm dark:bg-gray-800 dark:text-gray-200" onclick="copyCodeBlock(this)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy h-3.5 w-3.5 transition-transform duration-200 ease-in-out hover:scale-110"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button><code class="language-plaintext relative"><span>https://lockii.app/YOUR_COMPANY_ID/browse</span></code></pre></li><li><p>Order Lookup Page</p><pre class="relative  language-plaintext" data-language="plaintext" onmouseenter="initCodeBlockCopy()"><button class="absolute right-2 top-2 flex cursor-pointer items-center gap-1 rounded-lg bg-white px-1.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm dark:bg-gray-800 dark:text-gray-200" onclick="copyCodeBlock(this)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy h-3.5 w-3.5 transition-transform duration-200 ease-in-out hover:scale-110"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button><code class="language-plaintext relative"><span>https://lockii.app/YOUR_COMPANY_ID/find</span></code></pre><p></p></li></ol><p></p><h1>Troubleshooting</h1><h3>Widget Not Loading</h3><ol class="steps-list"><li><p><strong>Check Script Installation</strong>: Ensure the base script is properly installed, compare your installation with the code in Settings &gt; Widgets.</p></li><li><p><strong>Verify Company ID</strong>: Confirm your company ID is correct, you can find the correct company ID in settings in the widget example code.</p></li><li><p><strong>Deploy Changes:</strong> some website builders wont allow loading of widgets while in “preview” or “development” mode, publish your changes and check the widgets on your live site.</p></li><li><p><strong>Check Your Not On Localhost:</strong> some website builders run previews in <a href="http://localhost" target="_blank" rel="noopener noreferrer nofollow" class="cursor-pointer box-border border-b hover:border-b-[2px] transition-all duration-75 " style="text-decoration: none; border-color: var(--portal-accent-color);">localhost</a> while inside an iframe, this can cause nesting and checkout issues, please ensure you test in a deployed enviroment.</p></li><li><p><strong>Check Console</strong>: Look for JavaScript errors in browser console</p></li><li><p><strong>Test Network</strong>: Ensure <a href="http://booqyy.com" target="_blank" rel="noopener noreferrer nofollow" class="cursor-pointer box-border border-b hover:border-b-[2px] transition-all duration-75 " style="text-decoration: none; border-color: var(--portal-accent-color);">lockii.app</a> is accessible from your domain</p></li></ol><p></p>

Websites & Embeds

Embedding On Your Site 

Setting Up Your Account

Getting Started With Self Hire

What Is Lockii?

Getting Started

Analytics Integration

Connecting Stripe Identity

Connecting Stripe Payments

Connecting An SMS Provider

Connecting A GPS Provider

Connecting iglooHome Locks

Connecting Zapier

Connecting Customer Support Tools

Integrations

Get an overview of how to setup and connect Lockii to all your tools.

Docs

Lockii