Chatbot
Reference

Chatbot - Reference

Bundle / Package

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

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

Attributes / Props

You can include attributes in the <ab-chat> tag to customize the Chatbot.
Most of these configurations are available from the Aidbase Dashboard, but you can override their values here.

Below is a full example of the <ab-chat> tag with all available attributes.

HTML
<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.

AttributeTypeDefault value
themestringlight

Example

HTML
<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.

AttributeTypeDefault value
orientationstringright

Example

HTML
<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.

AttributeTypeDefault value
colorstringN/A

Example

HTML
<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.

AttributeTypeDefault value
logoURLstringN/A

Example

HTML
<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.

AttributeTypeDefault value
headlinestringN/A

Example

HTML
<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.

AttributeTypeDefault value
descriptionstringN/A

Example

HTML
<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.

AttributeTypeDefault value
initialMessagestringN/A

Example

HTML
<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.

AttributeTypeDefault value
initialMessagePopupDelaynumber0

Example

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

Placeholder

This will be the placeholder text of the input field.

AttributeTypeDefault value
placeholderstringN/A

Example

HTML
<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.

AttributeTypeDefault value
newChatButtonTextstringChat with us

Example

HTML
<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.

AttributeTypeDefault value
backToChatButtonTextstringBack to chat

Example

HTML
<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.

AttributeTypeDefault value
faqButtonTextstringFAQ

Example

HTML
<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.

AttributeTypeDefault value
ticketButtonTextstringCreate a ticket

Example

HTML
<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.

AttributeTypeDefault value
policyDescriptionstringN/A

Example

HTML
<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.

ℹ️

This must be used in conjunction with the policyLinkTitle and policyLinkURL attributes.

AttributeTypeDefault value
policyLinkTitlestringN/A

Example

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

Policy Link URL

This will be the URL of the privacy policy.

AttributeTypeDefault value
policyLinkURLstringN/A

Example

HTML
<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.

AttributeTypeDefault value
policyAcceptButtonTextstringYes, got it

Example

HTML
<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.

AttributeTypeDefault value
dataCollectionMessagestringN/A

Example

HTML
<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.

AttributeTypeDefault value
dataCollectionNamePlaceholderstringEmail

Example

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

Data Collection Email Placeholder

The placeholder text for the email input field.

AttributeTypeDefault value
dataCollectionEmailPlaceholderstringEmail

Example

HTML
<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.

AttributeTypeDefault value
dataCollectionButtonTextstringAdd information

Example

HTML
<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.

AttributeTypeDefault value
isOpenbooleanfalse

Example

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

Hide button

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

AttributeTypeDefault value
hideButtonbooleanfalse

Example

HTML
<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.

AttributeTypeDefault value
useTicketModalbooleanfalse

Example

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

Max Height

This will determine the maximum height of the Chatbot.

AttributeTypeDefault value
maxHeightstring56rem

Example

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

Min Height

This will determine the minimum height of the Chatbot.

⚠️

The Chatbot is built responsively and will automatically adjust its height based on the screen size.
Use this attribute with caution.

AttributeTypeDefault value
minHeightstringN/A

Example

HTML
<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.

ℹ️

If you do not provide a user ID, the Chatbot will generate a random ID for you.
This can be used to identify the user in the Aidbase Dashboard.

AttributeTypeDefault value
userIDstringN/A

Example

HTML
<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.

AttributeTypeDefault value
usernamestringN/A

Example

HTML
<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.

AttributeTypeDefault value
emailstringN/A

Example

HTML
<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.

AttributeTypeDefault value
profileImageURLstringN/A

Example

HTML
<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.

ℹ️

If you provide a reference ID and do not provide a user ID, the reference ID will be used as the user ID.

AttributeTypeDefault value
referenceIDstringN/A

Example

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

Methods

You can query the DOM node of the Chatbot and call methods on it.

Example

HTML
<ab-chat
  id='my-chatbot'
  chatbotID='YOUR-CHATBOT-ID'
  // ...additional attributes
></ab-chat>
JavaScript
// 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.

MethodTypeReturn value
open()Functionvoid

Example

chatbot.open();

Close

This will close the Chatbot.

MethodTypeReturn value
close()Functionvoid

Example

chatbot.close();

Toggle

This will toggle the Chatbot between open and closed.

MethodTypeReturn value
toggle()Functionvoid

Example

chatbot.toggle();

Set New Conversation

This will reset the Chatbot and start a new conversation.

MethodTypeReturn value
setNewConversation()Functionvoid

Example

chatbot.setNewConversation();

Show FAQ Section

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

MethodTypeReturn value
showFAQSection()Functionvoid

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.

MethodTypeReturn value
showTicketSection()Functionvoid

Example

chatbot.showTicketSection();

Show Chat Section

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

MethodTypeReturn value
showChatSection()Functionvoid

Example

chatbot.showChatSection();

Go Back

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

MethodTypeReturn value
goBack()Functionvoid

Example

chatbot.goBack();

Callbacks

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

Example

HTML
<ab-chat
  id='my-chatbot'
  chatbotID='YOUR-CHATBOT-ID'
></ab-chat>
JavaScript
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.

CallbackTypeReturn value
onReady()Functionvoid

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.

CallbackTypeReturn value
onError(error: Error)Functionvoid

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.

CallbackTypeReturn value
onDataCollected(data: UserData)Functionvoid
UserData Type Interface
interface UserData {
  name?: string;
  email: string;
}

Example

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

Aidbase Docs © 2024