Adding a Hive Chat Widget to a Website
How to create a website embed in your CRM and install it on a WordPress site so visitors can chat with your AI assistant and your team.
Overview
The Hive website widget is a chat bubble you add to any website. When a visitor opens it, an AI assistant answers their questions using the business details and FAQ you provide. When the visitor asks about pricing, requests a booking, or asks to speak with a person, the widget captures their name and email as a lead in your CRM and connects them to your team for a live conversation.
Setting this up is a two-part process. First you create an “embed site” inside the CRM, which holds all the settings for that website and generates a snippet of code. Then you place that snippet on the website. This guide walks through both parts.
|
Before you start: Make sure Pusher and your OpenAI API key are configured in the CRM, and that client/website chat is enabled in Hive → Settings. Without these, the widget will load but the AI and live chat will not work. See the Prerequisites section below. |
Prerequisites
Confirm the following are in place before creating an embed. These are configured once per CRM installation and apply to every embed you create afterward.
-
Pusher credentials — entered under Setup → Settings → Pusher.com. These power the realtime chat.
-
OpenAI API key — entered in the CRM’s OpenAI integration settings. This powers the AI assistant. Without it, the widget skips straight to asking for the visitor’s details.
-
Website chat enabled — check Hive → Settings and make sure the widget options are enabled, then Save.
-
A valid SSL certificate — the CRM domain must use HTTPS with a valid certificate, because browsers on the target website strictly enforce this for cross-site requests.
Part 1 — Create the Embed Site in the CRM
Each website you want a widget on gets its own embed site. This is where you set the business details, the FAQ the AI answers from, the branding, and where new leads should be routed.
Step-by-step
-
In the CRM sidebar, go to Hive → Website Embeds.
-
Click New Embed Site.
-
Fill in the fields described in the table below. At minimum, give it a Label and a Greeting, and add some Approved Answers / FAQ so the AI has something to draw from.
-
Click Create Embed Site. The CRM generates a unique token and the embed snippet for you.
-
Re-open the embed site you just created. At the top of the edit screen you’ll now see the Embed Snippet — a single line of code. You’ll use this in Part 2.
Embed site fields
|
Field |
What it does |
|---|---|
|
Label |
An internal name so you can tell your embeds apart. Not shown to visitors. |
|
Allowed Origin |
The website’s address (e.g. https://www.example.com). Helps restrict the widget to the intended site. |
|
Business Name / Phone / Email / Address |
Used by the AI assistant when answering visitor questions about the business. |
|
Services |
A short list of what the business offers, used as context for the AI. |
|
Approved Answers / FAQ |
The knowledge the AI answers from. Write it as question-and-answer pairs. The more complete this is, the better the AI responds. |
|
Greeting |
The first message the visitor sees when they open the widget. |
|
Offline Message |
Shown when no staff are online to take a live chat. |
|
Scheduler URL |
An optional booking link (e.g. Appointly). When set, the AI offers it on scheduling requests instead of only collecting details. |
|
Lead Source / Status / Default Assignee |
Where captured leads land in the CRM, and which staff member is the fallback owner. |
|
Widget Color |
The accent color of the chat bubble and header. Match it to the website’s branding. |
|
AI Assistant |
Turns the AI answering on or off for this site. |
|
Active |
Turns the whole widget on or off without deleting it. |
|
Tip: You don’t have to fill everything in perfectly the first time. Create the embed, place it on the site, then come back and refine the FAQ and greeting once you see how visitors use it. |
Part 2 — Install the Widget on the Website
The embed snippet is a single line of code that loads the widget. On a WordPress site, the cleanest way to add it is with a free plugin called Code Snippets, which lets you insert it once, site-wide, without editing theme files.
|
Why not edit the theme directly? Editing a theme’s footer.php works, but a theme update can erase your change, and one typo can break the site. A snippet plugin survives updates and is safer for non-developers. |
Copy the snippet
-
In the CRM, open Hive → Website Embeds and click the embed site you created.
-
Find the Embed Snippet box at the top. Click inside it to select the code, then copy it. It looks like this (your token will differ):
<script src="https://your-crm-domain.com/modules/hive/assets/js/embed.js" data-hive-token="YOUR_TOKEN" async></script>
Install Code Snippets (if not already installed)
-
In WordPress admin, go to Plugins → Add New.
-
Search for Code Snippets, then Install and Activate it.
Add the snippet
-
In the WordPress sidebar, open Snippets → Add New.
-
Give it a name like “Hive Chat Widget”.
-
Choose the Content (HTML) snippet type — the one with the orange HTML badge. Do not use the PHP / Functions type.
-
Paste the embed snippet into the snippet content box exactly as copied.
-
Set the location to Site Footer (end of <body>). This is important — the widget loads at the bottom of the page so it doesn’t slow down loading.
-
Click Save and Activate.
-
Visit the website (refresh if it’s already open). The chat bubble should appear in the bottom-right corner.
Verify It Works
Run through the full visitor experience on the live site to confirm everything is connected:
-
Open the chat bubble — the greeting you set should appear.
-
Ask a question your FAQ covers — the AI should answer from it.
-
Type something like “I’d like to speak to someone” — the widget should ask for the visitor’s name and email.
-
Submit those details — a new lead should appear in the CRM’s Leads list.
-
In the CRM, open Hive → Chat and click the Website tab — the visitor’s conversation should be there. Reply, and your message should appear back in the widget.
Troubleshooting
|
Symptom |
Likely cause & fix |
|---|---|
|
No chat bubble appears |
Confirm the snippet is set to the Content (HTML) type, placed in the Site Footer, and Activated. Check the embed site is marked Active in the CRM. |
|
Bubble appears but no greeting |
The site session couldn’t start — usually Pusher isn’t configured, or the CRM domain’s SSL certificate is invalid. Confirm both. |
|
AI doesn’t answer, jumps straight to asking for details |
The OpenAI API key isn’t set in the CRM, or AI Assistant is disabled on this embed site. |
|
The form won’t submit |
Usually the visitor session didn’t start (see “no greeting” above). Once the greeting works, the form will submit. |
|
Staff reply doesn’t reach the widget |
Confirm Pusher credentials are entered in the CRM. The widget also polls every few seconds as a backup, so replies should arrive within moments. |
Need more help? Contact your CRM administrator with a screenshot of the website and, if possible, the browser console (press F12, open the Console tab) so the exact error can be identified.