TL;DR

It is the small script snippet you copy once into your site so Eloqra's chat widget loads and appears on every page.

Key Points

✓

An embed code is the copy-and-paste snippet that tells the browser to fetch and run an external tool, typically via an HTML script tag with a src attribute [1].

✓

Eloqra's snippet has two parts: a line that sets window.ELOQRA_CHAT_CONFIG = { projectId: "..." } and a script tag that loads eloqra-chat.js from chat.eloqra.app.

✓

The projectId in the config tells Eloqra which project the page belongs to, the same way other tools key their snippet to a website ID [3][4].

✓

Once loaded, the bootstrap script reads the config and injects the [[javascript-widget]], rendering the [[chat-launcher]] and [[conversation]] panel inside a [[shadow-dom|Shadow DOM]].

✓

It is usually pasted just before the closing body tag so it loads after page content and does not block rendering [4].

✓

Because it is plain HTML with no build step, it drops into any site and can be installed by an [[ai-coding-agent]] from a short instruction.

What an embed code is

An embed code is a small block of markup a site owner copies from one product and pastes into another site to make the two work together. In its most common form it is an HTML script element whose src attribute points to an external file: the browser fetches that file from the given URL and executes it in the context of the host page ^[1]. Because the same snippet is the standard way to load any independent third-party script, the same idea powers analytics tags, embedded videos, and live-chat tools alike ^[4]. Some products instead hand you an Iframe tag, which embeds the tool in its own isolated browsing context. Either way, the embed code is the single integration point: paste it once and the external tool appears, with no package to install or code to build ^[1].

How Eloqra's embed code works

Eloqra's embed code is two lines. The first sets a global config object, window.ELOQRA_CHAT_CONFIG = { projectId: "your-project-id" }, and the second is a script tag that loads eloqra-chat.js from chat.eloqra.app. The projectId identifies which Eloqra project the page belongs to, much as Crisp keys its snippet to a Website ID and tawk.to keys its widget code to a property ^[3]^[4]. When the browser runs the script, the bootstrap reads ELOQRA_CHAT_CONFIG, connects the page to that project, and injects the JavaScript Widget into the document. The widget renders inside a Shadow DOM so the host page's styles cannot leak in and break it. From there it draws the Chat Launcher bubble and, on click, the Conversation panel where a Website Visitor can start a Chat Message.

Installing the snippet

You place Eloqra's snippet in the HTML of every page where the widget should appear, typically just before the closing body tag so it loads after the main content rather than blocking the page from rendering ^[4]. On a hand-coded site that means editing the template directly; on a CMS or site builder it usually goes into a custom-HTML or footer-code field. There is no framework dependency and no build step, so the same two lines work on a static blog or a large web app, and an AI Coding Agent can wire them in from a one-line request. After the script loads, the widget connects to Eloqra over HTTP polling and an optional Pre-Chat Form can capture a name and email before the first message is sent to the operator over Telegram.

Sources & References

script: The Script element - MDN Web Docs ↗

Adding the tawk.to widget to your website - tawk.to Help Center ↗

Where to find my Website ID - Crisp Knowledge Base ↗

How to Install a live chat widget to your HTML website - Crisp ↗

Last updated: June 25, 2026

Related Terms

JavaScript Widget

A JavaScript widget is a self-contained chunk of front-end code, loaded from a single script tag, that injects an interactive UI into any third-party web page. In Eloqra it is the live-chat widget that boots from one snippet and renders the chat launcher and conversation panel directly on a customer's site.

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.

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.

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.

Iframe

An iframe (inline frame) is an HTML element that embeds a separate, self-contained HTML document inside the current page, giving the embedded content its own DOM, stylesheets, and JavaScript scope. It is one of the classic ways to drop third-party UI like a chat widget onto a host website without its code clashing with the page.

AI Coding Agent

An AI coding agent is a software tool that pairs a large language model with access to real developer tools (file editing, a terminal, test runners) so it can plan a multi-step task, write and run code, observe the result, and iterate toward a goal with limited human supervision. It differs from plain autocomplete by acting in a loop rather than suggesting one line at a time.

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

Embed Code