Chat Widget
Add a live chat bubble to your website so customers can message your team in real time
The chat widget is a small bubble that sits on your website and lets customers start a conversation with your team in real time. Messages go straight into your helpdesk — no extra tools required.
When AI is enabled, an AI assistant responds first and hands off to a human agent only when it can't fully resolve the question.
How it works
- A visitor clicks the chat bubble on your site
- The AI assistant attempts to answer from your knowledge base
- If the AI can't resolve it, the conversation escalates — a ticket is created and an agent takes over in the Chat inbox inside your helpdesk
- The customer chats live with the agent until the issue is resolved
Set up the widget
Generate an API key
Go to Settings → Chat Widget and click New Key. Give it a label (e.g. "Main website") so you can identify it later.
When the key is generated it is shown once — copy it immediately. The key itself is never stored; only a secure hash is kept.
Copy your API key as soon as it appears. Once you navigate away you cannot retrieve it — you will need to generate a new one.
Copy the embed snippet
Your embed snippet looks like this:
<script
src="https://esd.elysium.systems/chat-widget/esd-chat-widget.js"
data-org="YOUR_API_KEY"
></script>Replace YOUR_API_KEY with the key you just generated. You can also add optional attributes:
| Attribute | Default | Options |
|---|---|---|
data-position | bottom-right | bottom-right, bottom-left |
data-greeting | Set in widget settings | Any text |
data-primary-color | Your brand colour | Any hex colour, e.g. #4f46e5 |
Full example:
<script
src="https://esd.elysium.systems/chat-widget/esd-chat-widget.js"
data-org="esd_wk_your_key_here"
data-position="bottom-right"
data-greeting="Hi! How can we help you today?"
data-primary-color="#4f46e5"
></script>Add the snippet to your website
Paste the snippet just before the closing </body> tag on every page where you want the chat bubble to appear. If you want it site-wide, add it to your site's global layout or footer template.
- In your WordPress dashboard, go to Appearance → Theme File Editor (or use a plugin like Insert Headers and Footers)
- Open your theme's
footer.php - Paste the snippet just before
</body> - Click Update File
Alternatively, install the free WPCode plugin, go to Code Snippets → Add Snippet, choose HTML Snippet, paste the code, set it to run in the Footer, and save.
- Go to Settings → Advanced → Code Injection
- Paste the snippet in the Footer box
- Click Save
The widget will appear on every page of your site.
- Open your Webflow project and go to Project Settings → Custom Code
- Paste the snippet in the Footer Code field
- Click Save Changes, then publish your site
Open your site's main HTML template (often index.html, base.html, or a shared layout file) and paste the snippet just before the closing </body> tag:
<!-- ESD Chat Widget -->
<script
src="https://esd.elysium.systems/chat-widget/esd-chat-widget.js"
data-org="esd_wk_your_key_here"
></script>
</body>
</html>Save the file and deploy your site as normal.
Configure widget settings
Back in Settings → Chat Widget, configure how the widget behaves:
- Enable live chat — toggles the widget on or off without removing it from your site
- AI first responder — when on, AI attempts to answer before connecting an agent
- Greeting message — the first message visitors see when they open the chat
- Widget position — bottom-right or bottom-left
Click Save settings when done.
Don't manage your own website?
If someone else handles your website — a developer, agency, or IT team — use the Mail to my web developer button in Settings → Chat Widget. It opens a pre-filled email with everything your developer needs: the embed snippet, placement instructions, and a brief explanation of what the widget does.
You can customise the email before sending it.
Revoking a key
If a key is compromised or no longer needed, click Revoke next to it in the key list. The widget will stop loading on any site using that key immediately. Generate a new key and update the snippet if you need to re-enable the widget.
Domain restrictions
By default, your API key works from any domain. Once your site is live you can lock the key to specific domains — contact support to configure this. The widget will only load on approved domains, preventing unauthorised use of your key.
Responding to chats
Live chat sessions appear in the Chat section of your helpdesk sidebar. See the Chat Inbox guide for details on handling sessions, ending conversations, and converting chats to tickets.
Chat messages that escalate to an agent automatically create a ticket. The full AI conversation is attached as an internal note so the agent has full context.