Live Chat Widget
One script tag on your site, and every visitor conversation lands in your Live Chat agent dashboard.
Integrator guide, document version 1.3.
1. How It Works
The snippet loads a small script that injects a chat bubble into your page as an iframe. No account, password, or SDK install is needed on your side — the widget figures out which company (tenant) it belongs to from your website's own domain.
| 1 | You add the snippet to your site's HTML. |
|---|---|
| 2 | A visitor opens the bubble and sends a message. |
| 3 | The message is saved and pushed in real time to your team's agent dashboard. |
| 4 | An agent replies from https://chat.enopsy.com — the visitor sees the reply instantly. |
2. Before You Install — Your Domain Must Be Registered
The widget identifies your company by matching your website's domain against a registered list — not by a login or an API key. Your domain has to already be added to your tenant's origin list before the widget will work.
3. The Snippet
Paste this right before </body> on every page you want the chat bubble to appear on:
<script src="https://chat.enopsy.com/embed.js" data-code="your-site-name" async></script>
That's the whole thing — one tag. An older two-tag form using window.LiveChatConfig still works if you already have it installed that way, but there's no reason to use it for a new install:
<script>
window.LiveChatConfig = {
code: "your-site-name"
};
</script>
<script src="https://chat.enopsy.com/embed.js" async></script>
data-api-url unless you're explicitly told otherwise — the widget automatically uses the same domain the embed.js script tag itself was loaded from (https://chat.enopsy.com). Never set it to a backend-chat.enopsy.com address — that's the API server, not the widget frontend, and it will refuse to load in an iframe (you'll see a "refused to connect" error).
Config fields
| Attribute | Required | Notes |
|---|---|---|
data-code | Yes | Any non-empty label of your choosing (e.g. your company name). It doesn't need to match anything — it's just a required field the script checks isn't blank. |
data-api-url | No | Defaults to wherever embed.js itself was loaded from if omitted — that's correct for almost everyone. Only set it if EnOpSy explicitly tells you to point at a different widget frontend domain, and never set it to a backend-chat.enopsy.com address. |
data-position | No | "left" or "right" (default). Which corner the bubble sits in. |
data-theme-color | No | A hex color (e.g. "#2563eb") for the bubble's accent color. |
window.LiveChatConfig fields are code, apiUrl, position, and theme.primaryColor.
4. How To Add It To Your Site
It's one <script> tag — how you get it onto every page is up to you. Three common approaches:
| Method | Best for |
|---|---|
| Hardcode it | Static sites, or when you control the page templates directly. |
| Google Tag Manager | Sites already using GTM for other scripts — no code deploy needed to add or change it. |
| Other tag managers / CMS script injection | Any platform with a "custom scripts" or "header/footer code" field (Shopify, WordPress, Webflow, etc.) — same rules as GTM apply. |
Hardcode
Paste the script tag directly into your HTML, right before </body>, on every page you want the bubble to appear on. See the snippet in Section 3.
Google Tag Manager
- Open your container at tagmanager.google.com.
- In the left sidebar click Tags, then New (top right). Name the tag, e.g. "EnOpSy Live Chat Widget".
- Click the Tag Configuration box → choose type Custom HTML.
- Paste the script tag from Section 3 into the HTML box, exactly as shown.
- Click the Triggering box. Pick an existing DOM Ready or Window Loaded trigger that fires on all pages, or create one (+ → Trigger type DOM Ready or Window Loaded → "fires on all DOM Ready events" / "all Window Loaded events") — not
All Pages/Initialization/Consent Initialization(these can fire before<body>exists). - Click Save.
- Click Preview (top right), open your site in the preview session, and confirm the bubble appears and the tag fired on the expected trigger in the Tag Assistant debug panel.
- Back in GTM, click Submit (top right), add a version name/description, then Publish.
<body> with no readiness check of its own. If GTM fires the tag before <body> exists, the page will throw a script error and the widget won't load. DOM Ready guarantees <body> is there.
window.LiveChatConfig form, keep both tags in the same Custom HTML tag, not split across two — the config script must run immediately before embed.js, and GTM doesn't guarantee ordering between separate tags on the same trigger. The single-tag data-code form (Section 3) avoids this entirely, which is the main reason to prefer it.
Other Tag Managers / CMS Script Injection
The same rule applies everywhere: whatever "fire on" / "load timing" option the platform offers, pick the one closest to DOM ready — not "as early as possible" or a plain <head> injection. If the platform only offers a single header-code field with no timing choice, prefer a footer/body-end field instead if one exists — for the same reason hardcoding goes before </body>.
5. How Your Company Is Identified
When the widget loads, it reads the domain it's running on (from the page's own origin, falling back to the referring page) and asks EnOpSy "who owns this domain?" That lookup is what your registered origin list (Section 2) answers. Nothing about which company you are comes from the snippet itself — swapping the code value to something else has no effect on this.
6. Verifying It Works
- Load your page and confirm the chat bubble appears in the corner.
- Send a test message from the widget.
- Log into chat.enopsy.com — the conversation should appear in the conversation list within a few seconds.
- Reply from the dashboard and confirm it shows up back in the widget.
7. The Agent Side
Your team doesn't need a separate account for this — signing into chat.enopsy.com uses the same login as the rest of your EnOpSy account. Once in, every visitor conversation across every one of your registered domains appears in one shared conversation list, with a live-visitors panel showing who's currently browsing.
8. Troubleshooting
| Symptom | Cause |
|---|---|
| Bubble never appears | Check the browser console for a script error — the code field is likely missing or blank. |
| Bubble appears, but sending a message fails / conversation never shows up on the dashboard | Your domain almost certainly isn't on the registered origin list yet (Section 2). Confirm with your EnOpSy account contact. |
| Console error when the tag fires (Google Tag Manager / other tag manager installs) | The tag fired before <body> existed. Switch the trigger to DOM Ready or Window Loaded (Section 4). |
| It worked before, now intermittently fails | This can happen during backend maintenance. If it persists, report it — it's not something fixable from your site's side. |
