Docs / Websites & Embeds

Embedding On Your Site

Get Lockii setup on your website in under 5 minutes!

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.

Getting Started

To integrate Lockii with any website you’ll need to start by opening Lockii and going to Settings > Website & Embeds and copying the “Base Script”.
Then find your website builder in the list below and follow the instructions to finish installation.

Squarespace

Make sure you’re on a squarespace plan that includes custom code embeds (Core and upwards)

Log in to your Squarespace dashboard and select the website where you want to add the widget.
In the left-hand menu, click Website → Pages:
Scroll down the left-hand menu, select Custom Code, and click Code Injection:
Paste the widget installation code into the Header field and click Save:
Now open an existing page you would like to show the lockii product list on in the editor and click Edit
Find the section you wish to add the Lockii Embed in and click the Add block button and select Code
Click the Edit icon and paste the below code into the Content popup, click save, and make the widget full width. Your good to go!
```
<lockii-browse></lockii-browse>
```

Shopify

Log into Shopify and navigate to Online Store → Themes. Click … → Edit code.
Open theme.liquid (or your main layout file) and paste the Lockii base script just before the closing </body> tag; save your changes. This loads Lockii on all pages.
Back in the Shopify Theme Editor, open the page or template where you want the product list. Add a Custom Liquid block (Online Store 2.0) or Custom HTML/Custom content section (vintage themes).
Paste <lockii-browse></lockii-browse> in the block and save. The Lockii product list now appears on that page.

Wix

Sign into Wix and open your site’s Settings → Advanced → Custom Code.
Click Add Custom Code, paste the Lockii base script, choose Body – start, enable Show on all pages, and save. This injects the script across your site.
Open the Wix Editor, navigate to a page where you want the Lockii product list, and click Add → Embed → Custom Code.
Paste <lockii-browse></lockii-browse> into the embed block, adjust the size, and publish the site.

Wordpress

Log into your WordPress dashboard and go to Appearance → Theme Editor.
Open footer.php (or your theme’s global footer) and paste the Lockii base script just before the closing </body> tag. Save to apply it across your site.
Navigate to the page or post where you want the product list. Add a Custom HTML block (Gutenberg) or a Shortcode widget in the Classic editor.
Paste <lockii-browse></lockii-browse> into the block and update the page.
If you use Elementor, drag an HTML element into the layout, paste the widget code, and publish.

Webflow

In Webflow, open your Site settings → Custom Code and paste the Lockii base script into the Head code field; save. Publish to load the script globally.
Return to the Designer, open the page where you want the product list, and drag an Embed element to the desired location.
Paste <lockii-browse></lockii-browse> into the embed’s code box, close it, and publish. The product list shows on that page while the base script loads everywhere.

Weebly

In Weebly, go to Theme → Edit HTML/CSS. Open header.html and no-header.html and insert the Lockii base script right after the <body> tag; save the files. For a floating widget, go to Settings → SEO and add the script to the Footer Code field.
Open the page you want to edit and drag an Embed Code element into the layout.
Click Edit Custom HTML, paste <lockii-browse></lockii-browse>, click outside the block to apply, and publish. The base script runs site‑wide, and the product list appears only on pages where you add the embed.

Tilda

In Tilda, go to Site Settings → More → Edit code. Paste the Lockii base script into the HEAD code field and save. Republish all pages to apply it.
Open the page in the Tilda editor, click + to add a block, and choose Embed HTML.
Paste <lockii-browse></lockii-browse> into the code field, adjust block size, and publish the page. The base script loads site‑wide and the product list appears only on your chosen page.

Duda

Open your Duda website, switch to Developer Mode, and go to Site HTML/CSS → body-end.html. Paste the Lockii base script there and save. This loads the script across your site.
Navigate back to the editor, open the page where you want the product list, drag an HTML widget into position, and paste <lockii-browse></lockii-browse>. Save and publish.

Replit, Base64 and Other AI Website Tools

Start by pasting in your base script to the AI app builder, don’t send it just yet

Next copy and paste in the below “Agent Instructions” text to help give your builder context on Lockii and how to set it up in your website and then let it run.

