Getting started
Install the Harlo widget
Add Harlo to your website so visitors can ask questions, get answers, and share their details when they want follow-up.
Covered in this guide
Before you finish
Use the exact install code from your Harlo dashboard.
Test the widget on the pages where customers are most likely to ask questions.
Ask a real customer question from the live website.
Install code
Add Harlo across your website
Whole-site install code
Use one snippet across your website. Harlo chooses the right agent or hides the widget based on your page routing settings.
<script src="https://www.harloai.co/widget.js" data-harlo-organization="YOUR_ORGANIZATION_ID" async></script>No-code guides
Choose your website builder
WordPress
Add Harlo to WordPress with a simple plugin, then check the live site to make sure the chat button appears.
Wix
Add Harlo through Wix Custom Code, choose where it should appear, and publish the site.
Squarespace
Install Harlo from Squarespace Code Injection so the chat widget loads on your published pages.
Webflow
Add Harlo through Webflow Site settings so it loads on the published site, or add it to only one page when needed.
Shopify
Place Harlo in your Shopify theme so it appears on the customer-facing storefront.
Framer
Add Harlo from Framer Project Settings with Custom Code, then publish and test the live site.
Workflow
Follow the setup step by step
Copy your install code
Open Dashboard -> Widget and copy the install code for your whole website.
Add it to your website
Paste the code into your website builder, footer area, or custom code section.
Approve your website
Add your live website domain in Builder so Harlo knows where the widget is allowed to appear.
Test as a visitor
Open your site, ask realistic customer questions, and confirm Harlo records conversations and leads correctly.
Reference
Key areas to understand
WordPress
Use the WordPress guide when you want a plugin-based install through WPCode or a similar header/footer manager.
Wix
Use the Wix guide to add Harlo from Dashboard -> Settings -> Custom Code and place it at the end of the body.
Squarespace
Use the Squarespace guide to paste Harlo in the Code Injection Footer field so it loads across the site.
Webflow
Use the Webflow guide for site-level Footer Code, or page-level custom code when only a few pages need Harlo.
Shopify
Use the Shopify guide to place Harlo above the closing body tag in theme.liquid after duplicating the live theme.
Framer
Use the Framer guide to add Harlo from Project Settings -> Custom Code and publish the site.