Integration

Banner Format

Below we tell you how to instantiate one or more In-App messages in banner format.

Remember that you should first have them defined in the indigitall console. See our user manual for more info.

One single banner
Create a div on your page. The size must match what you have defined in the indigitall console ( Tools> In-App / In-Web Schemas).

<div id="divView" style="width:1250px; height:285px;"></div>

if a width and a height size different from the one we have defined in the console is assigned, it is likely that the InApp will not display correctly.

Once the code to show the InApp has been created, it must be instantiated and called in the showInApp method that we can see below. The code of the InApp, the id of the previous div, the appKey of the application and deviceId of the device and the appropriate callback must be passed as parameters to obtain the view and the code. This callback will tell us if it has been loaded correctly or not and in relation to this result we will do one action or another.

For ENTERPRISE clients you have to add the url for the inAppApi as a parameter:

A code example is here

window.plugins.indigitallInApp.showInApp({
        divId: "divView_code",
        schemeId: "divView",
        appKey: appKey,
        deviceID: deviceId,
        urlInAppApi: "https://{{cloud}}.device-api.indigitall.com/v2" //Enterprise Client
  // {{cloud}} = check with our support team which is the value of the variable that corresponds to your account
    }, (inApp, divClient, showTime) => {
      console.log('showInApp onShowTimeFinished: ', JSON.stringify(inApp, null, 2));
    }, (inApp, error) => {
      console.log('showInApp didExpired '+JSON.stringify(inApp, null, 2)+' error: '+error);
    }, (inApp, error) => {
      console.log('showInApp didShowManyTimes '+JSON.stringify(inApp, null, 2)+' error: '+error);
    }, (inApp, error) => {
      console.log('showInApp didClickOut '+JSON.stringify(inApp, null, 2)+' error: '+error);
    }, (inApp, error) => {
      console.log('showInApp dismissForever '+JSON.stringify(inApp, null, 2)+' error: '+error);
    }, (inApp, action) => {
      console.log("showInApp didclicked", inApp, JSON.stringify(action));
    }, () => {
      console.log("showInApp form success " + JSON.stringify(inApp));
    }, (errorList) => {
      console.log("showInApp error de form", errorList);
    }, (inApp) => {
        console.log('showInApp success '+JSON.stringify(inApp, null, 2));
    }, (inApp,  error) => {
        console.log('showInApp error '+JSON.stringify(inApp, null, 2)+' error: '+error);
    });

Multiple banners
If we want to have several InApp to be shown in the flow of users, we must follow the following steps.

To do this, you must first create each div view on your page. Each of them must be assigned the same size that was created in InApp / inWeb Schemes of our indigitall console.

Such that:

<div id="divView" style="width:1250px; height:285px;"></div>
  <div id="divViewTwo" style="width:980px; height:150px;" ></div>
  <div id="divViewThree" style="width:150px; height:950px;"></div>
...

Once all the views have been created, they must be instantiated using the showMultipleInApp method. Before reaching this call, a pair of arrays must be created. The first one is the list of the InApp codes while the second will contain the identifiers of the div where the InApp will appear. When the showMultipleInApp method is called, you have to pass it the list with the identifiers, the list with the div and also a callback that will be in charge of telling us if the operation has been successful or, on the contrary, an error has occurred.

let inAppCodeList = [];
inAppCodeList.push("divView_code");
inAppCodeList.push("divView_code_two");
inAppCodeList.push("divView_code_three");
...

let divList = [];
divList.push("divView");
divList.push("divViewTwo");
divList.push("divViewThree");
...

window.plugins.indigitallInApp.showMultipleInApp({
      divId: divList,
      schemeId: inAppCodeList,
      appKey: appKey,
      deviceID: deviceId
  }, (inApp, divClient, showTime) => {
      console.log('showMultipleInApp onShowTimeFinished: ', JSON.stringify(inApp, null, 2));
    }, (inApp, error) => {
      console.log('showMultipleInApp didExpired '+JSON.stringify(inApp, null, 2)+' error: '+error);
    }, (inApp, error) => {
      console.log('showMultipleInApp didShowManyTimes '+JSON.stringify(inApp, null, 2)+' error: '+error);
    }, (inApp, error) => {
      console.log('showMultipleInApp didClickOut '+JSON.stringify(inApp, null, 2)+' error: '+error);
    }, (inApp, error) => {
      console.log('showMultipleInApp dismissForever '+JSON.stringify(inApp, null, 2)+' error: '+error);
    }, (inApp, action) => {
      console.log("showInApp didclicked", inApp, JSON.stringify(action));
    }, () => {
      console.log("showInApp form success " + JSON.stringify(inApp));
    }, (errorList) => {
      console.log("showInApp error de form", errorList);
    }, (inApp) => {
        console.log('showInApp success '+JSON.stringify(inApp, null, 2));
    }, (inApp,  error) => {
        console.log('gcf showInApp error '+JSON.stringify(inApp, null, 2)+' error: '+error);
    });

