Chatbot
Customization

Chatbot - Customization

When using the low-code approach, you can configure the Chatbot's behavior by adding attributes to the ab-chat element or by giving the React component props.

HTML
<ab-chat
  chatbotID="YOUR-CHATBOT-ID"
  theme="dark"
  orientation="left"
  color="#ff0000"
  logoURL="https://example.com/logo.png"
  headline="Chat with our AI"
  description="Ask me anything, and I'll do my best to answer!"
  initialMessage="Hello 👋 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"
  hideButton="true"
  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"
></ab-chat>

When you add an attribute to the ab-chat or Chat element, this value will override the value in the Chatbot settings.

See all the available attributes in the Chatbot Reference.


Aidbase Docs © 2024