TL;DR

It is the small piece of JavaScript a website owner pastes in once so Eloqra's chat box appears and runs on their site.

Key Points

✓

Loaded from a tiny [[embed-code|embed snippet]] that reads a global ELOQRA_CHAT_CONFIG = { projectId } and boots the widget asynchronously, so it never blocks the host page from rendering [3].

✓

Renders inside a [[shadow-dom|Shadow DOM]] so the host page's CSS and scripts cannot leak in or break the widget, and the widget's styles cannot leak out [1].

✓

Draws the floating [[chat-launcher]] bubble plus the [[conversation]] panel, including [[typing-indicator|typing indicators]], a [[welcome-message]], and an optional [[pre-chat-form]].

✓

Talks to Eloqra's backend over [[http-polling|HTTP polling]] every few seconds rather than a [[websocket]], fetching new messages and pinging typing state [4].

✓

On the first [[chat-message]] it captures [[website-visitor]] context (page URL, device, and [[ip-geolocation]]) so operators have context when the message arrives over [[telegram-integration|Telegram]].

✓

Designed to drop into any stack and can be installed by an [[ai-coding-agent]] from a one-line instruction, with no build step required.

How the Eloqra widget loads

Installation is a single script tag plus a small config object. The website owner sets a global ELOQRA_CHAT_CONFIG = { projectId } and includes Eloqra's script via an embed snippet; the browser fetches it asynchronously, so the host page keeps parsing and rendering while the widget downloads in the background ^[3]. This async pattern is the standard, recommended way to load independent third-party scripts without blocking the parser ^[4]. Once loaded, the script reads the projectId, connects that page to the right Eloqra project, and mounts the UI. There is no build step, framework dependency, or package to install, which is why an AI Coding Agent can wire it up from a short instruction. The same script powers the whole Live Chat Widget experience end to end.

Style isolation with Shadow DOM

The biggest risk for any embedded Live Chat UI is the host page's CSS bleeding into it (or the widget restyling the host). Eloqra avoids this by rendering inside a Shadow DOM, a browser feature that attaches a hidden, encapsulated DOM tree to an element. Styles defined inside the shadow tree do not affect the main document, and page styles do not affect the shadow tree, giving the widget true encapsulation ^[1]. That means the Chat Launcher bubble and conversation panel look the same on a minimal blog or a heavily styled SaaS dashboard. It also keeps the host page safe: nothing inside the widget can accidentally clobber the site's own layout or scripts, which is exactly the fragility problem Shadow DOM was designed to solve ^[1].

Real-time behaviour and visitor context

Rather than holding a WebSocket open, Eloqra's widget uses HTTP polling: it requests new messages every four to five seconds and pings a typing endpoint to drive typing indicators both ways ^[4]. This keeps the client simple and resilient on flaky networks. On the visitor's first Chat Message, the widget records Website Visitor context, including page URL, user agent, device, and IP Geolocation (country, region, city), and tracks UTM Parameters on the visitor record. The stored message is then forwarded to the project owner on Telegram via Eloqra's Telegram Integration; operator replies travel back through a Telegram Webhook and surface in the widget on the next poll ^[2]. An optional Pre-Chat Form can also capture name and email before the chat starts.

Sources & References

Using shadow DOM - MDN Web Docs ↗

Telegram Bot API ↗

Best practices for using third-party embeds - web.dev ↗

Scripts: async, defer - JavaScript.info ↗

Last updated: June 25, 2026

Related Terms

Live Chat Widget

A live chat widget is the embeddable, in-browser chat interface a website loads from a small script so visitors can message a business in real time without leaving the page. In Eloqra it is a floating launcher and chat panel that boots from a single <script> tag and renders inside a Shadow DOM.

Embed Code

An embed code is a short snippet of HTML or JavaScript a website owner pastes into their pages so a third-party tool loads and runs on their site. For Eloqra it is a two-line script snippet that sets a project configuration and loads the chat script, which then injects the live-chat widget.

Shadow DOM

Shadow DOM is a browser API that attaches a hidden, self-contained DOM subtree to an element, with its own scoped styles that neither leak out to the host page nor get overwritten by it. [1] Eloqra renders its entire chat widget inside a shadow root so the host site's CSS can never break the widget, and the widget's CSS can never alter the host site.

HTTP Polling

HTTP polling is a real-time technique where the client repeatedly sends HTTP requests on a fixed interval to ask the server whether new data is available, instead of holding a persistent connection. Eloqra's chat widget uses short polling roughly every 4-5 seconds to fetch new messages and typing state.

Chat Launcher

A chat launcher is the small floating button — usually a speech-bubble icon pinned to a bottom corner of the page — that a visitor clicks to open a live-chat window. It is the persistent, always-visible entry point to the chat experience.

Telegram Integration

Telegram Integration is the mechanism by which Eloqra routes every website chat into the project owner's Telegram, forwarding visitor messages to a Telegram bot and flowing operator replies back to the widget. It turns Telegram into the operator inbox, so there is no separate agent console to keep open.

Collect testimonials that build trust

Eloqra gives you a lightweight live chat widget that routes every visitor message to your Telegram — free while in early access.

Get Started Free

JavaScript Widget