Customize the look and feel of the embed with SDK v2 (Legacy)

This article focuses on the look and feel of the Integry SDK once it is embedded inside your app, and how you can customize it according to the theme of your app. To enhance the native experience of a user, we have made the SDK completely customizable for you. Before we move forward, it is necessary that you have embedded the inline SDK. If not, here are the instructions.

The SDK is where a user of your app creates and edits integrations. Think of this as the admin panel to manage integrations. Once you have completed the initialization and added the JavaScript code, the next step can be customizing the SDK. Here is the JavaScript code snippet, that lets you render the HTML output.

<script>
    function callbackFunc(data) {
        console.log(data);
        // show any success message here
        // you also save the bundle instance id in this method
    }

    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 code snippet shared above, lets you change the HTML, CSS according to your app theme.  callbackFunc_Render_Template_Row and callbackFunc_Render_Integration_Row let you prepare the HTML output, the former renders each integration template while the later renders each individual integration instance (already configured integration). You can decide the look of your integration forms and the list of your integrations, however, you want them to appear. 

Once a user selects an integration from the list, the next step is to set up that integration by providing relevant details. The integration setup is no more than a simple HTML form. Again as we give you full control over the HTML / CSS to match it your app's look and feel, you can control how the form elements should look like. Usually, its a good idea to first decide the HTML structure on your web page and then change form elements styling by overriding CSS. Following is an example of how you can structure the form HTML. For details on what form variables are available, read here.

<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>

We are on a mission to enhance the user experience of your user and to make their experience seamless and native we let you to customize the SDK as you like.