How to setup frontend Chat API

This feature is available in selected plans only. At the moment it allows you to hide/show chat widget and introduce your own callbacks for chat events.

Actions

You can execute one of following methods showChat, hideChat and toggleChat. First you need to obtain access to the frontend API of the chatbot. To do that run the following:

window.aichatbotApi.getChatbotApi(chatbotId)

The value of chatbotId is available in your chatbot overview pane in the chatbot admin.

The object return has following methods

💡 Before calling sendMessage and updateClientContext make sure that the chatbot has active session (register on onSessionActivated callback)

Callbacks

Three chat events are available:

• user message - handled by onUserMessage(userMessage:string)

• chatbot message - handled by onChatbotMessage(chatbotMessage:string)

• session activated - handled by onSessionActivated()

In order to add such callbacks to your chatbot you need to add following script snippet to your html page:

<script>
    window.aichatbotCallback = {
        onUserMessage(message) {
            console.log('onUserMessage', message);
						/*your handler for the user message
            ....
						*/
        },
        onChatbotMessage(message) {
            console.log('onChatbotMessage', message);
            /*your handler for the chatbot message
            ....
						*/

        },
        onSessionActivated() {
            console.log("onSessionActivated");
            /* your handle for the session actived event */
        }
    }
</script>

Update client context

The updateClientContext function allows the frontend to update a client's context at any point during an active session.

Request Structure:

{
	"clientId": "unique client identifier",               // Required
	"clientName": "John",                                 // Optional
	"clientEmail": "john@doe.com",                        // Optional
	"clientPhone": "555-444-333",                         // Optional
	"clientSecurityToken": "85d63254-e87f-46d2-bdd3-c6c88828849f",  // Optional
	"clientHostContext": {                                // Optional
		"param1": "value1",
		"param2": "value2"
	}
}

Parameters Explanation:

• clientId (required): A unique identifier for the client. Must be provided for each update call to correctly associate the context with the specific user.

• clientName, clientEmail, clientPhone (optional): If provided, these attributes update the client's context. After a successful update, these details will be displayed in conversations with the specified user.

• clientSecurityToken (optional): A security token used mainly for API authorization. If this parameter is omitted, all API functions configured to use this parameter will remain inactive.

• clientHostContext (optional): Allows passing additional context parameters specific to the client. Parameters within clientHostContext can be accessed individually in custom AI API actions.

Usage in API calls:

All provided context attributes can be utilized in API function calls. To use them, configure the API parameter as type "Context" and specify the exact attribute name as follows:

• clientName

• clientEmail

• clientPhone

• clientSecurityToken

• Custom host context parameters prefixed by client, e.g., clientparam1, clientparam2

After a successful invocation, the chatbot identifies the user and can personalize interactions based on the updated context.