Chatbot - Reference

Bundle / Package

The Chatbot is available through our CDN as a single JavaScript file or through NPM as a React component package.

<script async type="text/javascript" src="https://client.aidbase.ai/chat.ab.js"></script>

Attributes / Props

<ab-chat
  chatbotID="YOUR-CHATBOT-ID"
  theme="dark"
  orientation="left"
  color="#8B5CF6"
  logoURL="https://cdn.some-page.com/logo.png"
  headline="Chat with our AI"
  description="Ask any question and our AI will answer!"
  initialMessage="How can I help you today?"
  initialMessagePopupDelay="5"
  placeholder="Type your message here..."
  newChatButtonText="Start a new chat"
  backToChatButtonText="Back to chat"
  faqButtonText="See FAQ"
  ticketButtonText="Create a ticket"
  policyDescription="Please accept our privacy policy to continue."
  policyLinkTitle="Privacy Policy"
  policyLinkURL="https://example.com/privacy-policy"
  policyAcceptButtonText="Yes, got it"
  dataCollectionMessage="Let's get your name and email so we can follow up with you"
  dataCollectionNamePlaceholder="Your name"
  dataCollectionEmailPlaceholder="Your email"
  dataCollectionButtonText="Add information"
  isOpen="true"
  hideButton="false"
  useTicketModal="false"
  maxHeight="48rem"
  minHeight="32rem"
  userID="a64427d6"
  username="John Doe"
  email="john@doe.com"
  profileImageURL="https://cdn.some-page.com/profile-sm.png"
  referenceID="a738d158892b"
></ab-chat>

Theme

This will render the Chatbot in either light or dark mode.
Can be either light or dark.

Example

<ab-chat chatbotID="YOUR-CHATBOT-ID" theme="dark"></ab-chat>

Orientation

Determines if the Chatbot is displayed on the left or right side of the screen. Can be either left or right.

Example

<ab-chat chatbotID="YOUR-CHATBOT-ID" orientation="left"></ab-chat>

Color

This will display the Chatbot in a specific color.
Colors are included in the header, the button, around the avatar, the loading animation and other places.

Example

<ab-chat chatbotID="YOUR-CHATBOT-ID" color="#8B5CF6"></ab-chat>

Logo URL

This logo will be displayed on the Chatbot button and as the avatar next to each message.

Example

<ab-chat chatbotID="YOUR-CHATBOT-ID" logoURL="https://cdn.some-page.com/logo.png"></ab-chat>

Headline

This will be displayed as the headline of the Chatbot.

Example

<ab-chat chatbotID="YOUR-CHATBOT-ID" headline="Chat with our AI"></ab-chat>

Description

This will be displayed as the description of the Chatbot.
The description is the subtext that appears below the headline.

Example

<ab-chat
  chatbotID="YOUR-CHATBOT-ID"
  description="Ask any question and our AI will answer!"
></ab-chat>

Initial Message

This will be the first message that the Chatbot sends to the user when the Chatbot is opened.

Example

<ab-chat chatbotID="YOUR-CHATBOT-ID" initialMessage="How can I help you today?"></ab-chat>

Initial Message Popup Delay

This will determine how long the Chatbot will wait before showing the initial message as a popup.
If this is set to 0, the popup will not be shown.

Example

<ab-chat chatbotID="YOUR-CHATBOT-ID" initialMessagePopupDelay="5"></ab-chat>

Placeholder

This will be the placeholder text of the input field.

Example

<ab-chat chatbotID="YOUR-CHATBOT-ID" placeholder="Type your message here..."></ab-chat>

New Chat Button Message

This will be the text of the New chat button in the header of the Chatbot.

Example

<ab-chat chatbotID="YOUR-CHATBOT-ID" newChatButtonText="Start a new chat"></ab-chat>

Back to Chat Button Text

This will be the text of the Back to chat button in the header of the Chatbot while the FAQ section is open.

Example

<ab-chat chatbotID="YOUR-CHATBOT-ID" backToChatButtonText="Back to chat"></ab-chat>

FAQ Button Text

This will be the text of the FAQ button in the header of the Chatbot.

Example

<ab-chat chatbotID="YOUR-CHATBOT-ID" faqButtonText="See FAQ"></ab-chat>

Ticket Button Text

This will be the text of the Ticket button in the header of the Chatbot.

Example

<ab-chat chatbotID="YOUR-CHATBOT-ID" ticketButtonText="Create a ticket"></ab-chat>

Policy Description

If you have a privacy policy, you can display a message to the user before they start chatting.

Example

<ab-chat
  chatbotID="YOUR-CHATBOT-ID"
  policyDescription="Please accept our privacy policy to continue."
></ab-chat>

Policy Link Title

This will be the text of the link to the privacy policy.

Example

<ab-chat chatbotID="YOUR-CHATBOT-ID" policyLinkTitle="Privacy Policy"></ab-chat>

Policy Link URL

This will be the URL of the privacy policy.

Example

<ab-chat
  chatbotID="YOUR-CHATBOT-ID"
  policyLinkURL="https://example.com/privacy-policy"
></ab-chat>

Policy Accept Button Text

This will be the text of the button that the user clicks to accept the privacy policy.

Example

<ab-chat
  chatbotID="YOUR-CHATBOT-ID"
  policyAcceptButtonText="Yes, got it"
