Embed Integrations Inside Your App Using the SDK (Deployment) – Integry

Integry's SDK inside your app enables your end-users to view listing of Flows, create a Flow, edit Flows, and delete Flows. The SDK is customizable and can adapt to the look and feel of your app. Meaning, your end-users can set up integrations with other apps natively through your app.

In this article, we'll help you embed SDK v3 in your apps.

What is a Deployment?

A deployment is a collection of Guided Flows that serve targeted integrations to the end-users.

In Integry, you can create two types of deployments.

SDK Deployment - This lets you embed Integry's SDK inside your app and host in-app integrations to your end-users.
Marketplace Deployment - This lets you host your Guided Flows or integrations on your In tegration Marketplace.

To add a Guided Flow inside the SDK, you need to add it to a deployment first. Once a deployment is created, you can always add more Flows to it without any additional work.

Note: Before deploying the SDK inside your app, you must get an App Connector built by Integry and create Guided Flows.

Embedding the SDK Inside Your App

Step 1: Click on the 'Deployments' tab and then click on 'Create SDK Deployment' (shown above).

This will take you to a Deployment builder screen where you'll have to fill in some information for your SDK. We'll describe each of these fields below.

Name: The name of your deployment.
Active: This is the status of your deployment. Its state determines if an end-user will be able to see the deployment in your app.
Flows: All the Guided Flows you have created and published from your account will appear in the Flows list. You can select Guided Flow(s) from this list and add them to the selected deployment. That will add these flows to the SDK embed.
App Key: This is the ID that uniquely identifies an app. This is generated automatically for every app on Integry’s side.
App Secret: The App secret is also a uniquely generated key for every app.
Deployment ID: This is the ID of the deployment in which all your Flows are saved. It is used in the SDK embed to open up a particular deployment when the SDK initializes.

Enter all these values in the Deployment builder screen.

Step 2: Add your deployment's name in the first field.

Step 3: Toggle this deployment active (green) or inactive (grey) to enable or disable the deployment in your app.

Step 4: Select Guided Flow(s) and click on the arrow to move from the 'Flows List' to the 'Selected Flows.'

Step 5: Copy your App Key, App Secret, and Deployment ID and use them in your app to embed the SDK. Both the App key and App Secret are private so they are redacted by default. You can click on the 'eye' icon to reveal the value and the 'copy' icon to copy it.

Server-side, Hash Generation Code

The SDK requires server or back-end configuration to calculate the hash that is used to authenticate the embed with Integry servers. The Hash is calculated using the User ID and the App Secret. The User ID can be a UUID (Universal Unique Identifier) that is stored at your server against each end-user of your app. Using this ID, your end-users can create, edit, or delete their Flows in your app.

The example code (shown above) can be used to generate the hash.

This code is available in multiple languages. You can view the options by clicking on the button that displays the default language, i.e., JavaScript.

Embed Code

Use this embed code to install the SDK package in your browser. In case you are using a module bundler such as npm or yarn, please visit our SDK documentation to learn how to install the SDK in your environment.

Once you install the SDK package in your browser, an event (as demonstrated in this code) is fired that indicates that the SDK script has loaded successfully.

You can now call the SDK init method. Integry SDK will then use the App key, User ID, Deployment ID and Hash to initialize the SDK.

Note: Ideally the Hash should be calculated using the server-side code. However, in the Embed Code we do have a helper function available for you to directly use the App Secret and any user ID to test your code. However, this is not recommended for production use because the App Secret will be embedded in the HTML and anyone who has access to the page source will be able to view it. Therefore, please use this helper function only in a test environment.

Step 8: You have the option to download a sample HTML file that has all the code necessary for the embed to work. You only have to fill in your app key and secret in this HTML file. You can also click on the 'Preview' button to preview your SDK Deployment in a new tab.

Once you're done, you can save the embed by clicking on the 'Save Embed' button and all your configuration for this deployment will be saved.

This is all you need to know on how to embed Integry's SDK inside your app and provide your end-users with impeccable integrations and a great user experience.

Happy Integrating!