Widget SDK Methods

<script>
  (function(d,t) {
    var BASE_URL="https://chatwoot.example.com";
    var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
    g.src=BASE_URL+"/packs/js/sdk.js";
    g.defer = true;
    g.async = true;
    s.parentNode.insertBefore(g,s);
    g.onload=function(){
      window.chatwootSDK.run({
        websiteToken: 'YOUR_WEBSITE_TOKEN',
        baseUrl: BASE_URL
      })
    }
  })(document,"script");
</script>

<script>
  window.chatwootSettings = {
    hideMessageBubble: false,
    position: 'right', // 'left' or 'right'
    locale: 'en',
    useBrowserLanguage: false,
    type: 'standard', // 'standard' or 'expanded_bubble'
    launcherTitle: 'Chat with us',
    showPopoutButton: false,
    showUnreadMessagesDialog: true,
    widgetStyle: 'standard', // 'standard' or 'flat'
    darkMode: 'auto', // 'light', 'dark', or 'auto'
    welcomeTitle: 'Welcome to our chat',
    welcomeDescription: 'We are here to help',
    availableMessage: 'We are online',
    unavailableMessage: 'We are away',
    enableFileUpload: true,
    enableEmojiPicker: true,
    enableEndConversation: true,
    baseDomain: '.example.com' // For cross-domain cookie sharing
  };
</script>

// Open the widget
window.$chatwoot.toggle('open');

// Close the widget
window.$chatwoot.toggle('close');

// Toggle between open and closed
window.$chatwoot.toggle();

// Hide the chat bubble
window.$chatwoot.toggleBubbleVisibility('hide');

// Show the chat bubble
window.$chatwoot.toggleBubbleVisibility('show');

// Hide bubble on checkout page
if (window.location.pathname === '/checkout') {
  window.$chatwoot.toggleBubbleVisibility('hide');
}

window.$chatwoot.popoutChatWindow();

window.$chatwoot.reset();

// User logout handler
function handleLogout() {
  // Clear your app session
  clearUserSession();
  
  // Reset Chatwoot widget
  window.$chatwoot.reset();
}

window.$chatwoot.setUser(identifier, {
  name: 'John Doe',
  email: 'john@example.com',
  avatar_url: 'https://example.com/avatar.jpg',
  phone_number: '+1234567890'
});

window.$chatwoot.setUser('user-12345', {
  name: 'John Doe',
  email: 'john@example.com',
  avatar_url: 'https://example.com/avatar.jpg',
  phone_number: '+1-555-123-4567'
});

try {
  window.$chatwoot.setUser(userId, userData);
} catch (error) {
  console.error('Failed to set user:', error.message);
  // Error: "Identifier should be a string or a number"
  // Error: "User object should have one of the keys [avatar_url, email, name]"
}

window.$chatwoot.setCustomAttributes({
  subscription_plan: 'premium',
  account_value: 5000,
  signup_date: '2026-01-15',
  is_verified: true
});

window.$chatwoot.deleteCustomAttribute('subscription_plan');

window.$chatwoot.setConversationCustomAttributes({
  order_id: 'ORD-12345',
  order_total: 299.99,
  product_category: 'electronics'
});

window.$chatwoot.deleteConversationCustomAttribute('order_id');

window.$chatwoot.setLabel('premium-support');

window.$chatwoot.removeLabel('premium-support');

window.$chatwoot.setLocale('es'); // Spanish
window.$chatwoot.setLocale('fr'); // French
window.$chatwoot.setLocale('de'); // German

window.$chatwoot.setColorScheme('light');
window.$chatwoot.setColorScheme('dark');
window.$chatwoot.setColorScheme('auto'); // Follow system preference

window.addEventListener('chatwoot:ready', function() {
  console.log('Widget is ready');
  // Widget has loaded and is ready for interaction
});

window.addEventListener('chatwoot:opened', function() {
  console.log('Widget opened');
  // Track widget open in analytics
  analytics.track('Chat Widget Opened');
});

window.addEventListener('chatwoot:closed', function() {
  console.log('Widget closed');
});

window.addEventListener('chatwoot:on-message', function(event) {
  console.log('New message:', event.detail);
  // event.detail contains message data
});

