1. Home
  2. Docs
  3. Code
  4. Chatbot

Chatbot

The chatbot components includes
1. A customizable chatbot frontend widget
2. A chatbot backend service that handles session information and provides endpoint request/response

How to customize the Chatbot frontend

That Chatbot tab includes an HTML fragment that will be presented to the user on the chatbot widget. This HTML includes CSS styling for the chatbot appearance and the chat structure with its templates.

  • All elements with the class “template” will not be seen.
  • The element with the classes “bubble.answer.template” is the template for the answer bubble
  • The element with the classes “bubble.query.template” is the template for the query bubble

The Chatbot is using the following functions, which you can override in the chatbot rules if needed.

Function Comment
addQuery(queryText) queryText – string
Creates a new query bubble with the specified text
then sending the text to fetchAnswer to communicate with the endpoint API
addAnswer(response) response – object
Creates a new answer bubble based on the response received from fetchAnswer
if response type is text – it’ll print the text,
if the response type is imgUrl – it’ll load the picture
fetchAnswer(queryText, queryType) queryText – string, queryType – string (‘text’,’imgUrl’)
Sends an Ajax request to the endpoint API
then calling addAnswer based on the response received
Was this article helpful to you? Yes 1 No

How can we help?