TL;DR

An iframe embeds a fully separate web page inside another page; many chat widgets use it for isolation, though Eloqra reaches the same goal with Shadow DOM instead.

Key Points

✓

An iframe creates a nested browsing context with its own document, styles, and scripts, so host-page CSS and JS cannot bleed into the embedded content. ^[1]

✓

The sandbox attribute lets you strip privileges by default and re-grant only what is needed (allow-scripts, allow-forms), which is why iframes are common for untrusted third-party embeds. ^[2]^[3]

✓

Iframes interrupt the host page's layout flow and need their own scrolling and sizing, whereas Shadow DOM content grows naturally with the page. ^[4]

✓

Eloqra does NOT wrap its widget in an iframe; it renders the Live Chat Widget inside a Shadow DOM so styles stay isolated while the floating Chat Launcher still positions cleanly over the page.

✓

Like an iframe boundary, the Embed Code you paste (a tiny JavaScript Widget reading ELOQRA_CHAT_CONFIG) keeps Eloqra's runtime separate from your app's code.

✓

Cross-document messaging between an iframe and its host uses Window.postMessage, since same-origin rules otherwise block direct access. ^[1]

What an iframe actually is

The `<iframe>` element represents a nested browsing context: it loads a second HTML document, identified by its `src` URL, into a rectangle on the current page. ^[1] That inner document has its own DOM tree, its own stylesheets, and its own JavaScript global scope, so nothing on the host page can restyle or script it by accident, and vice versa. Because of the same-origin policy, code in the host page cannot reach into a cross-origin iframe directly; the two sides communicate through `Window.postMessage`. ^[1] This hard boundary is exactly why iframes became a popular way to embed third-party tools, payment forms, maps, and chat widgets onto websites the vendor does not control.

Sandboxing and isolation

The `sandbox` attribute hardens an iframe by removing privileges by default and re-granting only what is needed via flags such as `allow-scripts`, `allow-forms`, and `allow-same-origin`. ^[2]^[3] A fully sandboxed iframe will not run JavaScript, loads into a unique origin with no cookie or storage access, cannot submit forms, and cannot navigate the top-level page. ^[2] This least-privilege model is valuable when embedding untrusted or user-generated content, which is one reason many widgets historically chose iframes over injecting raw script into the host. The trade-off is rigidity: a sealed document is harder to resize dynamically and to style consistently with the surrounding page.

Why Eloqra uses Shadow DOM instead

Eloqra delivers its chat experience with a small JavaScript Widget rather than an iframe. The Embed Code boots the widget and mounts it inside a Shadow DOM root, which gives the same CSS isolation an iframe provides, host-page styles never leak in, without the iframe's drawbacks. Shadow DOM content follows the normal document layout flow, so it grows with its content and avoids the extra scrollbars and sizing headaches iframes introduce. ^[4] That matters for a floating Chat Launcher bubble and an expanding Conversation panel that must sit precisely over the page. The widget then talks to Eloqra's backend over HTTP Polling, not a postMessage bridge, polling for new messages roughly every few seconds.

Sources & References

Play safely in sandboxed IFrames - web.dev ↗

Embedded iFrame Security: Best Practices - Didit ↗

Using the shadow DOM as a better iframe - Mailcoach ↗

Last updated: June 25, 2026

Related Terms

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.

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.

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.

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.

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.

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.

Put live chat on your site in 30 seconds

Eloqra gives you a lightweight live chat widget that routes every visitor message to your Telegram — free forever for one project.

Get Started Free