🎯 ChatBox SDK - Context & Session Examples
Note: Use the configuration panel above to edit and test different user contexts, metadata, and session configurations in real-time. Or use the scenario buttons below to quickly test specific context examples.
1. 👤 Guest/Anonymous User (Lead Generation)
Use case: Visitor lands on your website, no account yet. Auto-generates UUID for session tracking.
const chatbox = new ChatBoxSDK({
apiKey: 'your-api-key',
context: {
page: 'home',
campaign: 'summer-2024',
source: 'organic'
}
});
Launch Guest Chat
2. 🛒 E-commerce Order Support
Use case: Customer viewing their order details wants help.
const chatbox = new ChatBoxSDK({
apiKey: 'your-api-key',
userId: 'customer-12345',
userMetadata: {
name: 'John Doe',
email: 'john@example.com',
customFields: {
totalOrders: 15,
vipStatus: true,
lifetimeValue: 2499.99
}
},
context: {
orderId: 'ORD-789',
orderStatus: 'shipped',
trackingNumber: '1Z999AA10123456784',
orderTotal: 199.99
}
});
Launch Order Support Chat
3. 💼 SaaS Customer Support Portal
Use case: Authenticated user in their dashboard needs help.
const chatbox = new ChatBoxSDK({
apiKey: 'your-api-key',
userId: 'user-67890',
userMetadata: {
name: 'Jane Smith',
email: 'jane@company.com',
avatar: 'https://i.pravatar.cc/150?img=5',
customFields: {
plan: 'enterprise',
seats: 50,
billingStatus: 'active',
accountAge: 365
}
},
context: {
page: 'dashboard',
feature: 'analytics',
lastLogin: new Date().toISOString()
}
});
Launch SaaS Support Chat
4. 💰 Pricing Page - Sales Inquiry
Use case: Potential customer on pricing page has questions.
const chatbox = new ChatBoxSDK({
apiKey: 'your-api-key',
context: {
page: 'pricing',
planInterest: 'pro',
annualBilling: true,
estimatedSeats: 10,
referrer: 'google-ads',
campaign: 'Q4-2024'
}
});
Launch Pricing Chat
5. 🔧 Product-Specific Support
Use case: User needs help with a specific product/feature.
const chatbox = new ChatBoxSDK({
apiKey: 'your-api-key',
userId: 'user-11111',
userMetadata: {
name: 'Bob Wilson',
email: 'bob@startup.io',
customFields: {
plan: 'starter',
onboardingComplete: false,
daysActive: 3
}
},
context: {
productId: 'widget-pro',
productVersion: '2.5.1',
feature: 'integrations',
page: 'settings/integrations',
errorCode: 'INTEGRATION_401'
}
});
Launch Product Support Chat
6. 📱 Mobile App - In-App Support
Use case: User in mobile app (web view) needs help.
const chatbox = new ChatBoxSDK({
apiKey: 'your-api-key',
userId: 'mobile-user-99999',
userMetadata: {
name: 'Sarah Johnson',
email: 'sarah@email.com',
customFields: {
appVersion: '3.2.1',
platform: 'iOS',
osVersion: '17.0',
deviceModel: 'iPhone 14 Pro'
}
},
context: {
screen: 'profile',
sessionDuration: 1247,
actionsToday: 15
}
});
Launch Mobile App Chat
⚠️ Important:
Replace 'your-api-key' with your actual API key
Only include context that's relevant to the conversation
Never pass sensitive data (passwords, tokens, credit cards)
User IDs should be consistent across sessions for the same user
📊 How Context is Used in Flows
All context is automatically injected as conversation variables. Flow designers can use them like this:
// In Message Nodes:
Hello {{userName}}! 👋
// In Conditions:
{{plan}} === "enterprise"
{{orderStatus}} === "shipped"
// In API Nodes:
{
"userId": "{{userId}}",
"orderId": "{{orderId}}",
"email": "{{userEmail}}"
}
🔄 Session Reuse Example
When you provide a userId, sessions are automatically reused within 24 hours:
First Visit (Creates Session)
Return Visit (Reuses Session)
Open browser console to see session IDs