Chat Data SDK Demo

GitHub Repository | Documentation

Loading...

Implementation Example

/**
 * Chat Data SDK Implementation Guide
 * --------------------------------
 * A comprehensive demonstration of all available methods and event listeners.
 */

/* ===========================================
   1. INITIALIZATION OPTIONS
   =========================================== */

// Method 1: Auto-initialization with data attribute
<script 
  src="https://www.chat-data.com/static/chatbotsdk.min.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"></script>

// Method 2: Manual initialization
<script src="https://www.chat-data.com/static/chatbotsdk.min.js"></script>
<script>
  window.chatbot.initialize({
    chatbot_id: "YOUR_CHATBOT_ID"
  });
</script>

// For custom domains
<script 
  src="https://your-domain.com/static/chatbotsdk.min.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"></script>


/* ===========================================
   2. USER INFORMATION MANAGEMENT
   =========================================== */

// Basic user info sending
window.chatbot.sendUserInfo({
  name: "John Doe",                     // Optional
  email: "[email protected]",            // Optional
  phone: "555-123-4567",                // Optional
  info: "Premium user since 2023-01-01" // Optional additional info
}).then(response => {
  console.log("User info sent:", response);
}).catch(error => {
  console.error("Error sending user info:", error);
});

// Different info value examples
window.chatbot.sendUserInfo({
  name: "Jane Smith",
  info: "Student account"               // Simple text string
});

window.chatbot.sendUserInfo({
  email: "[email protected]",
  info: JSON.stringify({                // Stringified JSON for structured data
    plan: "premium",
    signupDate: "2023-01-01"
  })
});

// Clearing user information
window.chatbot.clearUserInfo()
  .then(response => {
    console.log("User info cleared:", response);
  })
  .catch(error => {
    console.error("Error clearing user info:", error);
  });


/* ===========================================
   3. EVENT LISTENERS
   =========================================== */

// 1. Chat messages
const chatHandler = function(data) {
  console.log("Chat event received:", data);
  // Handle new chat messages from the chatbot
};
window.chatbot.addEventListener("chat", chatHandler);

// 2. Lead submissions
const leadSubmissionHandler = function(data) {
  console.log("Lead submission received:", data);
  // Handle when a user submits a lead form in the chatbot
};
window.chatbot.addEventListener("lead-submission", leadSubmissionHandler);

// 3. Live chat escalation 
const liveChatEscalationHandler = function(data) {
  console.log("Live chat escalation requested:", data);
  // Handle when user requests to speak with a human agent
};
window.chatbot.addEventListener("live-chat-escalation", liveChatEscalationHandler);

// 4. Widget minimization
const minimizeWidgetHandler = function(data) {
  console.log("Widget minimized:", data);
  // Handle when user minimizes the chat widget
};
window.chatbot.addEventListener("minimize-widget", minimizeWidgetHandler);

// Removing event listeners
window.chatbot.removeEventListener("chat", chatHandler);


/* ===========================================
   4. CONFIGURATION
   =========================================== */

// Get current configuration
const config = window.chatbot.getConfig();
console.log("Current configuration:", config);


/* ===========================================
   5. ERROR HANDLING
   =========================================== */

// Option 1: Using try-catch blocks
try {
  window.chatbot.sendUserInfo({
    name: "John Doe",
    info: "Basic plan user"
  });
} catch (error) {
  console.error("Error using SDK:", error);
}

// Option 2: Using Promise error handling
window.chatbot.sendUserInfo({
  email: "[email protected]",
  phone: "555-123-4567",
  info: "Last visited: " + new Date().toLocaleDateString()
})
.then(response => {
  // Success handler
})
.catch(error => {
  // Error handler
})
.finally(() => {
  // Always executed
});


/* ===========================================
   6. COMMON USAGE PATTERNS
   =========================================== */

// Sending user data after login
function onUserLogin(userData) {
  if (window.chatbot) {
    window.chatbot.sendUserInfo({
      name: userData.displayName,
      email: userData.email,
      phone: userData.phoneNumber,
      info: userData.accountType || "Standard user"
    }).then(() => {
      console.log("User info sent to chatbot after login");
    });
  }
}

// Setting up all event listeners at once
function setupChatbotEventListeners() {
  const events = ["chat", "lead-submission", "live-chat-escalation", "minimize-widget"];
  
  events.forEach(eventName => {
    window.chatbot.addEventListener(eventName, function(data) {
      console.log(`${eventName} event received:`, data);
      // Process event data as needed
    });
  });
}