This document will guide you through the process of generating a JWT token for integrating
gtwy.ai
ChatBot. The token will be created using your organization's ID (
org_id
), the ChatBot ID (
chatbot_id
), and the User ID (
user_id
). The token will be signed with an access key provided by
gtwy.ai
.
1. Gather Required Information
To create the JWT token, you will need the following information:
org_id: Your organization's unique identifier.
chatbot_id: The ID of the ChatBot you are integrating.
user_id: The User ID that will be associated with the token.
access key: A secret key provided by
gtwy.ai
, used to sign the JWT token.
2. Create the JWT Token
The JWT token will be signed using the HS256 algorithm. Below is an example of how to structure the JSON payload for the JWT token:
{
"org_id": "1277",
"chatbot_id": "6650628ad48e20e61cf701a0",
"user_id": "your_user_id_here",
"variables": { "key": "value" }
}
After generating the JWT token, include it as a parameter within the script tag with the ID 'chatbot-main-script'
, specifically in the embedToken
parameter. This will facilitate seamless integration.
ℹ️Note: Flows of an embed project will be different for all users, so make sure you pass a unique user_id
to ensure every user has their own flows.
3. Integration
3.1. Embedding the Chatbot Script
To load the chatbot into your application, include the following script in your HTML. Be sure to replace <Enter Embed Token here>
with your actual embed token.
<script
id="chatbot-main-script"
embedToken="Enter Embed Token here"
src="https://chatbot-embed.viasocket.com/chatbot-prod.js" >
</script>
Once this script is added to your webpage, the chatbot will be ready to use.
3.2. Listening for Data from the Chatbot
To receive data from the chatbot, use the message
event listener. This will allow you to capture and process data sent from the chatbot.
Usage:
window.addEventListener('message', (event) => {
const receivedData = event.data; // Handle the received data here
});
3.3. Available Functions for Interacting with the Chatbot
3.3.1 Sending Data to the Chatbot
You can send data to the chatbot using the window.SendDataToChatbot
method. This method allows you to specify several parameters when interacting with the chatbot.
window.SendDataToChatbot({
bridgeName: '<slugName_of_bridge>',// The slug name of the bridge (required)
threadId: <id>, // The ID corresponding to the chat store (required) parentId: '<parent_container_id>', // The parent container ID for where you want the chatbot to appear (optional)
fullScreen: 'true/false', // Whether to open the chatbot in full screen (optional) hideCloseButton: 'true/false', // Whether to hide the close button (optional)
hideIcon: 'true/false', // Whether to hide the chatbot icon (optional) variables: {} // Additional variables for the chatbot (optional)
});
Parameters Description:
Parameter | Type | Description | Required |
---|
bridgeName | string | The slug name of the bridge. | Yes |
threadId | string | The ID corresponding to the chat store. | Yes |
parentId | string | The parent container ID where the chatbot should open. | No |
fullScreen | boolean | Whether to open the chatbot in full screen. | No |
hideCloseButton | boolean | Whether to hide the close button. | No |
hideIcon | boolean | Whether to hide the chatbot icon. | No |
variables | object | Additional variables you want to pass to the chatbot. | No |
3.3.2 Opening the Chatbot Explicitly
To open the chatbot explicitly, you can call the window.openChatbot()
function:
window.openChatbot();
This method will open the chatbot in the default state, or you can pass specific configurations using SendDataToChatbot()
beforehand.
3.3.3 Closing the Chatbot Explicitly
To close the chatbot programmatically, use the following method:
window.closeChatbot();
3.4 Troubleshooting and Common Issues
Issue: Chatbot is not appearing
Issue: Data is not being sent or received properly
Issue: The chatbot does not open or close as expected