Embed flows in your app with SDK v3 – Integry

Integry's SDK inside your app enables your 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 users can set up integrations with other apps natively through your app.

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

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

Go to the Deployments from the top menu.
Click 'Create SDK Deployment.'
- You'll be taken to a screen where you'll have to fill in some information for your SDK.
Enter the Name for your deployment.
Turn the Active toggle on if you want your user to see the deployment in your app.
All the flows you have created and published from your account will appear in the Flows list. You can select flow(s) from this list and add them to the deployment by clicking the small arrow.
Your App Key is already written. This unique identifier is generated automatically for every app by Integry.
Your App Secret is also already written. This is also a unique identifier generated for every app.
The Deployment ID is pre-filled. 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.
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.
The SDK requires some 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 user of your app. Using this ID, your users can create, edit, or delete their flows in your app.
- The example Server-side, Hash Generation Code can be used to generate the hash.
This code is available in multiple programming languages. You can view the options by clicking on the small arrow on the right side of JavaScript.
Use the 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.
Click the 'Preview' button to preview your SDK Deployment in a new tab.
You can click on 'Download' to download a sample HTML file with the code necessary for the embed to work. You only have to fill in your app key and secret in this HTML file.
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.

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.