Skip to main content
The Chatbase JavaScript embed script provides simple methods to control your chat widget’s visibility programmatically. This gives you control over when users can interact with your AI Agent.

​
Available Widget Controls

​
Open & Close Widget

Control the chat widget’s visibility state with two simple methods: 
// Open the chat widget
window.chatbase.open();

// Close the chat widget  
window.chatbase.close();

​
Common Use Cases

Open the chat widget based on user’s current location or action:
// Open chat when user visits pricing page
if (window.location.pathname.includes('/pricing')) {
  window.chatbase.open();
}

// Open chat when user encounters an error
function handleError(errorType) {
  // Log the error for your records
  console.log(`User encountered error: ${errorType}`);
  
  // Open chat to provide immediate help
  window.chatbase.open();
}

// Open chat for specific page sections
document.querySelectorAll('.complex-feature').forEach(element => {
  element.addEventListener('mouseenter', () => {
    // Open chat when user hovers over complex features
    window.chatbase.open();
  });
});
Guide new users through your application:
// Step-by-step onboarding with chat
const onboardingSteps = [
  '#create-account',
  '#first-project', 
  '#completed-setup'
];

onboardingSteps.forEach(selector => {
  const element = document.querySelector(selector);
  if (element) {
    element.addEventListener('click', () => {
      window.chatbase.open();
    });
  }
});

// Open chat for new users after they complete their profile
function handleProfileCompletion() {
  // Your profile completion logic
  
  // Open chat to offer additional help
  window.chatbase.open();
}

​
Best Practices

  • Debounce calls: Avoid rapid open/close calls that can cause UI glitches
  • Contextual timing: Open chat at relevant moments, not randomly
  • Respect user preference: Remember if user has dismissed chat recently
  • Keyboard navigation: Provide keyboard shortcuts for chat control
  • Respectful timing: Don’t interrupt user workflows

​
Next Steps

Event Listeners

Learn to listen for and respond to chat events in real-time

Custom Initial Messages

Create dynamic, personalized initial messages for users

Floating Initial Messages

Display floating messages over the chat bubble
⌘I