flowchart TD subgraph WEB["Website Layer"] direction TB HTML["HTML Page"]:::web SiteJS["Existing Site JavaScript"]:::web Embed["Widget Embed Code
script tag, NPM, or iFrame"]:::web end subgraph WIDGET["Chat Widget (Embed Methods)"] direction TB FloatBtn["Floating Button
collapsed state"]:::widget ChatWin["Chat Window
expanded state"]:::widget MsgComp["Message Components"]:::widget ConnMgr["Connection Manager"]:::widget end subgraph NET["Real-Time Protocols"] direction TB WS["WebSocket
persistent, bidirectional"]:::net SSE["Server-Sent Events
one-way server push"]:::net Poll["Long Polling
firewall-friendly fallback"]:::net end subgraph BACK["Backend Services"] direction TB Gateway["API Gateway
WebSocket and REST"]:::back Framework["Chatbot Framework
Rasa, Dialogflow"]:::back Session["Session Manager"]:::back end subgraph STATE["Persistent State"] direction TB Local["LocalStorage
client-side history"]:::state Cookie["Session Cookie
user identification"]:::state DB["Database
long-term storage"]:::state end HTML --> SiteJS --> Embed Embed -->|loads| FloatBtn FloatBtn --> ChatWin --> MsgComp --> ConnMgr ConnMgr --> WS ConnMgr -.-> SSE ConnMgr -.-> Poll WS --> Gateway Gateway --> Framework --> Session Session --> DB ConnMgr -.-> Local Embed -.-> Cookie classDef web fill:#3b82f6,stroke:#1e3a8a,stroke-width:2px,color:#fff,font-size:14px classDef widget fill:#22c55e,stroke:#15803d,stroke-width:2px,color:#fff,font-size:14px classDef net fill:#f97316,stroke:#9a3412,stroke-width:2px,color:#fff,font-size:14px classDef back fill:#8b5cf6,stroke:#5b21b6,stroke-width:2px,color:#fff,font-size:14px classDef state fill:#64748b,stroke:#334155,stroke-width:2px,color:#fff,font-size:14px linkStyle default stroke:#94a3b8,stroke-width:2px,font-size:13px