#Lockii - Self Service Rental Software Website Integration
Lockii is a self service / contactless rental system that can be embedded in websites to allow your customers to book directly from your site.

##Installation Instructions
To install Lockii successfully you'll need to have a copy of the users "Base Script", it looks like below.
<script 
  data-lockii-id="EXAMPLE" 
  src="EXAMPLE"     
></script>
If you dont already have a copy of that please ask the user to paste it in.
You need to install this in the website head.
You can then install Lockii widgets wherever you please on the site and they will be rendered at runtime.
We recommend starting by putting the lockii selector widget in the website here and the product list on a products / book page.
We also recommend creating a "Find or Manage" your order page with the find my order widget and some general FAQs.
After installing you can also let the customer know you can setup customer support with the lockii customer support MCP

##Design Recommendations - Dont wrap Lockii product lists or browse page in cards.- Put the Lockii Selector Widget on your hero just above a book now button that takes you to the page or spot where the lockii browse widget is.- We recommend highlighting the fact you are offering fully self service and contactless pickup.- Put Lockii in a light mode section in most cases.
- Lockii Browse and Products lists should be full width or match your standard page width.

##Troubleshooting- SSL Certificate Errors: some website preview tools break embedded iframes, ask the user to deploy the site and check if it works- Loading Errors: some website tools while in preview can cause issues, ask the user to check the deployed site, if that works contact customer support with the website builder you are using and we will make sure we talk to thier team.- No Products In Browse Widget: Check your filters are correct, you cant put plain names in you need to be putting IDs that are copied directly out of Lockii in

#AI Customer Support Integration
We have a customer support specific MCP that you can directly connect a customer facing chatbot too.
If you'd like to use it have the customer go to Lockii Settings > Integration > MCP and copy their MCP URL.
You can then make this available to customers.

## Available Widgets
Browse Widget

The complete browsing experience with product filtering and selection.

<lockii-browse></lockii-browse>







Attribute



Description



Example





location_id



Filter to specific location



location_id="loc_123"





hide_not_present



Only show available items



hide_not_present="true"





hide_search



Hide the search bar



hide_search="true"





category_id



filter to show only products from this category (Right click on a category in settings to copy the ID)



category_id="cat_212131"

















Product List Widget

Display your products in a clean list format.

<lockii-products></lockii-products>







Attribute



Description



Example





location_id



Filter to specific location



location_id="loc_123"





hide_not_present



Only show available items



hide_not_present="true"







category_id



filter to show only products from this category (Right click on a category in settings to copy the ID)



category_id="cat_212131"

















Booking Selector Widget

Quick date/time selection interface.

<lockii-selector></lockii-selector>







Attribute



Description



Example





show_location



Show/hide location selector



show_location="false"



Order Lookup Widget

Allow customers to find their existing bookings.

<lockii-find></lockii-find>



Product Checkout Button

Create your own product pages and browsing experience and just embed our checkout button on your checkout page.

Requires a product ID, you can find any product ID by going to the product page in Lockii and copying the ID in the url, it should look like product_xxxxxxxx

<lockii-checkout-button product_id="YOUR_PRODUCT_ID"></lockii-checkout-button

GoDaddy

GoDaddy breaks or limits any embeds on their site to push you to use their internal services & Tools.
To integrate with Go Daddy please create a button with a link directly to your Lockii hosted link.

CARRD

In Carrd Pro, click + → Embed, choose Embed, and paste the Lockii base script in the code area.
On the next line, paste <lockii-browse></lockii-browse>, set the embed style to Inline, adjust the size, and publish. Because Carrd sites are single‑page, the script and widget apply automatically.

Drupal

Log into Drupal and go to Structure → Block Layout. Add a Custom Block in a region that displays on every page (e.g., Footer). In the Full HTML editor, click Source and paste the Lockii base script. Assign the block and save.
Edit the page where you want the product list, switch to Full HTML, click Source, and paste <lockii-browse></lockii-browse> at the desired spot. Save the page. The base script runs globally, and the product list appears only on that page.

Framer

