To integrate Lokki into your website, add a redirect button: when customers click it, they are taken to your online store. Two versions are available below. Copy the one that best matches your business and paste it into your website.
Redirect button
When customers click the button, they are taken to your Lokki online store. Before pasting the code, replace {online_store_url} with your store URL, available under Settings > Online Store > Contact.
Remove the curly brackets { }, leaving only the URL.
Rental only version
<div style="position: fixed; bottom: 2rem; right: 2rem; width: 30%; max-width: 200px; min-width: 175px; z-index: 200000; background-color: white; border-radius: 10px; box-shadow: 0px 0px 30px rgba(48, 35, 173, 0.15); padding: 15px 20px; text-align: center; line-height: 24px; display: flex; justify-content: space-between; flex-direction: column; font-family: 'Rubik', 'Helvetica', 'sans-serif'"> <span style="color: #8D8AAB; font-weight: 500; border-bottom: 1px solid #E9E7FA; padding-bottom: 6px; font-size: 16px"> BOOK ONLINE </span> <a style="width: 100%; padding: 9px 0px; border-radius: 5px; box-shadow: rgba(48, 35, 173, 0.13) 2px 2px 6px 0px; background-color: #3023ad; border: none; overflow: hidden; text-decoration: none; color: white; font-weight: 500; line-height: 20px; font-size: 16px;" href="{online_store_url}" target="_blank"> Bike Rental </a> </div>
Rental and workshop version
Two buttons: one for rentals and one for repairs. Also replace {workshop_url} with your workshop URL, removing the curly brackets.
<div style="position: fixed; bottom: 2rem; right: 2rem; width: 30%; max-width: 200px; min-width: 175px; height: 130px; z-index: 200000; background-color: white; border-radius: 10px; box-shadow: 0px 0px 30px rgba(48, 35, 173, 0.15); padding: 15px 20px; text-align: center; line-height: 24px; display: flex; justify-content: space-between; flex-direction: column; font-family: 'Rubik', 'Helvetica', 'sans-serif'"> <span style="color: #8D8AAB; font-weight: 500; border-bottom: 1px solid #E9E7FA; padding-bottom: 6px; font-size: 16px"> BOOK ONLINE </span> <a style="width: 100%; padding: 9px 0px; border-radius: 5px; box-shadow: rgba(48, 35, 173, 0.13) 2px 2px 6px 0px; background-color: #3023ad; border: none; overflow: hidden; text-decoration: none; color: white; font-weight: 500; line-height: 20px; font-size: 16px;" href="{online_store_url}" target="_blank"> Bike Rental </a> <a style="width: 100%; padding: 9px 0px; border-radius: 5px; box-shadow: rgba(48, 35, 173, 0.13) 2px 2px 6px 0px; background-color: #2ad29b; border: none; overflow: hidden; text-decoration: none; color: white; font-weight: 500; line-height: 20px; font-size: 16px;" href="{workshop_url}" target="_blank"> Bike Repair </a> </div>
Frequently asked questions
How do I integrate the code into WordPress?
In the WordPress page editor, add a Custom HTML block, paste the Lokki code and publish the page. If your theme does not offer this type of block, look for a Code or Raw HTML option among the available blocks.
How do I integrate the code into Squarespace?
In the Squarespace editor, add a Code block where you want the button to appear on your page, paste the Lokki code and save your changes.
How do I integrate the code into Wix?
In the Wix editor, add an HTML Code element from the Embed section, then paste the Lokki code. If the button is cut off, increase the height of the block in the element settings. You can also follow the video at the bottom of this article.
Where can I find my online store URL?
Go to Settings > Online Store > Contact. Your store URL is displayed in this subsection. Copy it and replace {online_store_url} in the code, removing the curly brackets.
Can I ask my web agency to handle the integration?
Yes. You can send the code from this article directly to your agency or developer. They only need the code and your online store URL.
✅ Key takeaways
Replace {online_store_url} with the URL available under Settings > Online Store > Contact.
The code works with WordPress, Wix, Squarespace and any CMS that supports custom HTML.