Embed

viaSocket offers three embedding options to bring automation and integrations into your SaaS product. Each embed type offers a different level of user control and integration complexity.

This guide outlines how each embed works, why you might choose it, and when it’s the right fit — using use cases that clearly map to the type.

1. Workflow Embed

How it works

This embed allows users to build complete workflows using a visual builder inside your application. They can define what triggers the workflow (either from your app or external apps) and what actions to perform (using your app or third-party services).

Why choose this

Best for SaaS platforms that want to give users complete flexibility to automate across tools, apps, and internal events — with full control over when and how things happen.

Use case example

A CRM platform wants users to build custom workflows like:

• "When a new lead is added in the CRM, create a contact in HubSpot and notify the sales team on Slack."

• "When a form is submitted in Typeform, create a new deal in the CRM and send a confirmation email."

Users control both the trigger (CRM or external tool) and the actions (Slack, HubSpot, Email), building end-to-end workflows inside your product.

2. Action Embed

How it works

This embed allows users to configure what actions to take when predefined events occur in your app. Users do not create or manage triggers — the system sends those events behind the scenes.

Why choose this

Ideal for products that want to centralize control over workflow triggers but still give users flexibility to customize how data flows to other tools.

Use case example

A helpdesk platform includes automation options such as:

• "When a support ticket is created (system event), send a message to a Slack channel."

• "When a ticket is marked as resolved, log it into a Google Sheet and send a feedback survey to the customer."

Users only decide the actions — the trigger is fixed and comes from the system. This keeps things simple and aligned with specific app events.

3. Auth Embed

How it works

This embed allows users to securely connect third-party apps (like Gmail, Notion, or Google Sheets) via an embedded authentication interface. No workflow builder or automation configuration is shown.

Why choose this

Best for platforms that need to use third-party services in the background — like importing data or sending emails — but don’t want to build and maintain OAuth or token logic themselves.

Use case example

A marketing automation tool wants users to connect apps like:

• Gmail — to send campaigns.

• Google Sheets — to import contacts.

• Notion — to sync content blocks.

There are no workflows or actions configured by the user — they simply connect their accounts so your app can access the data behind the scenes.

Comparison Summary

Choosing the Right Embed

• Use Workflow Embed to let users build their own automation logic using both triggers and actions.

• Use Action Embed to keep control over system triggers while letting users define outputs.

• Use Auth Embed when you just need to give users a secure way to connect apps — without workflows.

Need help implementing these or combining them? Contact us at

[email protected]

Invoking the openViasocket() by passing the existing flow-id, created inside the Integration, viaSocket will open that particular flow in iFrame.

• 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": "[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.

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

• 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.

viaSocket makes it easy for you to display and enable integrations between your platform and the apps your users frequently automate with. By embedding a simple script, you can provide a seamless way for users to discover and connect integrations directly from your platform.

This script can be used on your website, blogs, or even within your product to highlight key use cases.

Integration Script

To implement this functionality, add the following script to your website:

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

How It Works

• primaryApp – Defines your platform as the main app for which integrations will be displayed.

• appName1 to appName5 – Specifies the app’s slug name that your users frequently integrate with.

  📌

  How many apps can you integrate?

  You can integrate up to 10 apps with the primary app using a 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.

What is a Billing Partner?

A Billing Partner is a SaaS application that partners with viaSocket to provide Single Sign-On (SSO) login for their users. Through this integration:

• Users of the Billing Partner’s SaaS app can seamlessly access viaSocket without needing separate signups.

• These users are automatically recognized as viaSocket users through redirection and SSO authentication.

• The Billing Partner assumes the responsibility for billing viaSocket on behalf of these users.

How Does the Billing Partner Model Work?

1. SSO Integration
   The Billing Partner integrates with viaSocket’s SSO system, enabling their users to log in to viaSocket directly from their platform.

2. User Redirection & Identification
   When a user attempts to access viaSocket, they are redirected via the Billing Partner’s authentication flow. viaSocket identifies these users through the SSO token and grants access accordingly.

3. User Status & Access
   Once authenticated, the user gains access to viaSocket’s services as a valid user without needing a separate viaSocket account creation.

4. Billing Responsibility
   The Billing Partner is responsible for paying viaSocket for all usage generated by their redirected users, based on agreed pricing and usage metrics.

Benefits of Becoming a Billing Partner

• Seamless User Experience: Your users get immediate access to viaSocket features without creating new accounts or managing additional credentials.

• Increased User Engagement: Offering viaSocket through SSO enhances your product’s value proposition and ecosystem.

• Simplified Billing: Consolidate billing through your organization, eliminating the need for individual user billing management.

• Revenue Sharing & Growth: Build a recurring revenue stream by partnering with viaSocket and enabling your users to leverage cutting-edge workflow automation.

Responsibilities of the Billing Partner

• Implement and Maintain SSO Integration: Ensure reliable and secure SSO connectivity with viaSocket.

• User Data Accuracy: Provide accurate user identity information for billing and access management.

• Billing Payment: Pay viaSocket based on the usage of your users as per the terms of the partnership agreement.

• Support Collaboration: Work collaboratively with viaSocket’s support and technical teams to resolve user access or billing issues promptly.

Technical Overview

• SSO Protocol: viaSocket supports standard SSO protocols (e.g., SAML, OAuth 2.0, OpenID Connect). Integration details will be provided upon partnership initiation.

• User Identification: viaSocket uses SSO tokens to map users to the corresponding Billing Partner account for usage tracking.

• Usage Reporting: viaSocket provides usage data reports attributing consumption to the Billing Partner for accurate billing reconciliation.

Next Steps for SaaS Apps Interested in Becoming Billing Partners

1. Contact viaSocket Partnership Team: Reach out at

   [email protected]

   for an initial discussion.

2. Technical Integration Planning: Collaborate on SSO setup and integration timelines.

3. Define Billing Terms: Agree on pricing, billing cycles, and usage reporting processes.

4. Launch & Monitor: Go live with the integration and monitor user activity and billing data collaboratively.