Getting Started

Hi there! Thanks for dropping in! We’re excited to help you get started with embedding our inline SDK, and we promise to make this as easy as we can! If you have any questions along the way, please drop us a line on hello@integry.io. This is the engineering guide and covers technical aspects of embedding our widget in your app and does not cover other key aspects such as marketing and product.

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.

Before you start: Before you get started, make sure you have your Integry Credentials. Please get in touch with your account contact or apply for them here.

Embed Code

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

Let’s dive into understanding the details of the complete snippet code.

1. Initialize Server Side Variables

<?php
    $appKey = '<YOUR-APP-KEY>';
    $userID = '<USER-ID>';
    $appSecret = '<YOUR-APP-SECRET>';
    $bundleId = '<YOUR-BUNDLE-ID>';
?>

userID can be any value such as an email, a number or a UUID (Universal Unique Identifier). It will uniquely identify a user. There are some scenarios where integrations might be shared among multiple users in your app (such as the admins of the app). In that case, you can use account ID as the value of the user ID; this will give all the users editing access to these integrations.

2. Embed JavaScript Code

Embed the following code at the end of your web page before closing body tag. This will bring in a list of available integrations and already configured integrations within your application so that users can either add a new integration or edit an existing integration.

<script>
var appKey = "<?php echo $appKey ?>";  
var userId = "<?php echo $userID ?>";    
var hash = "<?php echo hash_hmac('sha256', $userID, $appSecret); ?>";    
var bundleId = "<?php echo $bundleId; ?>";    
var callback = callbackFunc; // The callback method to handle integration response.    
var callback_render_integration_row = callbackFunc_Render_Integration_Row;    
var callback_render_template_row = callbackFunc_Render_Template_Row;    
var callback_render_bundle_item = callbackFunc_Render_Template_Row;    
var render_templates_container = 'templates'; // id of div container where you want to render list of templates    

var render_integrations_container = 'integrations'; // id of div container where you want to render list integrations    

var x_integry_configs = {
"view_container": "intcontainer",
"view_url": "https://yourwebsite.com/integration-form-page",
"app_auth": {
               "api_key": "<API-KEY-OF-CURRENT-USER>"             }    

The following is a sample JSON structure that is returned from the widget and passed to the callback function

<script>
   function callbackFunc(data) {
      console.log(data);
      // show any success message here
   }

   function callbackFunc_Render_Integration_Row(integration) {
      var row = $('<tr class="ui-widget-content jqgrow ui-row-ltr"></tr>')
         .append($('<td></td>').attr('width', 50).append('<img width="50" src="' + integration.icon_url + '" />'))
         .append($('<td></td>').append(integration.name).attr('width', '70%'))
         .append($('<td></td>')
            .append('<a href="' + integration.link + '">Edit</a>')
         )
         .append($('<td></td>')
            .append($('<a></a>').attr('href', (integration.status === 'ACTIVE') ? integration.disable_link : integration.enable_link).append((integration.status === 'ACTIVE') ? "Disable" : "Enable").attr('data-op', (integration.status === 'ACTIVE') ? 'disable' : 'enable'))

         )

         .append($('<td></td>')
            .append($('<a></a>').attr('href', integration.delete_link).append("Delete").attr('data-op', 'delete'))
         );
      return row;
   }

   function callbackFunc_Render_Template_Row(template) {

      var img = template.branding_app.icon_url;
      var html = '<th scope="row" class="col-md-6"> \
                     <a class="media align-items-center" href="#"> \
                    <img alt="Image" src="' + img + '" class="avatar rounded avatar-sm" /> \
                    <div class="media-body"> \
                        <span class="h6 mb-0">' + template.name + '</span> \
                        <span class="text-muted">' + template.description + '</span> \
                    </div> \
                     </a> \
                  </th> \
                  <td> \
                     <a href="' + template.link + '" class="btn btn-success">Add</a> \
                   </td> ';

      var row = $('<tr class="bg-white"/>');
      row.append($.parseHTML(html));
      return row;
   }
 
</script>

The above code will result an output similar to the following:

We have written a detailed guide that explains different methods and how they are used. 

3. Compose Integration View

Now on the web page where you want the integration form to be rendered or where you have placed “x_integry_configs. view_container” HTML dom element, you can compose your own structure of html using our available SDK’s tokenized variables. Learn more about these variables, here.

Following is an example of how you can structure your own HTML using these variables. You will need to have the following code inside your application page that you configured as view_url. Say the value of x_integry_configs. view_container was intcontainer:

<div id="intcontainer" class="hidden">
   <div class="wrapper">
      <a id="integrations-wrapper"></a>
      <p>
         <%= template.template_description %>
      </p>
      <div class="steps">
         <div class="hide">
            <%= integration_name_field %>
         </div>
         <% for(var i = 0; i < steps.length; i++) {  %>
         <div>
            <%= steps[i].content %>
         </div>
         <% } %>
      </div>
      <div class="footer">
         <%= footer %>
      </div>
   </div>
</div>

Following is how it might look like inside your app:

5. After saving the integration

When you save the integration, you can pass your own function to the callback parameter. The widget will call this function whenever a user sets up an integration. More on this callback function, here

Did this answer your question?