Chatbot
Advanced
Using JavaScript to control Chatbot

Chatbot - Using JavaScript to control the Chatbot

Query the DOM node

You can query the DOM node of the Chatbot.
This allows you to assign properties and call methods on the Chatbot.

HTML
<ab-chat
  id='my-chatbot'
  chatbotID='YOUR-CHATBOT-ID'
  // ...additional attributes
></ab-chat>
ℹ️

If you don't manually add the <ab-chat> element, it will be added automatically.
It will have an id "ab-chat" which you can use to query the DOM node:
<ab-chat id="ab-chat"></ab-chat>

Using JavaScript to add properties and call methods

JavaScript
// Get the DOM node of the Chatbot
const chatbot = document.getElementById('my-chatbot');
 
const userID = 'a64427d6';
const username = 'John Doe';
const email = 'john@doe.com';
 
// Set the users details
chatbot.userID = userID;
chatbot.username = username;
chatbot.email = email;
 
// Set the welcome message
chatbot.initialMessage = `Hi, ${username}. How can I help you today?`;
 
// Programmatically open the Chatbot
chatbot.open();

See all the available attributes and methods in the Chatbot Reference.