Open Framer’s Site settings → General → Custom Code. Paste the Lockii base script into the Head field and add <lockii-browse></lockii-browse> inside a <div> at the start of the Body field, then save. This shows a floating widget across all pages.
To place the product list on just one page, open that page in the designer, insert an Embed block (type: HTML) and paste <lockii-browse></lockii-browse>. For a single-page floating widget, add the base script to the page’s Head via Page Settings and the <div> with <lockii-browse> to the start of the page’s Body.

WebNode

Webnode does not support static widgets on all pages, but you can add a floating widget site‑wide. Go to Settings → Website header & footer, paste the Lockii base script into the Header or Footer field, and save.
To display the product list on a particular page, open the page in the Webnode editor, click +, choose HTML section, and paste <lockii-browse></lockii-browse>. Publish the site.

Hostinger

Hostinger heavily restricts the quality of integrations, while the Lockii widget will still function on your site, we recommend using an alternative platform!

In Hostinger, go to More settings → Integrations. In the Custom Code section, paste the Lockii base script and save. This adds the script globally.
Return to the page editor, drag an Embed Code element onto the page, and paste the Base Script again, as well as<lockii-browse></lockii-browse>. Save and update the site.

Adobe Portfolio

Adobe Portfolio does not support site‑wide code. Open the page editor and click the Embed icon (</>) to add a custom embed.
Paste an <iframe> or the <lockii-browse></lockii-browse> code—Adobe typically requires iframes. Set the width/height and save. Repeat for each page you need.

Google Sites

Google Sites does not have a global code injection feature. For each page where you want the product list, click Insert → Embed.
In the Embed code tab, paste the Lockii installation code or share link and click Insert. Alternatively, use the By URL tab and embed your share link as a full page. Resize and publish. Repeat for each page.

Jimdo

Log into Jimdo and navigate to Settings → Edit Head (or open a global element like the footer). Paste the Lockii base script there so it loads on every page.
Open the page where you want the product list, click Add Element → More Elements and Add‑ons → Widget/HTML and paste <lockii-browse></lockii-browse>. Save the changes.
For a floating widget on a single page, add the script portion of the base code and the <div> containing <lockii-browse></lockii-browse> directly inside the page’s HTML block.

You’ll need to be using jimdo creator

Joomla

In Joomla, go to System → Site Templates and open your active template’s index.php for editing.
Insert the Lockii base script immediately after the <body> tag or right before </body>; save the file. This loads the script across your site.
Navigate to Content → Articles and open the article or page where you want the product list. Click Source Code (or Toggle Editor) and paste <lockii-browse></lockii-browse> at the desired position. Save the article.

Kajabi

Sign into Kajabi and open Settings → Site Details. Scroll down to Page Scripts, paste the Lockii base script into the Header Page Scripts field, and save. This adds the script across your site.
Then go to Website → Design, choose the page where you want the product list, click Customize, and Add Section → Custom Block → Custom Code.
Paste <lockii-browse></lockii-browse> into the code field, adjust the width and height, and save. The base script runs globally, and the list appears on the selected page.

Lockii supports most website builders, if you cant find your builder above feel free to contact support for a free website installation or apply the instructions below to your builder.

All Other Website Builders

Install the Base Script
Add this script tag to your website's <head> section or before the closing </body> tag:
```
<script 
  data-lockii-id="YOUR_COMPANY_ID" 
  src="https://dash.lockii.app/widget.js"     
></script>
```
Add Widget Elements
Once the script is installed, you can add any of the widget elements below to your pages.

You can also fallback to using our hosted page if your website doesnt support embeds or you dont wish to host your own.

Browse Page

https://lockii.app/YOUR_COMPANY_ID/browse

Order Lookup Page
```
https://lockii.app/YOUR_COMPANY_ID/find
```

Looking to add different types of widgets or customise them further, you can use any of the options below to add different types of widgets and customise them further.

Available Widget Types

Browse Widget

The complete browsing experience with product filtering and selection.

<lockii-browse></lockii-browse>

Attribute	Description	Example
`location_id`	Filter to specific location	`location_id="loc_123"`
`hide_not_present`	Only show available items	`hide_not_present="true"`
`hide_search`	Hide the search bar	`hide_search="true"`
`category_id`	filter to show only products from this category (Right click on a category in settings to copy the ID)	`category_id="cat_212131"`