></ab-chat>

Data Collection Message

The message that will be displayed to the user when the Chatbot will collect name and email data.

Example

<ab-chat
  chatbotID="YOUR-CHATBOT-ID"
  dataCollectionMessage="Let's get your name and email so we can follow up with you"
></ab-chat>

Data Collection Name Placeholder

The placeholder text for the name input field.

Example

<ab-chat
  chatbotID="YOUR-CHATBOT-ID"
  dataCollectionNamePlaceholder="Your name"
></ab-chat>

Data Collection Email Placeholder

The placeholder text for the email input field.

Example

<ab-chat
  chatbotID="YOUR-CHATBOT-ID"
  dataCollectionEmailPlaceholder="Your email"
></ab-chat>

Data Collection Button Text

The text of the button that the user clicks to submit their name and email.

Example

<ab-chat
  chatbotID="YOUR-CHATBOT-ID"
  dataCollectionButtonText="Add information"
></ab-chat>

Is Open

This will determine if the Chatbot is open or closed by default.

Example

<ab-chat chatbotID="YOUR-CHATBOT-ID" isOpen="true"></ab-chat>

Hide button

This will determine if the Chatbot button is hidden or visible.

Example

<ab-chat chatbotID="YOUR-CHATBOT-ID" hideButton="true"></ab-chat>

Use Ticket Modal

If a ticket form is connected, this will determine if the ticket form shows in a modal or inside the chatbot widget. If set to true, the ticket form will show in a modal.

Example

<ab-chat chatbotID="YOUR-CHATBOT-ID" useTicketModal="true"></ab-chat>

Max Height

This will determine the maximum height of the Chatbot.

Example

<ab-chat chatbotID="YOUR-CHATBOT-ID" maxHeight="48rem"></ab-chat>

Min Height

This will determine the minimum height of the Chatbot.

Example

<ab-chat chatbotID="YOUR-CHATBOT-ID" minHeight="32rem"></ab-chat>

User ID

If you want to identify the user, you can pass a unique ID here.

Example

<ab-chat chatbotID="YOUR-CHATBOT-ID" userID="a64427d6"></ab-chat>

Username

If you want to identify the user by a username, you can pass it here.

Example

<ab-chat chatbotID="YOUR-CHATBOT-ID" username="John Doe"></ab-chat>

Email

If you want to identify the user by an email, you can pass it here.

Example

<ab-chat chatbotID="YOUR-CHATBOT-ID" email="john@doe.com"></ab-chat>

Profile Image URL

If you want to display a profile image for the user, you can pass the URL here.
This will be displayed as the avatar next to each message of the user.

Example

<ab-chat
  chatbotID="YOUR-CHATBOT-ID"
  profileImageURL="https://cdn.some-page.com/profile-sm.png"
></ab-chat>

Reference ID

If you want to identify the user by a separate reference ID, you can pass it here.

Example

<ab-chat chatbotID="YOUR-CHATBOT-ID" referenceID="a738d158892b"></ab-chat>

Methods

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

// Get the DOM node of the Chatbot
const chatbot = document.getElementById('my-chatbot');
 
// Programmatically open the Chatbot
chatbot.open();

Open

This will open the Chatbot.

Example

chatbot.open();

Close

This will close the Chatbot.

Example

chatbot.close();

Toggle

This will toggle the Chatbot between open and closed.

Example

chatbot.toggle();

Set New Conversation

This will reset the Chatbot and start a new conversation.

Example

chatbot.setNewConversation();

Show FAQ Section

This will show the FAQ Section of the Chatbot.
This is only needed if you have FAQs connected.

Example

chatbot.showFAQSection();

Show Ticket Section

This will show the ticket form section of the Chatbot.
If useTicketModal is set to true, this will open the ticket form modal.

This is only needed if you have a ticket form connected.

Example

chatbot.showTicketSection();

Show Chat Section

If the FAQ Section is currently visible, this will switch to the Chat Section.

Example

chatbot.showChatSection();

Go Back

If an FAQ article is currently displayed, this will go back to the FAQ Section.

Example

chatbot.goBack();

Callbacks

You can pass callbacks to the Chatbot to listen to certain events.

Example

<ab-chat
  id='my-chatbot'
  chatbotID='YOUR-CHATBOT-ID'
></ab-chat>

const chatbot = document.getElementById('my-chatbot');
 
// Assign a callback to the ready event
chatbot.onReady = () => {
  console.log('Chatbot is ready!');
};

On Ready

When the DOM element is registered on the page, the Chatbot will make an initial request to the Aidbase API to fetch the configuration for the Chatbot.

When the configuration is fetched and validated, the Chatbot will be ready to use.
The onReady() callback will be called immediately after the Chatbot is ready.

Example

chatbot.onReady = () => {
  console.log('Chatbot is ready!');
};

On Error

If the Chatbot encounters an error during the process described above, the onError() callback will be called.

Example

chatbot.onError = (error) => {
  console.error('Something went wrong: ' + error);
};

On Data Collected

Once the Chatbot collects data from the user, the onDataCollected() callback will be called.

interface UserData {
  name?: string;
  email: string;
}

Example

chatbot.onDataCollected = ({ name, email }) => {
  console.log('User data collected:', name, email);
};