Use this if you are building or have already built a basic rental website with Claude Code, ChatGPT, Cursor, or another AI coding tool.

1. Start by copying your Base Script from Settings > Website & Embeds. Paste it into Claude Code, ChatGPT, or your AI builder, don’t send it just yet.

2. Next copy and paste in the below “Agent Instructions” and tell the tool you want a basic site: a home page, a book page, and a page to manage a booking. Then let it run.

   # Goal
   Build a basic rental website around Lockii. Keep it simple, this is for someone who wants a working site to take bookings, not a large marketing site.
   
   Pages to create:
   - Home: hero, lockii selector, a Book Now button, and a short note that pickup is fully self service and contactless
   - Book / Products: full width lockii browse widget
   - Manage booking: lockii account widget plus a few FAQs
   - Header: business name, Book, Manage booking, and a lockii account button
   
   Do not add a blog, shop, or extra design system unless the user asks. Ask for their Base Script before you start. If they give a business name and what they hire, use that in the copy. If they don't, keep the copy generic.
   
   #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 on the homepage hero just above a book now button that takes you to the browse widget, the product list / browse widget on a products / book page, and a "Find or Manage" your order page with the account widget and some general FAQs.
   Put a lockii account button in the site header so customers can open their bookings.
   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.
   - Give the account widget as much height and width as possible, it manages its own padding.
   
   ##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
   - Don't test on localhost inside an iframe, publish the site and check the live URL
   
   #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 > Integrations > Customer Support 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>
   
   Customer Account Widget
   
   Full account page for existing bookings. Give this widget as much height and width as possible, it manages its own padding.
   
   <lockii-account></lockii-account>
   
   Account Button
   
   A header button that opens the customer account in a popup.
   
   <lockii-account-button label="My bookings"></lockii-account-button>
   
   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>
   
   location_id
   Optional, pre-set the location
   location_id="loc_123"
   
   ## More Details
   Need to customise your booking experience further / completely.
   Lockii makes a complete headless store API available.
   help.lockii.app has more details however we it is not recommended for people without developer experience.
   

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

1. Log in to your Squarespace dashboard and select the website where you want to add the widget.

2. In the left-hand menu, click Website → Pages:

3. Scroll down the left-hand menu, select Custom Code, and click Code Injection:

4. Paste the widget installation code into the Header field and click Save:

5. Now open an existing page you would like to show the lockii product list on in the editor and click Edit

6. Find the section you wish to add the Lockii Embed in and click the Add block button and select Code

7. 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>

1. Log into Shopify and navigate to Online Store → Themes. Click … → Edit code.

2. 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.

3. 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).

4. Paste <lockii-browse></lockii-browse> in the block and save. The Lockii product list now appears on that page.

1. Wix blocks 3rd party widgets in an attempt to make you use their internal tools, We would recommend switching to a more customer friendly website builder like Squarespace, Duda or for more technical users, Webflow.

   Alternatively, you can place buttons on your site that link to our hosted booking pages.

1. Log into your WordPress dashboard and go to Appearance → Theme Editor.

2. 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.

3. 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.

4. Paste <lockii-browse></lockii-browse> into the block and update the page.

5. If you use Elementor, drag an HTML element into the layout, paste the widget code, and publish.

1. 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.

2. Return to the Designer, open the page where you want the product list, and drag an Embed element to the desired location.

3. 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.

1. 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.

2. Open the page you want to edit and drag an Embed Code element into the layout.

3. 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.

1. 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.

2. Open the page in the Tilda editor, click + to add a block, and choose Embed HTML.

3. 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.

1. 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.

2. 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.

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

2. 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 on the homepage hero just above a book now button that takes you to the browse widget, the product list / browse widget on a products / book page, and a "Find or Manage" your order page with the account widget and some general FAQs.
   Put a lockii account button in the site header so customers can open their bookings.
   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.
   - Give the account widget as much height and width as possible, it manages its own padding.
   
   ##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
   - Don't test on localhost inside an iframe, publish the site and check the live URL
   
   #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 > Integrations > Customer Support 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>
   
   Customer Account Widget
   
   Full account page for existing bookings. Give this widget as much height and width as possible, it manages its own padding.
   
   <lockii-account></lockii-account>
   
   Account Button
   
   A header button that opens the customer account in a popup.
   
   <lockii-account-button label="My bookings"></lockii-account-button>
   
   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>
   
   location_id
   Optional, pre-set the location
   location_id="loc_123"
   
   ## More Details
   Need to customise your booking experience further / completely.
   Lockii makes a complete headless store API available.
   help.lockii.app has more details however we it is not recommended for people without developer experience.
   

1. GoDaddy breaks or limits any embeds on their site to push you to use their internal services & Tools.

2. To integrate with Go Daddy please create a button with a link directly to your Lockii hosted link.

1. In Carrd Pro, click + → Embed, choose Embed, and paste the Lockii base script in the code area.

2. 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.

1. 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.

2. 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.

1. 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.

2. 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.

1. 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.

2. 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 heavily restricts the quality of integrations, while the Lockii widget will still function on your site, we recommend using an alternative platform!

1. In Hostinger, go to More settings → Integrations. In the Custom Code section, paste the Lockii base script and save. This adds the script globally.

2. 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.

1. Adobe Portfolio does not support site‑wide code. Open the page editor and click the Embed icon (</>) to add a custom embed.

2. 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.

1. Google Sites does not have a global code injection feature. For each page where you want the product list, click Insert → Embed.

2. 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.

1. 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.

2. 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.

3. 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

1. In Joomla, go to System → Site Templates and open your active template’s index.php for editing.

2. Insert the Lockii base script immediately after the <body> tag or right before </body>; save the file. This loads the script across your site.

3. 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.

1. 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.

2. Then go to Website → Design, choose the page where you want the product list, click Customize, and Add Section → Custom Block → Custom Code.

3. 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.

1. 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>

2. 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.

1. Browse Page

   https://lockii.app/YOUR_COMPANY_ID/browse

2. Order Lookup Page

   https://lockii.app/YOUR_COMPANY_ID/find