Product List Widget

Display your products in a clean list format.

<lockii-products></lockii-products>

Attribute	Description	Example
`location_id`	Filter to specific location	`location_id="loc_123"`
`hide_not_present`	Only show available items	`hide_not_present="true"`
`category_id`	filter to show only products from this category (Right click on a category in settings to copy the ID)	`category_id="cat_212131"`

Booking Selector Widget
Quick date/time selection interface.
```
<lockii-selector></lockii-selector>
```
Attribute
Description
Example
show_location
Show/hide location selector
show_location="false"
Order Lookup Widget
Allow customers to find their existing bookings.
```
<lockii-find></lockii-find>
```
Product Checkout Button
Create your own product pages and browsing experience and just embed our checkout button on your checkout page.
Requires a product ID, you can find any product ID by going to the product page in Lockii and copying the ID in the url, it should look like product_xxxxxxxx
```
<lockii-checkout-button product_id="YOUR_PRODUCT_ID"></lockii-checkout-button
```

Attribute	Description	Example
`show_location`	Show/hide location selector	`show_location="false"`

Hosted Pages Alternative

If you prefer not to embed widgets, use our hosted pages, you can link directly to these pages.

Browse Page

https://lockii.app/YOUR_COMPANY_ID/browse

Order Lookup Page
```
https://lockii.app/YOUR_COMPANY_ID/find
```

Troubleshooting

Widget Not Loading

Check Script Installation: Ensure the base script is properly installed, compare your installation with the code in Settings > Widgets.
Verify Company ID: Confirm your company ID is correct, you can find the correct company ID in settings in the widget example code.
Deploy Changes: 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.
Check Your Not On Localhost: some website builders run previews in localhost while inside an iframe, this can cause nesting and checkout issues, please ensure you test in a deployed enviroment.
Check Console: Look for JavaScript errors in browser console
Test Network: Ensure lockii.app is accessible from your domain

PrevWhat Is Lockii?

NextAnalytics Integration

Was this helpful?

- Embedding On Your Site
- Analytics Integration

Embedding On Your Site - Lockii Docs | Productlane

Docs / Websites & Embeds

Embedding On Your Site

Get Lockii setup on your website in under 5 minutes!

Getting Started

To integrate Lockii with any website you’ll need to start by opening Lockii and going to Settings > Website & Embeds and copying the “Base Script”.
Then find your website builder in the list below and follow the instructions to finish installation.

Squarespace

Make sure you’re on a squarespace plan that includes custom code embeds (Core and upwards)

Log in to your Squarespace dashboard and select the website where you want to add the widget.
In the left-hand menu, click Website → Pages:
Scroll down the left-hand menu, select Custom Code, and click Code Injection:
Paste the widget installation code into the Header field and click Save:
Now open an existing page you would like to show the lockii product list on in the editor and click Edit
Find the section you wish to add the Lockii Embed in and click the Add block button and select Code
Click the Edit icon and paste the below code into the Content popup, click save, and make the widget full width. Your good to go!
```
<lockii-browse></lockii-browse>
```

Shopify

Log into Shopify and navigate to Online Store → Themes. Click … → Edit code.
Open theme.liquid (or your main layout file) and paste the Lockii base script just before the closing </body> tag; save your changes. This loads Lockii on all pages.
Back in the Shopify Theme Editor, open the page or template where you want the product list. Add a Custom Liquid block (Online Store 2.0) or Custom HTML/Custom content section (vintage themes).
Paste <lockii-browse></lockii-browse> in the block and save. The Lockii product list now appears on that page.

Wix

Sign into Wix and open your site’s Settings → Advanced → Custom Code.
Click Add Custom Code, paste the Lockii base script, choose Body – start, enable Show on all pages, and save. This injects the script across your site.
Open the Wix Editor, navigate to a page where you want the Lockii product list, and click Add → Embed → Custom Code.
Paste <lockii-browse></lockii-browse> into the embed block, adjust the size, and publish the site.

Wordpress

