Add an AI chat agent to your Showit site
What visitors ask before they enquire
Many Showit sites belong to photographers, planners and other wedding pros. Their visitors ask the same things again and again:
- “What’s included in your full-day wedding package?”
- “Do you charge a travel fee outside the city?”
- “How many photos do we get, and how soon?”
- “Are you free on our date next June?”
The chat answers from your own pages and price guide, with a link to where it found the answer, and checks every price and number against them first. If your pages don’t say, it doesn’t guess.
It cannot see your calendar. When your pages have no answer, as with a date, it offers your enquiry form or booking page instead. Prices only on request? Leave them out of what the chat may use, and those questions go to your enquiry form too.
Send visitors to your enquiry form or booking page
- In Hazelchat, open Behaviour → Actions. Under Next step, choose Send an enquiry or Book a meeting and enter your Showit contact page or your booking page as the Destination URL. The chat offers it when a visitor asks about booking or getting in touch, and whenever it has no answer.
- Under Handoff, switch on Let visitors leave an enquiry to take a name, email and message in the chat itself. They arrive under Enquiries, and you reply from your own email.
What you need
- A Showit site with at least one Site Canvas Set. Showit applies global code only to pages that use a set (see Common problems if you have none). Showit’s help names no plan for custom code.
- Nothing extra for the blog: its posts are built from your Showit blog templates, so no WordPress plugin is needed, on the Basic Starter Blog or the Advanced Blog.
- A Hazelchat account with an agent you have tried in the workspace. You can start free.
Add the code
- In Hazelchat, open Install in setup, or later Website → Install on your website → Continue setup. Choose Something else and Continue, then open 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 the Showit Design App, open Site Settings, go to the Integrations tab and choose + Add Custom Code.
- Name it Hazelchat and paste the line. Under Add Code To, choose the head of the page if Showit offers it; the line also works further down the page.
- Under Site Canvas Sets, pick every set your pages and blog templates use, then publish your design.
- 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 Showit’s own help (Global Custom Code, Site Canvas Sets, Can I add custom HTML code into my site’s head section? and EU Cookie Law), read on 22 October 2026. We have not yet tested Hazelchat on Showit ourselves. If a menu looks different, Showit’s page is the up-to-date one.
Check it works
- Open your published site in a private window and view the page source: the Hazelchat line is there. Open a blog post and check it too.
- Hazelchat’s line ends with
defer, so the chat starts after the page has loaded, wherever Showit places it.
Showit’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 Manage installation → Installation troubleshooting → Page the script is on.
Common problems
- No Site Canvas Set in your design. Showit’s global code then does nothing. Create a set at the bottom of the Site tab, or paste the line into each page’s own Custom Head HTML: select the page name (not a canvas), open Advanced Settings, paste, Save and publish.
- The chat is on your pages but not on blog posts. A blog template that uses no chosen set misses the code. Open the template, pick the set under Template Info, or paste the line into its Custom Head HTML, then publish.
- The line is in more than one place. That is harmless: the chat appears once per page.
- “The install script was not found on the page.” Check that you published the change in Showit and that the line is complete, with your own key, then try again in Hazelchat.
Visitor consent
If your cookie banner has a service named Hazelchat, the chat follows it, with no code. Which banners.
Showit’s help suggests adding a cookie banner with code, such as Cookie Consent by WebsitePolicies or iubenda, to each page and blog template. Global code runs for every visitor unless your banner holds it back.
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 Site Settings → Integrations, delete the Hazelchat code and publish. If you also pasted the line into a page’s or blog template’s Custom Head HTML, delete it there too.
- 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 Showit itself, use Showit’s Help Center. For anything in Hazelchat, email hello@hazelchat.co. We answer within one business day. Other ways to install Hazelchat.