The G-Tateth Chat Widget is a powerful, customizable customer support widget that you can embed on any website. It provides real-time messaging, AI-powered responses, file attachments, and seamless agent handoff.
Quick Start
Basic Implementation
Add the widget to your website with just a few lines of code:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<!-- Your website content -->
<!-- G-Tateth Chat Widget -->
<script>
(function() {
window.gtatethWidget = {
tenantId: 'YOUR_TENANT_ID',
apiUrl: 'https://api.g-tateth.com',
wsUrl: 'wss://api.g-tateth.com',
companyName: 'Your Company Name',
companyLogo: 'https://your-domain.com/logo.png',
welcomeMessage: 'Welcome! How can we help you today?',
primaryColor: '#2f4a6b',
position: 'bottom-right'
};
var script = document.createElement('script');
script.src = 'https://cdn.g-tateth.com/widget/v1/widget.js';
script.async = true;
document.head.appendChild(script);
})();
</script>
</body>
</html>
React/Next.js Implementation
For React applications, use our React component:
import { EnhancedAIChatWidget } from '@g-tateth/react-widget';
export default function MyPage() {
return (
<div>
<h1>Welcome to My Site</h1>
<EnhancedAIChatWidget
tenantId="YOUR_TENANT_ID"
apiUrl="https://api.g-tateth.com"
companyName="Your Company"
primaryColor="#2f4a6b"
/>
</div>
);
}
Configuration Options
Your unique tenant identifier. Get this from your dashboard.
API base URL. Default: https://api.g-tateth.com
WebSocket URL for real-time features. Default: wss://api.g-tateth.com
Your company name displayed in the widget header.
URL to your company logo. Supports SVG, PNG, or JPG.
Initial message shown when widget opens. Default: “Welcome! How can we help you?”
Primary brand color (hex code). Default: #2f4a6b
Widget position: bottom-right, bottom-left, top-right, or top-left. Default: bottom-right
Business hours configuration:{
"enabled": true,
"timezone": "America/New_York",
"schedule": {
"monday": { "open": "09:00", "close": "17:00" },
"tuesday": { "open": "09:00", "close": "17:00" },
"wednesday": { "open": "09:00", "close": "17:00" },
"thursday": { "open": "09:00", "close": "17:00" },
"friday": { "open": "09:00", "close": "17:00" },
"saturday": { "open": null, "close": null },
"sunday": { "open": null, "close": null }
},
"offlineMessage": "We're currently offline. Leave a message and we'll get back to you!"
}
Feature flags:{
"fileAttachments": true,
"voiceMessages": true,
"screenSharing": false,
"videoCalls": false,
"aiEnabled": true,
"agentHandoff": true
}
API Integration
All widget API endpoints are documented in the API Reference tab. This section provides integration examples and workflows.
tenantId - Your tenant ID
Optional Parameters:
customerInfo - Customer information object:
{
"name": "John Doe",
"email": "john@example.com",
"phone": "+1234567890",
"metadata": {
"plan": "premium",
"signupDate": "2024-01-15"
}
}
Response:
sessionId - Unique session identifierconversationId - Conversation ID if continuing existing conversationconfig - Widget configuration including business hours, features, etc.
Send Message
Send messages from the widget using the Send Message endpoint.
Required Parameters:
conversationId - Conversation IDtenantId - Tenant IDtext - Message text content
Optional Parameters:
attachments - Array of file attachments
Get Messages
Retrieve conversation messages using the Get Messages endpoint.
Query Parameters:
limit - Number of messages to return (default: 50)before - Message ID to fetch messages before (for pagination)
Get Online Agents
Get list of online agents using the Get Online Agents endpoint.
Query Parameters:
tenantId - Tenant ID (required)
Advanced Features
Custom Styling
Customize the widget appearance with CSS:
/* Override widget styles */
.gtateth-widget {
--gtateth-primary-color: #2f4a6b;
--gtateth-font-family: 'Inter', sans-serif;
--gtateth-border-radius: 12px;
}
.gtateth-launcher {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
Event Handlers
Listen to widget events:
window.addEventListener('gtateth:widget:opened', (event) => {
console.log('Widget opened', event.detail);
});
window.addEventListener('gtateth:widget:message:sent', (event) => {
console.log('Message sent', event.detail);
});
window.addEventListener('gtateth:widget:agent:joined', (event) => {
console.log('Agent joined', event.detail);
});
window.addEventListener('gtateth:widget:conversation:created', (event) => {
console.log('Conversation created', event.detail);
});
File Attachments
Enable file uploads in the widget:
window.gtatethWidget = {
// ... other config
features: {
fileAttachments: true,
maxFileSize: 10485760, // 10MB
allowedFileTypes: ['pdf', 'jpg', 'png', 'doc', 'docx']
}
};
AI-Powered Responses
The widget includes built-in AI that can:
- Answer common questions automatically
- Escalate to human agents when needed
- Learn from your knowledge base
- Provide 24/7 support
AI is enabled by default. Configure it in your dashboard under Settings > AI.
Agent Handoff
When AI can’t help, conversations automatically escalate to human agents:
// Listen for agent handoff
window.addEventListener('gtateth:widget:agent:joined', (event) => {
const { agentId, agentName } = event.detail;
console.log(`${agentName} has joined the conversation`);
});
WebSocket Integration
For real-time updates, connect to the WebSocket:
const ws = new WebSocket(`wss://api.g-tateth.com?sessionId=${sessionId}&type=widget`);
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
switch(data.type) {
case 'new-message':
// Handle new message
break;
case 'agent-joined':
// Handle agent joining
break;
case 'typing-indicator':
// Show typing indicator
break;
case 'read-receipt':
// Update read status
break;
}
};
Best Practices
- Load the widget script asynchronously
- Use lazy loading for non-critical features
- Minimize custom CSS overrides
- Cache widget configuration
Security
- Always use HTTPS in production
- Validate customer data before sending
- Implement rate limiting on your side
- Use secure WebSocket connections (WSS)
User Experience
- Show clear offline/online status
- Provide helpful welcome messages
- Enable file attachments for better support
- Use business hours to set expectations
Analytics
Track widget usage:
window.addEventListener('gtateth:widget:message:sent', (event) => {
// Track in your analytics
analytics.track('Widget Message Sent', {
conversationId: event.detail.conversationId,
messageLength: event.detail.text.length
});
});
Troubleshooting
- Check browser console for errors
- Verify
tenantId is correct
- Ensure API URL is accessible
- Check CORS settings
Messages Not Sending
- Verify WebSocket connection
- Check network tab for failed requests
- Ensure authentication is working
- Check rate limits
Styling Issues
- Check for CSS conflicts
- Verify custom CSS is loading
- Use browser dev tools to inspect
- Clear browser cache
Examples
E-commerce Integration
window.gtatethWidget = {
tenantId: 'your-tenant-id',
companyName: 'My Store',
welcomeMessage: 'Need help with your order? We\'re here to help!',
customerInfo: {
email: customerEmail,
metadata: {
orderId: currentOrderId,
cartValue: cartTotal
}
}
};
SaaS Application
window.gtatethWidget = {
tenantId: 'your-tenant-id',
companyName: 'My SaaS',
features: {
aiEnabled: true,
agentHandoff: true,
fileAttachments: true
},
customerInfo: {
email: userEmail,
metadata: {
plan: userPlan,
feature: currentFeature
}
}
};
Support
Need help? Contact us:
