viasocket
Press ⌘ + K to search

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.

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 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:-