Steps to integrate Embed

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.

Script Integration

1. Add the Embed Script to Your Code:

• Copy the code snippet provided below and paste it into your web page where you want the embed to appear. This script loads the necessary embed content into your app.

  <button   id="viasocket-embed-open-button"  onclick="openViasocket()" > Open Integrations </button>
  <script id="viasocket-embed-main-script"  src="https://embed.viasocket.com/prod-embedcomponent.js"
  embedToken="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwcm9qZWN0X2lkIjoicHJvamUyR20zNlZ0Iiwib3JnX2lkIjoiODA2OSIsInVzZXJfaWQiOiJvS2xOZyIsImlhdCI6MTc1NDI5MDk5M30.VSpnGSiqLotw1RgUAHejeB6NoOrqVi3czLIoC0tVhYQ"></script>

Token Creation

1. Create a JWT Token:

• The embedToken in the script needs to be generated. This is a secure token used to authenticate and load the embedded content.

• To create this token, use your access key, org_id, project_id, and user_id.

{
  "org_id": "4160",
  "project_id": "projouMemJ2Q",
  "user_id": "unique_user_id"
}

2. How to Create the Token:

• Use a JWT (JSON Web Token) to create this token by signing it with your access key.

• Once created, insert the embedToken in the script tag. (Guide to create JWT token)

• You can create a token simply with jwt.io.

Configure Display and Embed Settings

1. Display Settings:

• Control the visibility of features like enabled flows, templates, and webhooks.

• Hide advanced options (e.g., custom logic, API) from non-technical users for a simplified interface.

• Option to show popular integrations and prioritize them for users.

2. Choose Display:

• Customize the button title and add a custom title and subtitle to clarify the purpose.

• Choose between different display types: full-screen, side sliders, or pop-up modals for embedding.

3. Button Type and Dimensions:

• Default button style or custom styling for flexibility.

• Set the button’s height and width to either full (100%) or custom sizes depending on the space available.

4. Available Integrations:

• Integrate third-party apps like Webhooks, Google Sheets, Airtable, and more to enhance your app’s functionality.

By configuring these settings, you can tailor the integration’s user interface, enhance usability, and efficiently manage the third-party integrations.