<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" 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" 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" 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" 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" 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" 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" 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</p></li><li><p><strong>Verify Company ID</strong>: Confirm your company ID is correct</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

Getting Started

Analytics Integration

Connecting Stripe Identity

Connecting Stripe Payments

Connecting An SMS Provider

Connecting A GPS Provider

Connecting iglooHome Locks

Connecting Zapier

Integrations

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

Docs

Lockii