Copy the Harlo install code from Dashboard -> Widget.
Site-level footer code
Install Harlo on Webflow
Add Harlo through Webflow Site settings so it loads on the published site, or add it to only one page when needed.
Webflow
Custom code area
Placement
Footer / Body end
Scope
All pages or selected high-intent pages
Publish
Save changes, publish, then test live
<script src="https://www.harloai.co/widget.js" data-harlo-organization="YOUR_ORGANIZATION_ID" async></script>Before you start
Get the install ready
Make sure the Webflow site has custom code available on its site plan.
Decide whether Harlo should load site-wide or only on selected pages.
Step by step
Add Harlo in Webflow
Open Site settings
From the Webflow dashboard, choose the site and open Site settings.
Go to Custom code
Choose the Custom code tab. Use site-level custom code if Harlo should appear on every page.
Paste in Footer code
Paste the full Harlo code into Footer code so it loads after the page content.
Save and publish
Save the custom code changes and publish to staging or production. Webflow custom code usually needs a published page before it works fully.
Test route changes
Open the live site, visit a few pages, and confirm the Harlo chat button stays available where expected.
Verification
Confirm the widget is live
Publish, then open the staging or production URL.
Check a static page and a CMS page if the site uses CMS templates.
Ask a test question and confirm it appears in Harlo.
Troubleshooting
Fix the usual issues
The widget is missing in Designer preview
Publish to staging or production and test there. Some custom code does not fully run in the Designer.
CMS pages do not show Harlo
Use site-level Footer code for all pages, or add the snippet to the CMS template's custom code area.
Only one page should have Harlo
Move the snippet from Site settings to that page's custom code field.