viaSocket Embed

This document will help you to understand how to create the JWT token for integrating the viasocket.

Creating JWT token

To create JWT token you need to get org_id, user_id, project_id and access key.

We will be using the HS256 to encrypt the JWT token.

While setting up the SDK from viasocket, we will provide you the project_id, org_id and access key.

create an json using the required details as shown below.

{
  "org_id": "Tix4zpLRv9vq",
  "project_id": "projQRZP6Nzm",
  "user_id": "[email protected]"
}

and create the JWT token using the json and provided access key.

After generating the JWT token, include it as a parameter within the script tag with the ID 'viasocket-embed-main-script', specifically in the embedToken parameter. This will facilitate seamless integration.

Note: Flows of a embed project will be different for all the users, so make sure you pass unique user_id to make sure every users have their own flows.

To generate a JWT token, please refer to the Configuration Tab for the required data. Additionally, ensure to include the user_id, which serves as a unique identifier for each user instance. Users will only have access to view flows associated with their respective user_id. You can create a token simply with jwt.io.

Copy SDK code

Please integrate the following code snippet into your application's existing codebase. It is essential to maintain consistency with the provided IDs and attributes. You can skip to pass the open button's ID if button is set to custom.

The openViasocket function is versatile and can be utilized to open a specific flow by passing the flow ID as a parameter.

Sharing Data to Parent

Using the window.addEventListener('message'), shown in the above SDK image, you can get the valuable information about a particular flow when any action is performed by the user in the below format.

{
      "action": "initiated",
      "description": "This flow is created for sending message on slack channel",
      "id": "scrid8WP01o3",
      "payload": {
      "body": {
          "language" : "C++",
           "rank" : 3    
          },
      "query": {
          "language" : "Javascript",
           "rank" : 1
          }
      },
 "webhookurl": "http://flow.viasocket.com/func/scrid8WP01o3"
 }

• "action" will show the status about a flow.
  1. "initiated" : This will show if the flow is created for the first time or has not been published yet.
  2. "published" : This action will tell user that the flow has been published.
  3. "deleted" : This is for when the flow gets deleted.
• "description" will tell us about what this flow does.
• "id" is a unique flow identifier.
• "webhookurl" is flow invocation URL.
• "payload" : It consist the payload which is used to hit the webhookurl of flow.

Follow More Articles like this:-

• How to create JWT token
• Custom Parameter in SDK

<script 
 primaryApp ="app_slug_name"
 appName1="app_slug_name"
 appName2=""app_slug_name"
 id ='viasocket_integrations' 
 crossorigin="anonymous"
 src="https://integrations.viasocket.com/integrations.js"></script>

Benefits of Adding This Script

• Showcase Relevant Integrations – Display the most commonly used integrations for your platform.

• Enhance User Experience – Allow users to discover and set up automation without leaving your platform.

• Quick Implementation – Simply copy and paste the script, customize it, and go live.

• Flexible Placement – Use it on your website, blogs, or inside your product to illustrate real-world use cases.

Getting Started

1. Copy the script above and paste it into your website’s HTML.

2. Replace your-app with your actual platform’s name.

3. Update appName1 to appName5 with the apps your users commonly automate with.

4. Save and deploy the changes to your website, blog, or product interface.

Once implemented, this will provide an interactive way for your users to explore and set up integrations effortlessly.

For any assistance, feel free to reach out.