Core Concepts
Understanding the fundamental concepts behind ChatWidgetPro will help you create better chat experiences for your users.
Widget Types
ChatWidgetPro supports three widget types, each designed for different use cases. Choose the one that best fits your application's needs.
Floating Widget
A chat bubble anchored to the corner of your page. Clicking opens a chat window.
Best For:
- Corporate websites
- E-commerce stores
- SaaS applications
- Marketing pages
Inline Widget
Embedded directly into your page content. Always visible without needing a click.
Best For:
- Help centers
- Product demos
- Interactive tutorials
- Contact pages
Fullscreen Widget
Takes up the entire viewport for an immersive, focused chat experience.
Best For:
- Chat applications
- Kiosk interfaces
- Mobile-first experiences
- AI assistants
Integration Modes
ChatWidgetPro offers two integration modes that determine how your widget communicates with your backend. Each has its own advantages.
Direct Mode
Browser communicates directly with your webhook. Simple setup, zero latency overhead.
Managed Mode
Requests proxied through our secure servers. Webhook URL stays private.
Direct Mode
Free TierWidget communicates directly with your webhook from the browser. Simple and fast.
Note
Managed Mode
Pro PlanRequests proxy through our secure servers. Webhook URL stays completely private.
Recommended
Key Terminology
Familiarize yourself with these terms to better understand the documentation.
Widget
The complete chat interface including bubble, tooltip, chat window, and all interactive elements.
Bubble
The circular button users click to open the chat window (in floating widget mode).
Tooltip
A small message that appears near the bubble to encourage users to start chatting.
Header
The top section of the chat window displaying branding, status, and controls.
Footer
The bottom section displaying powered-by branding and optional links.
Session
A unique conversation instance. Sessions track individual user interactions for analytics.
Webhook URL
The endpoint that receives user messages and returns bot responses. Can be an n8n workflow or custom API.
Embed Code
The JavaScript snippet you add to your website to display the widget.
Widget Lifecycle
Understanding the widget lifecycle helps you design better user experiences and troubleshoot issues more effectively.
Widget Lifecycle
Widget Loads
The embed code loads the widget configuration and initializes the UI components.
Session Starts
When the user first interacts, a unique session ID is generated and stored.
User Sends Message
Message is sent to the webhook URL along with session context and metadata.
Response Received
Bot response is displayed in the chat window with typing animation effects.
Analytics Tracked
Session data and engagement metrics are recorded for reporting.
Session Persistence
Architecture Overview
Here's how the different parts of ChatWidgetPro connect together.
System Architecture
Data Flow Summary
- 1User visits your website with the embedded widget code
- 2Widget loads your configuration from ChatWidgetPro
- 3User messages are sent to your webhook (n8n or custom API)
- 4Your backend processes the message and returns a response
- 5Response is displayed in the widget with optional streaming