Project custom code

Install Harlo on Framer

Add Harlo from Framer Project Settings with Custom Code, then publish and test the live site.

Copy install code Platform docs

Framer

Custom code area

Ready

Placement

Footer / Body end

Scope

All pages or selected high-intent pages

Publish

Save changes, publish, then test live

Harlo snippet

<script src="https://www.harloai.co/widget.js" data-harlo-organization="YOUR_ORGANIZATION_ID" async></script>

Before you start

Get the install ready

You do not need to write code for this install. Copy the Harlo snippet from your dashboard, paste it exactly where the guide says, then publish your site.

Copy the Harlo install code from Dashboard -> Widget.

Open the Framer project where the live domain is managed.

Decide whether Harlo should run on every page or only selected pages.

Step by step

Add Harlo in Framer

Open Project Settings

In Framer, open Project Settings for the website.

Open Custom Code

Select Custom Code in the left sidebar, then create a new script with Add Script or the plus button.

Name and paste the script

Name the script Harlo widget and paste the full Harlo code into the code field.

Choose placement and scope

Place the script at the end of the body when that option is available. Select all pages unless Harlo should only appear on specific pages.

Choose Once for a normal chat widget install.

If Harlo appears only on the first route after publish, switch the script to run on every page visit.

Publish and test

Publish the site, open the live domain, and confirm the Harlo chat button appears after the page loads.

Verification

Confirm the widget is live

Open the published Framer domain, not only the canvas preview.

Navigate between pages and confirm Harlo remains available.

Ask a test question and confirm the chat appears in Harlo.

Troubleshooting

Fix the usual issues

The widget does not appear in preview

Publish the site and test the public URL. Custom code is most reliable on published Framer pages.

It disappears after client-side navigation

Change the script execution option from Once to Run on every page visit.

Only some pages should show Harlo

Edit the custom code scope and select only the desired pages.