Log into your WordPress dashboard and go to Appearance → Theme Editor.
Open footer.php (or your theme’s global footer) and paste the Lockii base script just before the closing </body> tag. Save to apply it across your site.
Navigate to the page or post where you want the product list. Add a Custom HTML block (Gutenberg) or a Shortcode widget in the Classic editor.
Paste <lockii-browse></lockii-browse> into the block and update the page.
If you use Elementor, drag an HTML element into the layout, paste the widget code, and publish.

Webflow

In Webflow, open your Site settings → Custom Code and paste the Lockii base script into the Head code field; save. Publish to load the script globally.
Return to the Designer, open the page where you want the product list, and drag an Embed element to the desired location.
Paste <lockii-browse></lockii-browse> into the embed’s code box, close it, and publish. The product list shows on that page while the base script loads everywhere.

Weebly

In Weebly, go to Theme → Edit HTML/CSS. Open header.html and no-header.html and insert the Lockii base script right after the <body> tag; save the files. For a floating widget, go to Settings → SEO and add the script to the Footer Code field.
Open the page you want to edit and drag an Embed Code element into the layout.
Click Edit Custom HTML, paste <lockii-browse></lockii-browse>, click outside the block to apply, and publish. The base script runs site‑wide, and the product list appears only on pages where you add the embed.

Tilda

In Tilda, go to Site Settings → More → Edit code. Paste the Lockii base script into the HEAD code field and save. Republish all pages to apply it.
Open the page in the Tilda editor, click + to add a block, and choose Embed HTML.
Paste <lockii-browse></lockii-browse> into the code field, adjust block size, and publish the page. The base script loads site‑wide and the product list appears only on your chosen page.

Duda

Open your Duda website, switch to Developer Mode, and go to Site HTML/CSS → body-end.html. Paste the Lockii base script there and save. This loads the script across your site.
Navigate back to the editor, open the page where you want the product list, drag an HTML widget into position, and paste <lockii-browse></lockii-browse>. Save and publish.

Replit, Base64 and Other AI Website Tools

Start by pasting in your base script to the AI app builder, don’t send it just yet

Next copy and paste in the below “Agent Instructions” text to help give your builder context on Lockii and how to set it up in your website and then let it run.

#Lockii - Self Service Rental Software Website Integration
Lockii is a self service / contactless rental system that can be embedded in websites to allow your customers to book directly from your site.

##Installation Instructions
To install Lockii successfully you'll need to have a copy of the users "Base Script", it looks like below.
<script 
  data-lockii-id="EXAMPLE" 
  src="EXAMPLE"     
></script>
If you dont already have a copy of that please ask the user to paste it in.
You need to install this in the website head.
You can then install Lockii widgets wherever you please on the site and they will be rendered at runtime.
We recommend starting by putting the lockii selector widget in the website here and the product list on a products / book page.
We also recommend creating a "Find or Manage" your order page with the find my order widget and some general FAQs.
After installing you can also let the customer know you can setup customer support with the lockii customer support MCP

##Design Recommendations - Dont wrap Lockii product lists or browse page in cards.- Put the Lockii Selector Widget on your hero just above a book now button that takes you to the page or spot where the lockii browse widget is.- We recommend highlighting the fact you are offering fully self service and contactless pickup.- Put Lockii in a light mode section in most cases.
- Lockii Browse and Products lists should be full width or match your standard page width.

##Troubleshooting- SSL Certificate Errors: some website preview tools break embedded iframes, ask the user to deploy the site and check if it works- Loading Errors: some website tools while in preview can cause issues, ask the user to check the deployed site, if that works contact customer support with the website builder you are using and we will make sure we talk to thier team.- No Products In Browse Widget: Check your filters are correct, you cant put plain names in you need to be putting IDs that are copied directly out of Lockii in

#AI Customer Support Integration
We have a customer support specific MCP that you can directly connect a customer facing chatbot too.
If you'd like to use it have the customer go to Lockii Settings > Integration > MCP and copy their MCP URL.
You can then make this available to customers.

## Available Widgets
Browse Widget

The complete browsing experience with product filtering and selection.

<lockii-browse></lockii-browse>







Attribute



Description



Example





location_id



Filter to specific location



location_id="loc_123"





hide_not_present



Only show available items



hide_not_present="true"





