Chatbot
Advanced
Adding additional context

Chatbot - Adding additional context

In Aidbase, you can give your chatbot custom instructions.
This is useful when you want to give your chatbot general instructions to follow.

But sometimes, we want to give the chatbot some additional information dynamically, which can be specific to a given user or a situation.

How it works

If you're using HTML, you can query the DOM node of the Chatbot.
This allows you to assign properties and call methods on the Chatbot.

If you're using React, you can add these properties directly to the <Chat> component as props.

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>

Adding additional context through the context property

JavaScript
// Get the DOM node of the Chatbot
const chatbot = document.getElementById('my-chatbot');
 
// Add additional context as a string
chatbot.context = "Additional context here";
ℹ️

A context can be up to 5,000 characters long.

Example

JavaScript
// Get the DOM node of the Chatbot
const chatbot = document.getElementById('my-chatbot');
 
// For the sake of the example, let's say we're
// getting the user's information from an api endpoint.
const userRequest = await fetch('/myapi/user');
const user = await userRequest.json();
const { username, latestOrderID } = user;
 
chatbot.context = `
  The user you are talking to is ${username}. Greet them by name.
  
  If the user asks for a status on their latest order, follow these instructions:
  - Ask the user for an order ID.
  - If the user responds with "${latestOrderID}", tell them that their order is on its way.
  - If they respond with any other order ID, tell them that you couldn't find their order.
`;
⚠️

The context property is a string that will be passed to the chatbot as is.
Do not use this to pass any sensitive information.

Using onReady and onError eventsImplement a custom wrapper