window.addEventListener('chatwoot:on-start-conversation', function() {
  console.log('Conversation started');
});

window.addEventListener('chatwoot:error', function(event) {
  console.error('Widget error:', event.detail);
});

window.addEventListener('chatwoot:postback', function(event) {
  console.log('Postback received:', event.detail);
  // Handle postback actions from interactive messages
});

// Initialize widget settings
window.chatwootSettings = {
  position: 'right',
  locale: 'en',
  darkMode: 'auto',
  launcherTitle: 'Chat with Support'
};

// Wait for widget to be ready
window.addEventListener('chatwoot:ready', function() {
  console.log('Chatwoot widget is ready');
  
  // Set user if logged in
  const currentUser = getCurrentUser(); // Your function
  if (currentUser) {
    window.$chatwoot.setUser(currentUser.id, {
      name: currentUser.name,
      email: currentUser.email,
      avatar_url: currentUser.avatar
    });
    
    // Set user custom attributes
    window.$chatwoot.setCustomAttributes({
      subscription_plan: currentUser.plan,
      signup_date: currentUser.createdAt
    });
  }
  
  // Auto-open widget on specific pages
  if (window.location.pathname === '/support') {
    window.$chatwoot.toggle('open');
  }
});

// Track widget interactions
window.addEventListener('chatwoot:opened', function() {
  // Send to analytics
  gtag('event', 'chat_widget_opened');
  
  // Set conversation context
  window.$chatwoot.setConversationCustomAttributes({
    page_url: window.location.href,
    page_title: document.title,
    referrer: document.referrer
  });
});

// Handle new messages
window.addEventListener('chatwoot:on-message', function(event) {
  const message = event.detail;
  console.log('New message:', message);
  
  // You could show a browser notification, update a badge, etc.
});

// Clean up on logout
function handleUserLogout() {
  // Your logout logic
  clearUserSession();
  
  // Reset Chatwoot
  window.$chatwoot.reset();
}

// Update context when user views a product
function onProductView(product) {
  window.$chatwoot.setConversationCustomAttributes({
    current_product_id: product.id,
    current_product_name: product.name,
    current_product_price: product.price
  });
}

// Update context when user adds to cart
function onAddToCart(item) {
  window.$chatwoot.setConversationCustomAttributes({
    cart_total: getCartTotal(),
    cart_items: getCartItemCount(),
    last_added_item: item.name
  });
}

window.addEventListener('chatwoot:ready', function() {
  // Hide widget on mobile
  if (window.innerWidth < 768) {
    window.$chatwoot.toggleBubbleVisibility('hide');
  }
  
  // Show widget only for logged-in users
  if (!isUserLoggedIn()) {
    window.$chatwoot.toggleBubbleVisibility('hide');
  }
  
  // Hide widget on specific pages
  const hideOnPages = ['/checkout', '/payment'];
  if (hideOnPages.includes(window.location.pathname)) {
    window.$chatwoot.toggleBubbleVisibility('hide');
  }
});

// Auto-label conversations based on page context
window.addEventListener('chatwoot:ready', function() {
  const pageLabels = {
    '/pricing': 'sales',
    '/support': 'support',
    '/billing': 'billing',
    '/account': 'account-management'
  };
  
  const path = window.location.pathname;
  const label = pageLabels[path];
  
  if (label) {
    window.addEventListener('chatwoot:on-start-conversation', function() {
      window.$chatwoot.setLabel(label);
    }, { once: true });
  }
});

// Set widget locale based on user's language preference
const userLanguage = getUserLanguagePreference(); // Your function
window.chatwootSettings = {
  locale: userLanguage,
  useBrowserLanguage: false
};

// Or change locale dynamically
function changeLanguage(locale) {
  window.$chatwoot.setLocale(locale);
}

// Check if SDK is loaded
if (window.chatwootSDK) {
  console.log('SDK loaded');
} else {
  console.error('SDK not loaded');
}

// Check if widget is initialized
if (window.$chatwoot) {
  console.log('Widget initialized');
} else {
  console.error('Widget not initialized');
}

window.addEventListener('chatwoot:ready', function() {
  window.$chatwoot.setUser('user-123', {
    email: 'user@example.com',
    name: 'User Name'
  });
});