Add Hazelchat to your Webnode site
What you need
- A Webnode site on the Standard, Profi or Business plan. Webnode offers site-wide code only on these premium plans.
- A Hazelchat account with an agent you have tried in the workspace. You can start free.
Add the code
- In Hazelchat, open the install step (Install in setup, or Website → Install on your website), choose Something else and click Copy the code. It is one line with your own widget key:
<script src="https://app.hazelchat.co/widget.js" data-agent="YOUR-WIDGET-KEY" defer></script> - In Webnode, click Settings, then Website Settings.
- Find Website header and footer (Webnode’s help also calls it HTML header/footer) and paste the line into Website header HTML code.
- Click Save, then publish your website.
- Back in Hazelchat, enter your website’s address and click I’ve added the code.
- Click Publish and switch on (or Switch on if your agent is already published). Hazelchat first looks for the code on your website and only then makes the chat visible.
- Open your website, refresh it, ask the chat a question a visitor would ask, then return to Hazelchat and click Yes, I saw this answer.
These steps follow Webnode’s own help (Add HTML into the header and Restrict HTML code for cookie settings), read on 14 October 2026. We have not yet tested Hazelchat on Webnode ourselves. If a menu looks different, Webnode’s page is the up-to-date one.
Check it works
- Open the published site: Webnode shows custom HTML only there, not in the editor.
- View the page source and look for the Hazelchat line in the head of the page. It ends with
defer, so the chat starts after the page has loaded.
Webnode’s help says this code goes into the page itself, so Hazelchat’s check can find it when you switch the chat on. If your home page does not carry the code, enter the page that does under Installation troubleshooting → Page the script is on.
Common problems
- One page only. Each page has its own custom header code in its SEO settings. Use the website-wide field so the chat is on every page.
- Wrapped in a cookie condition. Hazelchat’s check may not see code wrapped in Webnode’s cookie tags. If the check fails, prove your website under Website settings in Hazelchat with a DNS record instead.
- “The install script was not found on the page.” Check that you published the change in Webnode and that the line is complete, with your own key, then try again in Hazelchat.
Visitor consent
Webnode’s cookie bar (Settings → Website Settings → Cookie bar management) holds back only code you wrap in its tags, for example {IF_ACCEPTED_FUNCTIONAL_COOKIES} before the line and {/IF_ACCEPTED_FUNCTIONAL_COOKIES} after it. Unwrapped code runs for every visitor.
To keep the chat closed until a visitor agrees, add data-require-consent="true" to the line, before defer. The chat then waits until your consent tool sends:
window.dispatchEvent(new CustomEvent('hazelchat-consent', { detail: true }));
Send detail: false when a visitor withdraws consent. With this option and no event, no chat appears, so test it on your published site.
Remove Hazelchat
- Open Settings → Website Settings → Website header and footer, delete the line, save and publish.
- To hide the chat everywhere at once without touching your site, switch Hazelchat off on its Website page. The line then stays on your pages but shows nothing.
Help
For Webnode itself, use Webnode Support. For anything in Hazelchat, email hello@hazelchat.co. We answer within one business day. Other ways to install Hazelchat.