Chatbot Event Listeners

Chatbot Event Listeners

Overview

Nexvio.ai’s JavaScript SDK provides an event system that allows you to listen and respond to various chatbot events. This enables you to create custom behaviors and integrations based on user interactions with your chatbot.

Available Events

Event	Description
ready	Fired when the chatbot is fully loaded and ready to use
open	Fired when the chatbot widget is opened
close	Fired when the chatbot widget is closed
message:sent	Fired when a message is sent by the user
message:received	Fired when a message is received from the chatbot
typing:start	Fired when the chatbot starts typing
typing:stop	Fired when the chatbot stops typing
error	Fired when an error occurs

Usage

Adding Event Listeners

You can subscribe to events using the on method:

window.nexvio('on', 'event_name', function(data) {
  // Your event handler code here
});

Example: Tracking Chatbot Usage

// Listen for the chatbot being opened
window.nexvio('on', 'open', function() {
  console.log('Chatbot was opened');
  // You could trigger analytics events here
  if (typeof gtag === 'function') {
    gtag('event', 'chatbot_opened', {
      'event_category': 'engagement',
      'event_label': 'chatbot'
    });
  }
});

// Listen for messages sent by the user
window.nexvio('on', 'message:sent', function(data) {
  console.log('User sent message:', data.message);
  // You could track the message content for analytics
});

// Listen for messages received from the chatbot
window.nexvio('on', 'message:received', function(data) {
  console.log('Chatbot replied:', data.message);
  // You could use this to trigger specific actions based on bot responses
});

Example: Implementing Custom UI Interactions

// When the chatbot is ready, perform some UI customization
window.nexvio('on', 'ready', function() {
  // Maybe update page elements to indicate the chatbot is available
  document.getElementById('chat-status-indicator').classList.add('active');
});

// Detect when the chatbot is typing
window.nexvio('on', 'typing:start', function() {
  console.log('Chatbot is typing...');
  // You could show a custom "typing" indicator elsewhere on your page
});

window.nexvio('on', 'typing:stop', function() {
  console.log('Chatbot stopped typing');
  // Remove the custom typing indicator
});

Removing Event Listeners

If you need to remove an event listener, use the off method:

// First, define your handler as a named function
function handleMessage(data) {
  console.log('Message received:', data.message);
}

// Add the event listener
window.nexvio('on', 'message:received', handleMessage);

// Later, remove the same event listener
window.nexvio('off', 'message:received', handleMessage);

Error Handling

It’s good practice to listen for errors to help debug issues:

window.nexvio('on', 'error', function(error) {
  console.error('Nexvio chatbot error:', error);
  // Implement your error handling logic
});

Best Practices

1. Performance: Keep your event handlers lightweight. Heavy processing might affect the chatbot’s performance.

2. Scoping: Define your event handlers in a scope where they won’t be accidentally redefined or removed.

3. Error Handling: Always include error handling in your event callbacks to prevent breaking your site if something goes wrong.

4. Clean Up: When dynamically adding and removing event listeners (for example in single-page applications), be sure to remove listeners when components are destroyed to prevent memory leaks.

// In a component initialization
function initChatbot() {
  window.nexvio('on', 'message:received', handleMessage);
}

// In a component cleanup/destruction
function cleanupChatbot() {
  window.nexvio('off', 'message:received', handleMessage);
}

Advanced: Chaining Multiple Handlers

You can attach multiple handlers to the same event:

// Log all messages
window.nexvio('on', 'message:received', function(data) {
  console.log('Message received:', data.message);
});

// Process specific message content
window.nexvio('on', 'message:received', function(data) {
  if (data.message.includes('pricing')) {
    showPricingPopup();
  }
});

Each handler will be executed in the order they were attached.