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 widget 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 an integration is saved. 

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


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

  • Show success message to 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:  This property reflects the name of the integration. You can use it where you want to show integration name to the user.
  • integration.link: This property provides the edit link of an integration. You can use it to let the user edit an integration.
  • integration.icon_url: This property provides the URL address of the integration app icon. You can use it if you want to display the application icon on your interface.
  • integration.disable_link: This property provides the link that lets the user disable an integration.
  • integration_delete_link: This property provides the link that lets the user enable an integration.
  • integration.status === 'ACTIVE': This property shows that an integration is in active state.
  • integration.status === 'INACTIVE': This property shows that an integration is disabled.
  • integration.status === 'AUTH_MISSING': This property shows that the authentication of an integration is not found or has been deleted.
  • integration.status === 'CREATION_IN_PROGRESS': This property shows that an integrations is being created and has not been completely setup yet.
  • integration.status === 'CREATION_FAIL': This property shows that an integration creation process has failed and the setup was unsuccessful.
  • integration.task_execution.status === 'in-progress': This property shows that an integration is currently running its first time setup. It is important to know that the first time setup task is not the same as the integration creation process. For example, the first time setup task usually performs the first time data import after the integration has been setup successfuly.
  • integration.task_execution.status === 'success': This property shows that the last task performed by this integration was processed successfully.
  • integration.task_execution.status === 'fail': This property shows that the last task performed by this integration failed to process.

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 : d: this 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 an 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 operation is completed.

Enable integration: This method is called when an 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 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 deleted 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.

Get Integrations for the Connected User: This method returns the configured integrations for the connected user.

integryAppSDK.getIntegrations()

Arguments: This method does not take any arguments

Get Templates for the Connected User: This method returns an array of templates (available integrations) for the current user

integryAppSDK.getTemplates()

Arguments: This method does not take any arguments

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

include_bootstrap_css: This lets you to include our SDK's bootstrap file. If you set the value to false, our bootstrap file will not be included. This comes in handy when the bootstrap version of your app is conflicting with the SDK's version of bootstrap css.

include_sdk_styles: Our SDK includes some basic styling like elements' positioning, alignment etc. If you don't want to include our SDK's styling and keep the app's own styling, then set the value to false. 

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 single step. This is very basic HTML structuring of fields of this step and you can change 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 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!

Did this answer your question?