🤖 Chatbot
⚙️ Customization
Chatbot SDK
Web

Introduction

This documentation provides details on how to use the Chatbot Web SDK. The Chatbot Web SDK allows you to integrate a chatbot into your website.

To integrate the Chatbot Web SDK into your website, you need to inject the following script:

<script 
    src="https://widget.yourgpt.ai/script.js" 
    id="yourgpt-chatbot" 
    data-widget="<YOUR_WIDGET_ID>">
</script>

Replace YOUR_WIDGET_ID with your actual widget ID. You can find your widget ID in the Chatbot Dashboard (opens in a new tab).

Note: Make sure to load this script before accessing the $yourgptChatbot variable for calling functions. The $yourgptChatbot variable is only available after the script is loaded.

$yourgptChatbot

After the Chatbot Web SDK script is loaded, the $yourgptChatbot variable becomes available. This variable provides methods to interact with the chatbot.

Execution Commands

These are the commands that can be executed using the $yourgptChatbot.execute() function.

CommandDescription
widget:openOpens the chatbot.
widget:closeCloses the chatbot.
message:sendSends a message to the chatbot.
message:send payload
PropertyDescriptionTypeDefault
textThe message text.string
sendIndicates whether the message should be sent to the chatbot or not.booleanfalse

Opening the chatbot

$yourgptChatbot.execute("widget:open");

Sending a message to the chatbot

$yourgptChatbot.execute("message:send", { text: "Hello",send: true});

Here the text is the message that you want to send to the chatbot. The send parameter is a boolean value that indicates whether the message should be sent to the chatbot or not. If the send parameter is set to false, the message will be displayed in the chatbot but will not be sent to the chatbot.

Note: This command will open the chatbot if it is not already open.

Closing the chatbot

$yourgptChatbot.execute("widget:close");

Event Listeners

The Chatbot Web SDK provides event listeners that you can use to listen to events that occur in the chatbot. To add an event listener, you need to call the $yourgptChatbot.on(event,callback) function.

Event NameDescriptionArguments
initTriggered when the chatbot is initialized.
widget:popupTriggered when the chatbot popup opens or closes. It provides a boolean in the callback indicating the state (true for open, false for closed).state:boolean

Example: Listen to the init event

$yourgptChatbot.on("init", function() {
    console.log("Chatbot initialized");
});

Removing an event listener

To remove an event listener, you need to call the $yourgptChatbot.off(event,callback) function.

Set Command

The Chatbot Web SDK provides a set command that you can use to set visitor, session and widget data. To set data, you need to call the $yourgptChatbot.set(type,data) function.

TypeDescriptionPayload
visitor:dataSets the visitor data.object
session:dataSets the session data.object

Example: Set visitor data

$yourgptChatbot.set("visitor:data", {
    customKey: "value",
});

Example: Set session data

$yourgptChatbot.set("session:data", {
    customKey: "value",
});