Chat Widget Documentation

Basic Integration

Add the following script tag to your website's HTML:

<script 
  src="https://your-domain.com/api/widget" 
  id="kogents-chat-widget"
  data-position="right"
  data-color="#3B82F6"
></script>

Place this script tag just before the closing </body> tag for optimal performance.

Configuration Options

You can configure the widget using data attributes on the script tag:

JavaScript API

The widget exposes a JavaScript API that you can use to control it programmatically:

// Open the widget
KogentsChatWidget.open();

// Close the widget
KogentsChatWidget.close();

// Toggle the widget (open if closed, close if open)
KogentsChatWidget.toggle();

// Check if the widget is open
KogentsChatWidget.isOpen().then(isOpen => {
  console.log('Widget is open:', isOpen);
});

// Identify the user
KogentsChatWidget.identify({
  name: 'John Doe',
  email: 'john@example.com',
  id: '123456'
});

// Update configuration
KogentsChatWidget.updateConfig({
  color: '#00FF00',
  greeting: 'Welcome back!'
});

// Listen for events
KogentsChatWidget.on('message:received', message => {
  console.log('New message received:', message);
});

// Remove event listener
const messageHandler = message => {
  console.log('Message:', message);
};
KogentsChatWidget.on('message:received', messageHandler);
KogentsChatWidget.off('message:received', messageHandler);

Events

You can listen for the following events:

Advanced Usage

Custom Styling

You can customize the widget appearance by updating the configuration:

KogentsChatWidget.updateConfig({
  color: '#FF5733',
  buttonText: 'Chat with us',
  headerTitle: 'Customer Support'
});

Pre-populating User Information

You can pre-populate user information when your page loads:

// Wait for widget to be ready
KogentsChatWidget.on('ready', () => {
  // Identify the user
  KogentsChatWidget.identify({
    name: 'John Doe',
    email: 'john@example.com',
    id: '123456',
    // Add any custom attributes
    custom: {
      plan: 'Premium',
      signupDate: '2023-01-15'
    }
  });
});

Troubleshooting

If you encounter issues with the widget:

1. Check the browser console for errors
2. Verify that the script is loading correctly
3. Ensure the widget ID is set correctly
4. Try clearing your browser cache