viaSocket Embed

• The Flow/Integration slider in Embed mode will display a comprehensive list of all flows and integrations associated with a user.
• Through the Configuration settings, you have the capability to toggle the visibility of the Flow/Integration slider, allowing you to show or hide it based on your preferences.

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": "idrisbohasdfasdf@gmail.com"
}

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.

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

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

• How to create JWT token
• Custom Parameter in SDK

• How can viaSocket help businesses with automation and integrations?

  viaSocket enables businesses to automate workflows by connecting their chatbots and applications with over 5,000 third-party services. It allows seamless data exchange, real-time updates, and task automation across CRMs, e-commerce platforms, scheduling tools, and more—enhancing efficiency, reducing manual effort, and improving user experience.

• What is an LLM, and how does it power chatbots?

  LLMs (Large Language Models) like GPT-4 enable chatbots to understand and generate human-like responses. They process natural language, provide context-aware answers, and handle complex queries dynamically. Unlike rule-based bots, LLM-powered chatbots adapt, personalize responses, and perform tasks like summarization, translation, and automation, making interactions more intelligent and efficient.

• What are the limitations of chatbots without integrations?
  They can only provide static, text-based responses and lack real-time data access, automation, and workflow-triggering capabilities.

• How can integrating with third-party apps improve chatbot functionality?
  Integrations allow chatbots to fetch live data, automate tasks, update systems, and perform real-world actions.

• Which types of applications can my chatbot integrate with?
  CRMs (Salesforce, HubSpot), calendars (Google Calendar, Calendly), e-commerce platforms (Shopify), email marketing tools (Mailchimp), and more.

Automation is transforming the way businesses operate, making workflows more efficient and less error-prone. One of the best ways to unlock this potential is by integrating your apps seamlessly. The viaSocket integration script helps you showcase how different applications can work together to automate tasks and improve your productivity.

For example, by embedding this simple script into your website or app, you can showcase automation between two tools, like Calcom and others, to demonstrate how they can complement each other and save time.

Here’s how it works:

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

Why Use This Script?

This script acts as a bridge between applications, showcasing real-time automation use cases. It allows you to easily demonstrate how two different tools—like a calendar app (e.g., Calcom) and a CRM, project management tool, or communication platform—can be automated to work in sync, eliminating manual tasks and reducing inefficiencies.

Key Benefits of Showcasing Automation Use Cases:

1. Streamlined Processes: Automate routine tasks like scheduling, data transfer, and notifications, freeing up time for more strategic efforts.

2. Real-Time Demonstration: Showcase how the integration between apps can improve efficiency, helping your team and clients see the value of automation immediately.

3. Error Reduction: With automated workflows, the chances of human error are significantly reduced, ensuring smoother operations.

4. Customizable Workflows: Display how different apps can be customized to meet specific business needs through automation, providing tailored solutions.

By using the viaSocket integration script, you can demonstrate the endless possibilities of automating tasks across different tools. This helps you visualize the future of connected apps and how easy it can be to create seamless workflows.