PopUp Format

Here we tell you how to instantiate an In-App message in popup format.
Remember that you should first have it defined in the indigitall console. See our user manual for more info.

window.plugins.indigitallInApp.showPopUp({
  schemeId: 'YOUR_INAPP_CODE'
} , (inApp) => {
     //DO SOMETHING
  }, (error) => {
    // Log error message
  });

If you want to customize the icon to close the Popup, you can do it with the following method to which you can pass the name of the image or icon that you must attach in the native versions. In the case of android in the drawable folder and in the case of iOS in assets, if you wanted to use our icon, it would be enough to pass a null. The parameter closeIconDisabled is in case you don't want to show any icon, setting it to true to hide it or false to show it.

If you want to close popup when it is clicked, you have to add on InApp configuration object, setClosePopupWhenClicked boolean param.

 window.plugins.indigitallInApp.showPopUp({
         closeIconDisabled: true,         
         schemeId: "YOUR_INAPP_CODE",
			   closePopupWhenClicked: true,
			   imageCloseButtonName: "IMAGE CLOSE BUTTON NAME"
 }, (inApp) => {
     //DO SOMETHING
  }, (error) => {
    // Log error message
  });

For ENTERPRISE clients you have to add the url for the inAppApi as a parameter:

window.plugins.indigitallInApp.showPopUp({
  schemeId: 'YOUR_INAPP_CODE',
  appKey: appKey,
  domainInApp: "https://{{cloud}}.device-api.indigitall.com/v1", //Enterprise Client,
  (inApp) => {
     //DO SOMETHING
  }, (error) => {
    // Log error message
  });
// {{cloud}} = check with our support team which is the value of the variable that corresponds to your account

If you want to have control of Open App action, and not re-open the app on Android, to dismiss intent actions, you have to add this property on the showPopUp params:

window.plugins.indigitallInApp.showPopUp({
  schemeId: 'YOUR_INAPP_CODE',
  appKey: appKey,
  getOpenAppAction: true,<-----
  domainInApp: "https://{{cloud}}.device-api.indigitall.com/v1", //Enterprise Client,
  (inApp) => {
     //DO SOMETHING
  }, (error) => {
    // Log error message
  });
// {{cloud}} = check with our support team which is the value of the variable that corresponds to your account

And you can add all the callbacks to control the popup actions:

window.plugins.indigitallInApp.showPopUp({
  			schemeId: 'YOUR_INAPP_CODE',
			  appKey: appKey,
  }, (inApp, divClient, showTime) => {
    console.log('showPopUp onShowTimeFinished: ', JSON.stringify(inApp, null, 2));
  }, (inApp, error) => {
    console.log('showPopUp didExpired '+JSON.stringify(inApp, null, 2)+' error: '+error);
  }, (inApp, error) => {
    console.log('showPopUp didShowManyTimes '+JSON.stringify(inApp, null, 2)+' error: '+error);
  }, (inApp, error) => {
    console.log('showPopUp didClickOut '+JSON.stringify(inApp, null, 2)+' error: '+error);
  }, (inApp, error) => {
    console.log('showPopUp dismissForever '+JSON.stringify(inApp, null, 2)+' error: '+error);
  }, (inApp, action) => {
    console.log(" showPopUp didclicked", JSON.stringify(action));
  }, () => {
    console.log(" showPopUp form success " + JSON.stringify(inApp));
  }, (errorList) => {
    console.log(" showPopUp de form", errorList);
  }, (inApp) => {
  	console.log(' showPopUp success '+JSON.stringify(inApp, null, 2));
  }, (inApp, div, error) => {
    console.log(' showPopUp error '+JSON.stringify(inApp, null, 2)+' error: '+error);
  });