Skip to main content
Sign in

Embed flows in your app with SDK v2 (Legacy)

Permanently deleted user
  • Updated

Our inline SDK embeds the integration views within your own web app so that you have full control over how you want to structure the HTML or apply custom CSS.

Integry will provide JavaScript code snippet to embed inside your web app. This snippet contains important information about the procedure to configure seamless integration. Before you proceed embedding the JavaScript snippet, please make sure that you have the following information ready with you:

  1. App key
  2. App secret
  3. Bundle ID
  4. User ID of the user in your application setting up the integrations

To learn how to embed the SDK inside your app, click here.

The scope of this engineering guide is to help you understand the methods that are being used and how SDK consumes them. So let's begin!

JavaScript Code - CallBack Methods

The methods used in the JavaScript code as explained below:

callbackFunc: 

This method is called when integration is saved. 

function callbackFunc(data)
   {
      //write method details here
   }


At this point, you can perform post-save actions like:

  • Show success message to the user
  • Redirect to another page etc

callbackFunc_Render_Template_Row: This method is called to render each individual integration template. 

function callbackFunc_Render_Template_Row(template)
   {
      //write method details here
   }


In this method, you can prepare output HTML. Each time this method is called, a template object is passed to it. A template object contains the following properties:

  • template.name
  • template.description
  • template.icon_url
  • template.link

callbackFunc_Render_Integration_Row: This method is called to render each individual integration instance (an already configured integration).

function callbackFunc_Render_Integration_Row(integration)
   {
      //write method details here
   }

In this method, you can prepare output HTML for the integrations already created by the user. Each time this method is called, an integration object is passed to it. An integration object contains the following properties:

  • integration.name
  • integration.link
  • integration.icon_url
  • integration.disable_link
  • integration_delete_link
  • integration.status === 'ACTIVE': 
  • integration.status === 'INACTIVE'
  • integration.status === 'AUTH_MISSING'
  • integration.status === 'CREATION_IN_PROGRESS'
  • integration.status === 'CREATION_FAIL'
  • integration.task_execution.status === 'in-progress'
  • integration.task_execution.status === 'success'
  • integration.task_execution.status === 'fail'

JavaScript Code - Methods

Render form without Redirection:
This method is called if you want to render a form without redirecting the user.

render_template_form (template id, integration_id)

Arguments

  • template_id(required): int is the id of the template that user wants to configure an integration against. This can be obtained while rendering template items in callbackFunc_Render_Template_Row method.
  • integration_id(required): int you can optionally pass this information if you already know. This will open the same integration configuration form but in edit mode.

Disable integration: This method is called when integration is disabled. 

integryAppSDK.disableIntegration(integration_id, callback)

Arguments

  • integration_id(required): int  is the id of the integration that you want to disable.
  • callback(optional):JavaScript Function will be called after the operation is completed.

Enable integration: This method is called when integration is enabled. 

integryAppSDK.enableIntegration(integration_id, callback)

Arguments

  • integration_id(required):int is the id of the integration that you want to enable. This is a required parameter. 
  • callback(optional):JavaScript Function is an optional parameter. This is your own JavaScript method that will be called after operation is completed.

Delete integration: This method is called when an integration is deleted. 

integryAppSDK.deleteIntegration(integration_id, callback)

Arguments

  • integration_id(required): int is the id of the integration that you want to enable.
  • callback(optional):JavaScript Function is an optional parameter. This is your own JavaScript method that will be called after the operation is completed.

Programmatically render integration form

integryAppSDK.renderTemplateForm(template_id, integration_id)

Arguments

  • template_id(required):int : the id of the template against which the user sets up a new integration. 
  • integration_id(required):int You can pass this argument if you want to open an integration form in edit mode. In that case you must know the integration id and pass it to this method.

Get connected accounts: This method is used to get user's connected accounts. 

integryAppSDK.getConnectedAccounts()

Delete connected account: This method is used to delete a user's connected account. Once you get the list of connected accounts using getConnectedAccounts method, you can use the id property from the returned result set to pass to this method.

integryAppSDK.deleteConnectedAccount(account_id, callback)

Arguments

  • account_id (required): int is the id of the connected account that you want to delete.
  • callback (optional): JavaScript Function is an optional parameter. This is your own JavaScript method that will be called after operation is completed.

Integration Name Verification: This method validates the integration name provided by your app user. You can provide a regular expression as a string in the integration_name_pattern variable, and we will validate the name provided by the app user against the expression. The integration_name_pattern accepts string type only. If the user enters an invalid name, they will not be able to save integration and move to the next step. 

x_integry_configs: { integration_name_pattern: /^[a-zA-Z0-9 ._-]+$/ }

JavaScript - Variables

render_templates_container: A div container to contain list of templates. 

render_integrations_container: A div container to contain list of already configured integrations. 

x_integry_configs.view_container: A div container to render integration forms. 

x_integry_configs.view_url: A URL of a page where you want to render integration form. It could a separate page or the same page where you are showing list of templates.

x_integry_configs.app_auth: Holds the value of authorization your app uses in a form of key-value pair

Compose Integration View - Variables

The variables that are used when you compose the integration view are explained below:

Template: An object that contains the basic information of an integration template. It contains the following properties.

  • template.template_name
  • template.template_description
  • template.icon_url

Steps: A ‘0’ index based array of steps that are part of an integration setup. steps[index].app: Complete app information of a step. Contains the following properties.

  • app.name
  • app.icon_url

steps[index].content: Contains the complete HTML of a single step. This is very basic HTML structuring of fields of this step and you can change the styling of certain elements or even hide certain labels (if not required) within your own CSS. 

integration_name_field: You can use this variable to render integration name field anywhere in your HTML 

footer: This variable contains some closing scripts specifically the “Save” button that you will probably want to include at the end of your HTML. 

More on the embed code

The embed code gives you a lot of flexibility. For example, the following are some more options that you can configure:

var render_templates_container: id of div container where you want to render a list of templates

var render_integrations_container: id of div container where you want to render list integrations

var x_integry_custom_vars: you can pass your application specific data to our JavaScript SDK. Just define JSON variables and list them here.

var x_integry_notification_settings.enable notifications: The value in this variable defines whether you want to send error notifications to your users. 

var  x_integry_notification_settings.default.notification.email.addresses: It stores the value of email address where the notification will be sent in case of an error.  

var render_templates_container = 'templates';
var render_integrations_container = 'integrations'; 

var x_integry_custom_vars = ["categories"]; //
var x_integry_notification_settings = {
  "enable_notifications": false,
  "default_notification_email_addresses": "xyz@company.com" //you can provide a default email address for currently logged in user
};

We keep on adding to this article as we keep on updating the SDK. 

For more queries!

Comments

0 comments

Please sign in to leave a comment.