Hello there!

Looks like you have created an integration and now you need to embed our widget in your app. We're excited to help you get started and we promise to make this as easy as we can. 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.

This article focuses on the look and feel of your widget, how you can customize it according to the theme of your app. That is true! To enhance the native experience of a user we bring you this option. Before we move forward, it is necessary that you have embedded the inline widget. If not, here are the instructions.

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

    function callbackFunc(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('<a href="' + integration.link + '">Edit</a>')
                .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($('<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"/>');
      return row;


The code snippet shared above, lets you to 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 setup 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>
            <%= template.template_description %>
        <div class="steps">
            <div class="hide">
                <%= integration_name_field %>
            <% for(var i = 0; i < steps.length; i++) {
                    <%= steps[i].content %>
                <% } %>
        <div class="footer">
            <%= footer %>

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 widget as you like.

Did this answer your question?