Steps to integrate Embed

Go to Integrations, you will find it in Developer Hub options.

Create an Integration

Choose your service and its actions or triggers it allows for other apps to integrate, if you are choosing a webhook as trigger you can also choose the response format.z

Adjust Display Configuration

You can configure the Via-socket embed component in the Configuration Tab, where you have the ability to set dimensions, select the default or custom Button, to determine whether it should be styled by us or not. This gives you control over various aspects of the component's appearance and functionality, allowing for a tailored integration that aligns with your preferences and design requirements.

Generate JWT token

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


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 sendind message on slack channel",
    "id": "scrid8WP01o3",
    "payload": {
    "body": {
        "language" : "C++",
"rank" : 3    
    "query": {
"language" : "Javascript",
"rank" : 1
    "webhookurl": ""

Follow More Articles like this:-