Building a Custom
Chat Widget
Under the Hood

It is simpler than you think

Slide 02 — Injector & Shadow DOM

02 / 04

taiyeb
nirjhor_

01. Async Script Injector

const s = document.createElement('script');
s.src = 'https://cdn.nodi.ai/widget.js';
document.body.appendChild(s);

Appended asynchronously so host page performance stays 100% fast.

02. Shadow DOM Isolation

Host Page Global CSS

✕ Host CSS Blocked

Shadow DOM Boundary

Widget UI & Styles (100% Encapsulated)

Host site CSS cannot leak in, and widget styles never break the host layout.

Slide 03 — Handshake & Streaming

03 / 04

taiyeb
nirjhor_

03. Auth Handshake

Host Website

API Key ➔

Nodi Auth Server

Session Token ➔

Widget Initialized

Verifies host domain origin and issues short-lived session tokens.

04. Real-time Streaming

Client Widget

⟷ Real-time SSE / WebSocket Stream ⟷

AI Chat Engine

Establishes persistent WebSockets or Server-Sent Events for AI streaming responses.

Slide 04 — Summary & Outro

04 / 04

taiyeb
nirjhor_

Summary: The 4 Steps

[01] Async Script Injector — Loads bundle without blocking host page render.

[02] Shadow DOM Isolation — Protects widget UI from host CSS leaks.

[03] Auth & Handshake — Validates origin domain & grants session tokens.

[04] WebSockets / SSE Stream — Delivers low-latency AI responses in real-time.

Building embeddable chat widgets is simple when you isolate styles & stream responses.

Let's Connect

Follow along for more engineering deep dives.

Image copied to clipboard! 🚀