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.

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:

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

  • Solution: Ensure the embed token is correct and the script is successfully loaded. Check the browser console for errors.

• Issue: Data is not being sent or received properly

  • Solution: Verify that the SendDataToChatbot method is being called with valid parameters. Use the message event listener to check for errors or missing data.

• Issue: The chatbot does not open or close as expected

  • Solution: Ensure the appropriate method (window.openChatbot() or window.closeChatbot()) is called at the right time. Check if other conflicting JavaScript is affecting the execution.

• RAG Access Key: Provided by gtwy.ai to sign your JWT token.

• User ID: The identifier associated with your user within the system.

• Organization ID (org_id): The unique identifier for your organization within the platform.

If you don’t have access to the required credentials, reach out to your project admin or request them from your platform administrator.

2. Create a JWT Token

The JWT token is necessary for authenticating requests to the RAG API. Here’s how you can create it:

2.1 Gather Required Information

You’ll need the following values to generate the JWT token:

• org_id: Your organization’s unique identifier.

• user_id: The User ID linked with the token.

• rag_access_key: The secret key provided by gtwy.ai, used for signing the JWT token.

2.2 Generate the JWT Token

The JWT token needs to be signed using the HS256 algorithm. Below is an example of the JSON payload format:

{   
  "org_id": "your_org_id_here",   
  "user_id": "your_user_id_here" 
}

3. Integration

Here's a more specific version of the script integration, including instructions on how to embed the RAG script with the correct token and open the modal:

<script  
     id="rag-main-script"   
     embedToken="YOUR_ACTUAL_EMBED_TOKEN"   
     src="https://chatbot-embed.viasocket.com/rag-prod.js">
</script> 

Steps:

1. Replace YOUR_ACTUAL_EMBED_TOKEN with the token provided to you by the RAG service.

2. Once this script is included in your HTML, the RAG functionality will be available.

Opening the RAG Modal:

To open the RAG modal at any point in your app, use the following JavaScript function:

window.openRag(); 

You can call this function when a user clicks a button or triggers a specific action in your app.

Example:

If you want to open the modal when a button is clicked, use the following HTML and JavaScript:

<!-- Button to open the RAG modal --> 
<button onclick="window.openRag()">Open RAG Modal</button>