hide_search



Hide the search bar



hide_search="true"





category_id



filter to show only products from this category (Right click on a category in settings to copy the ID)



category_id="cat_212131"

















Product List Widget

Display your products in a clean list format.

<lockii-products></lockii-products>







Attribute



Description



Example





location_id



Filter to specific location



location_id="loc_123"





hide_not_present



Only show available items



hide_not_present="true"







category_id



filter to show only products from this category (Right click on a category in settings to copy the ID)



category_id="cat_212131"

















Booking Selector Widget

Quick date/time selection interface.

<lockii-selector></lockii-selector>







Attribute



Description



Example





show_location



Show/hide location selector



show_location="false"



Order Lookup Widget

Allow customers to find their existing bookings.

<lockii-find></lockii-find>



Product Checkout Button

Create your own product pages and browsing experience and just embed our checkout button on your checkout page.

Requires a product ID, you can find any product ID by going to the product page in Lockii and copying the ID in the url, it should look like product_xxxxxxxx

<lockii-checkout-button product_id="YOUR_PRODUCT_ID"></lockii-checkout-button

GoDaddy

GoDaddy breaks or limits any embeds on their site to push you to use their internal services & Tools.
To integrate with Go Daddy please create a button with a link directly to your Lockii hosted link.

CARRD

In Carrd Pro, click + → Embed, choose Embed, and paste the Lockii base script in the code area.
On the next line, paste <lockii-browse></lockii-browse>, set the embed style to Inline, adjust the size, and publish. Because Carrd sites are single‑page, the script and widget apply automatically.

Drupal

Log into Drupal and go to Structure → Block Layout. Add a Custom Block in a region that displays on every page (e.g., Footer). In the Full HTML editor, click Source and paste the Lockii base script. Assign the block and save.
Edit the page where you want the product list, switch to Full HTML, click Source, and paste <lockii-browse></lockii-browse> at the desired spot. Save the page. The base script runs globally, and the product list appears only on that page.

Framer

Open Framer’s Site settings → General → Custom Code. Paste the Lockii base script into the Head field and add <lockii-browse></lockii-browse> inside a <div> at the start of the Body field, then save. This shows a floating widget across all pages.
To place the product list on just one page, open that page in the designer, insert an Embed block (type: HTML) and paste <lockii-browse></lockii-browse>. For a single-page floating widget, add the base script to the page’s Head via Page Settings and the <div> with <lockii-browse> to the start of the page’s Body.

WebNode

Webnode does not support static widgets on all pages, but you can add a floating widget site‑wide. Go to Settings → Website header & footer, paste the Lockii base script into the Header or Footer field, and save.
To display the product list on a particular page, open the page in the Webnode editor, click +, choose HTML section, and paste <lockii-browse></lockii-browse>. Publish the site.

Hostinger

Hostinger heavily restricts the quality of integrations, while the Lockii widget will still function on your site, we recommend using an alternative platform!

In Hostinger, go to More settings → Integrations. In the Custom Code section, paste the Lockii base script and save. This adds the script globally.
Return to the page editor, drag an Embed Code element onto the page, and paste the Base Script again, as well as<lockii-browse></lockii-browse>. Save and update the site.

Adobe Portfolio

Adobe Portfolio does not support site‑wide code. Open the page editor and click the Embed icon (</>) to add a custom embed.
Paste an <iframe> or the <lockii-browse></lockii-browse> code—Adobe typically requires iframes. Set the width/height and save. Repeat for each page you need.

Google Sites

Google Sites does not have a global code injection feature. For each page where you want the product list, click Insert → Embed.
In the Embed code tab, paste the Lockii installation code or share link and click Insert. Alternatively, use the By URL tab and embed your share link as a full page. Resize and publish. Repeat for each page.

Jimdo

Log into Jimdo and navigate to Settings → Edit Head (or open a global element like the footer). Paste the Lockii base script there so it loads on every page.
Open the page where you want the product list, click Add Element → More Elements and Add‑ons → Widget/HTML and paste <lockii-browse></lockii-browse>. Save the changes.
For a floating widget on a single page, add the script portion of the base code and the <div> containing <lockii-browse></lockii-browse> directly inside the page’s HTML block.

