Hazelchat for Webflow

Add Hazelchat's chat agent to a Webflow site without pasting code. Hazelchat answers your visitors from your own published pages and documents, and shows the sources under every answer.

What you need

• A Webflow site on a plan that allows custom code, so that code added by apps runs on the published site. Check your plan under Site settings → Plans in Webflow.
• Permission to install apps in the site's Webflow workspace, and to publish the site.
• A Hazelchat account. If you start from the Webflow Marketplace, you can create it with Continue with Webflow: Webflow confirms your email address and you choose a password. You can also sign up with your email address.

Add Hazelchat to your Webflow site

1. Install Hazelchat from the Webflow Marketplace and choose Continue with Webflow, or, if you already use Hazelchat, sign in, open Website → Install on your website and choose Continue setup. Choose Webflow and click Connect Webflow.
2. Webflow asks you to approve Hazelchat. Choose your site and click Authorize App. Back in Hazelchat, choose the site on the Which site? screen if you approved more than one.
3. Add your content. The setup guide lists your connected site's published pages and CMS items, read through Webflow, with the main pages ticked. Keep the pages Hazelchat may answer from and continue. You can also add documents and written answers.
4. Check the name and privacy details Hazelchat suggests, then try a few questions.
5. Click Add and publish. Hazelchat adds its script to your site's custom code and publishes the site through Webflow, so the script reaches visitors. A Webflow publish also publishes any other unpublished changes you made in the Designer. To publish yourself instead, choose Add without publishing and publish the site in Webflow. A connection approved before 4 October 2026 cannot publish: publish in Webflow, or connect Webflow again to allow it.
6. Back in Hazelchat, review the saved website and click Publish and switch on (or Switch on for an unchanged published agent). If Hazelchat is already on and needs fresh verification after a key update, choose Check installation. Hazelchat checks the script before making the agent visible. Choose Open your website on the next screen. This starts the website test and opens your page. Ask a question in the chat, return to Hazelchat, then click Yes, I saw this answer. Hazelchat checks for the answer when you return; it never confirms it for you.

If your site shows the "Made in Webflow" badge in the bottom-right corner, place the chat on the left under Website → Appearance so the two do not overlap.

What the app can access

You approve these permissions in Webflow when you connect:

• Read site data: the names and addresses of the sites you approve, so you can choose one.
• Read and edit custom code: to add, update and remove Hazelchat's own script on the site you choose.
• Publish your site: only when you click Add and publish or Publish in Hazelchat, so the script goes live.
• Read pages and CMS content: the text of your published pages and published CMS items, read only when you add your site's pages in Hazelchat.
• Read your Webflow user: your name and email address, used only when you create your Hazelchat account with Continue with Webflow.

Hazelchat does not read forms or form submissions, never changes your design, and publishes your site only when you click a publish button in Hazelchat.

How Hazelchat reads your Webflow content

For a site connected to Webflow, Hazelchat does not fetch your website. When you add your website's pages, Hazelchat asks Webflow's API for the site's published pages and published CMS items and lists them for you. You tick the pages it may use. Hazelchat then reads the text of only those pages and items through Webflow and adds them to your agent's draft. Nothing reaches visitors until you review it and publish a version in Hazelchat.

Hazelchat keeps that text in your workspace to answer visitors on your own site, and shows it to you under Sources, where you can edit or remove it. It is not shared with other customers or used for anything else. Removing a source, or closing your Hazelchat account, deletes it. Text in Webflow components that a page does not override is not included; add that content as a written answer if visitors need it.

The script Hazelchat adds

The app adds one script to your site's footer through Webflow's custom code: https://app.hazelchat.co/embed/webflow-widget-v3.js, with an integrity hash and your public widget key. It shows the chat button and the chat window on your pages, but only once Hazelchat confirms that your agent is published, switched on and allowed on that website. Until then, and whenever that stops being true, visitors see nothing. The chat runs on your page itself: it loads no frame and no other code, and it contacts app.hazelchat.co only to load your agent's published settings, to ask whether the chat may appear on that website, and to send visitors' questions and enquiries. That file never changes. A new version gets a new address, and Hazelchat offers Update the script; you then publish your site. The chat works only on websites you have verified in Hazelchat.

Removing the script, or disconnecting Webflow, removes it from your site's custom code; publish your site afterwards. Only if the business has set up opener messages does the chat keep two flags in the visitor's session storage, so that an opener appears once per visit. If your site sends a Content-Security-Policy, allow https://app.hazelchat.co in script-src and connect-src.

How your website is verified

Hazelchat serves the chat only on websites whose ownership is proven. For Webflow, the proof is the script itself: after the site is published, Publish and switch on loads your published site and looks for Hazelchat's script with your widget key. Connecting Webflow does not count as proof on its own. If the check cannot read your site, a DNS record or a verification file under Website → Website settings works too. Hazelchat repeats the check every seven days.

Change, remove or disconnect

• New widget key: if you rotate your widget key in Hazelchat, the card offers Update the script. Publish your site afterwards, in Hazelchat or in Webflow.
• New script version: Hazelchat offers Update the script. The old version keeps running until you update and publish your site. Earlier versions show the chat button even while your agent is switched off; the current version keeps it hidden until the agent can answer there.
• Remove the script: under Website → Install on your website → Manage installation → Webflow connection, open Remove or disconnect and click Remove the script, then publish in Webflow.
• Disconnect Webflow: removes the script, asks Webflow to revoke Hazelchat's access and deletes the stored access in Hazelchat. Publish in Webflow afterwards.
• Uninstall in Webflow: removing the app in your Webflow workspace settings ends Hazelchat's access. Check Site settings → Custom code → Code added by Apps for any remaining Hazelchat script, remove it if needed, and publish your site. Hazelchat checks regularly whether Webflow still accepts the connection and deletes its stored access once Webflow refuses it.
• Close your Hazelchat account: deletes the stored access and your content with your workspace. The script stays on your site until you remove it, and the chat no longer appears because there is no agent to load. Remove it under Site settings → Custom code → Code added by Apps in Webflow, then publish.

Plans and AI answers

The Webflow app costs nothing extra. Hazelchat's Free plan includes 50 answers a month for one verified website, answered with the recommended AI model, enquiries saved in your workspace, and "Powered by Hazelchat" on the chat. Paid plans add more answers, a choice of AI models and an email for every new enquiry; Business and Scale add more websites and remove the Hazelchat branding. Prices and limits are on the pricing page.

Answers are written by an AI model from the content you approved, and the sources are shown under every answer. If the AI service is unavailable, the chat shows the matching passages from your content instead. The Hazelchat dashboard, this guide and support are in English.

Privacy and data

Hazelchat stores Webflow's access token encrypted and uses it only for the actions above. Details are in the privacy notice. For the chat on your site, the data processing agreement applies.

Help

Email hello@hazelchat.co. We answer within one business day.