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