You’ll need to be using jimdo creator

Joomla

In Joomla, go to System → Site Templates and open your active template’s index.php for editing.
Insert the Lockii base script immediately after the <body> tag or right before </body>; save the file. This loads the script across your site.
Navigate to Content → Articles and open the article or page where you want the product list. Click Source Code (or Toggle Editor) and paste <lockii-browse></lockii-browse> at the desired position. Save the article.

Kajabi

Sign into Kajabi and open Settings → Site Details. Scroll down to Page Scripts, paste the Lockii base script into the Header Page Scripts field, and save. This adds the script across your site.
Then go to Website → Design, choose the page where you want the product list, click Customize, and Add Section → Custom Block → Custom Code.
Paste <lockii-browse></lockii-browse> into the code field, adjust the width and height, and save. The base script runs globally, and the list appears on the selected page.

Lockii supports most website builders, if you cant find your builder above feel free to contact support for a free website installation or apply the instructions below to your builder.

All Other Website Builders

Install the Base Script
Add this script tag to your website's <head> section or before the closing </body> tag:
```
<script 
  data-lockii-id="YOUR_COMPANY_ID" 
  src="https://dash.lockii.app/widget.js"     
></script>
```
Add Widget Elements
Once the script is installed, you can add any of the widget elements below to your pages.

You can also fallback to using our hosted page if your website doesnt support embeds or you dont wish to host your own.

Browse Page

https://lockii.app/YOUR_COMPANY_ID/browse

Order Lookup Page
```
https://lockii.app/YOUR_COMPANY_ID/find
```

Looking to add different types of widgets or customise them further, you can use any of the options below to add different types of widgets and customise them further.

Available Widget Types

Browse Widget

The complete browsing experience with product filtering and selection.

<lockii-browse></lockii-browse>

Attribute	Description	Example
`location_id`	Filter to specific location	`location_id="loc_123"`
`hide_not_present`	Only show available items	`hide_not_present="true"`
`hide_search`	Hide the search bar	`hide_search="true"`
`category_id`	filter to show only products from this category (Right click on a category in settings to copy the ID)	`category_id="cat_212131"`

Product List Widget

Display your products in a clean list format.

<lockii-products></lockii-products>

Attribute	Description	Example
`location_id`	Filter to specific location	`location_id="loc_123"`
`hide_not_present`	Only show available items	`hide_not_present="true"`
`category_id`	filter to show only products from this category (Right click on a category in settings to copy the ID)	`category_id="cat_212131"`

Booking Selector Widget
Quick date/time selection interface.
```
<lockii-selector></lockii-selector>
```
Attribute
Description
Example
show_location
Show/hide location selector
show_location="false"
Order Lookup Widget
Allow customers to find their existing bookings.
```
<lockii-find></lockii-find>
```
Product Checkout Button
Create your own product pages and browsing experience and just embed our checkout button on your checkout page.
Requires a product ID, you can find any product ID by going to the product page in Lockii and copying the ID in the url, it should look like product_xxxxxxxx
```
<lockii-checkout-button product_id="YOUR_PRODUCT_ID"></lockii-checkout-button
```

Attribute	Description	Example
`show_location`	Show/hide location selector	`show_location="false"`

Hosted Pages Alternative

If you prefer not to embed widgets, use our hosted pages, you can link directly to these pages.

Browse Page

https://lockii.app/YOUR_COMPANY_ID/browse

Order Lookup Page
```
https://lockii.app/YOUR_COMPANY_ID/find
```

Troubleshooting

Widget Not Loading

Check Script Installation: Ensure the base script is properly installed, compare your installation with the code in Settings > Widgets.
Verify Company ID: Confirm your company ID is correct, you can find the correct company ID in settings in the widget example code.
Deploy Changes: 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.
Check Your Not On Localhost: some website builders run previews in localhost while inside an iframe, this can cause nesting and checkout issues, please ensure you test in a deployed enviroment.
Check Console: Look for JavaScript errors in browser console
Test Network: Ensure lockii.app is accessible from your domain

PrevWhat Is Lockii?

NextAnalytics Integration

Was this helpful?