Integry's SDK inside your app allows the users to create and edit integrations. It also allows you to view listing of flows, create a flow, edit and delete flows, and more. It is customizable and adapts to the look and feel of your app.
In this article, we'll help you embed SDK v3 in your apps so that you can provide integrations to your users natively.
What is a Deployment?
A deployment is a collection of Guided Flows to serve targeted integrations to customers. The SDK embedded inside your app always shows the guided flows (integrations) that are inside one deployment, to the user.
You cannot independently embed a single guided flow inside the SDK, you have to add it to a deployment first. You can always add more user flows later to a deployment, without any additional work.
There are two types of deployments.
- SDK Deployment - This lets you embed Integry's SDK inside your app and host in-app integrations to your users.
- Directory Deployment - Or you can host your guided flows/integrations on your Integration Marketplace that is hosted by Integry.
Note: Before deploying the SDK inside your app, you must create an app connector and guided flows inside Integry.
Embedding the SDK Inside Your App
Step 1: To create an SDK deployment, click on the 'Deployments' tab on Integry's Dashboard. Then, click on 'Create SDK Deployment'.
This will take you to a deployment editing screen where you'll have to fill in some information for your SDK. We'll describe each of these fields for you.
- Name: This is what your deployment will show up as, and it makes it easier for you to track your deployment when you're embedding it in your app.
- Active: This is the status of your deployment. Its state determines if a user will be able to see the deployment in their 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 flows. That will add these flows to your SDK embed.
- API Key: This is the ID that uniquely identifies an app. This is generated automatically for every app on Integry’s side. You can find this from the SDK deployment details page.
- API Secret: The API secret is also a uniquely generated key for every app and is used to generate a hash value.
- Deployment ID: This is the ID of the deployment in which all your integrations/guided flows are saved. It is used in the embed to open up a particular deployment when the SDK initializes.
- User ID: This is a UUID (Universal Unique Identifier) that is stored at your end against each user of your app. A user’s app credentials enable you to extract their corresponding user. Using this ID, your users can create their own integrations and flows using the bundle. The User ID and API Secret are combined to make Hash encryption, which is used inside the SDK initialization step.
Step 2: Configure your SDK in this step. Add your deployment's name in the first field.
Step 3: Use this checkbox field to toggle this deployment between active (green) and inactive (grey). Mark it as active to enable the deployment in your app.
Step 4: Select a guided flow and click on the arrow to move from the 'Flows List' to the 'Selected Flows'.
Step 5: Add your API Key here. This key is related to the workspace of the app.
Step 6: Next, add the API Secret in the input area of the field. Both the API key and API Secret are private so they're redacted by default. You can click on the 'eye' icon to reveal the value and the 'copy' icon to copy it.
Step 7: Enter the deployment ID.
Server-side, Hash Generation Code
The SDK requires server/back-end configuration to calculate the hash and use it to authenticate the embed with Integry servers.
Use this embed code to embed the SDK in your browser. In case you are using a module bundler such as npm or yarn, please refer to our SDK documentation on how to install the SDK in your environment.
You have to include the SDK package in your browser. As a result, when your browser will load, the event (in this code) is fired that indicates that the scripts have loaded successfully.
Once the event fires, Integry uses the API key, User ID, and Deployment ID to initialize the SDK.
Note: As you know, the hash is calculated using the server-side code. But, in the Embed Code, we do have a helper function available for you to directly use the secret and any user ID to test your code. However, this is not recommended by us because if the secret is embedded in the HTML, anyone who has access to the page source can view them. Therefore, use this helper function only in a testing environment.
Step 8: You have the option to download a sample HTML file that has all the code necessary for the embed to work. Finally, save the embed by clicking on the 'Save Embed' button.
This is all you need to know to embed Integry's SDK inside your app to allow your users impeccable integrations and a great user experience.