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.

A code example is here:

InApp.showInApp({ 
  appKey: "APP_KEY", 
  domainInApp: "YOUR_DOMAIN" , 
  inAppSchemaCode: "inAppCode", 
  viewId: "view" 
},
      () => {
         //onShowTime
         console.log("inapp onShowTime")
      }, () => {
         //didexpired
         console.log("inapp didexpired")
      }, () => {
         //didshowmore
         console.log("inapp didshowmore")
      }, () => {
         //didclickout
         console.log("inapp didclickout")
      }, () => {
         //success
         console.log("inapp success")
      }, (error) => {
         //onError
         console.log("inapp onError", 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.indigitall.showMultipleInApp({
  divId: divList,
  schemeId: inAppCodeList,
  appKey: "APP_KEY", 
  domainInApp: "YOUR_DOMAIN" , 
  appKey: appKey,
  deviceID: deviceId
  },
  () => {
    //onShowTime
    console.log("inapp onShowTime")
  }, () => {
    //didexpired
    console.log("inapp didexpired")
  }, () => {
    //didshowmore
    console.log("inapp didshowmore")
  }, () => {
    //didclickout
    console.log("inapp didclickout")
  }, () => {
    //success
    console.log("inapp success")
  }, (error) => {
    //onError
    console.log("inapp onError", error)
  });

PopUp Format

It could be the case that you want to show an InApp with a PopUp.

There are two ways to display a PopUp, fortunately in typescript it can be generated just like an InApp so the client can have more control over it.

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

However, if you prefer the native part to paint it, you can call the following method:

InApp.showPopUp(
    {
      appKey: "APP_KEY", 
		  domainInApp: "YOUR_DOMAIN", 
      inAppSchemaCode: "schema_code",
      closePopupWhenClicked = true
    },()=>{
      //didCancel
    }, () => {
      //didClicked
    }, () => {
      //didDismiss
    }, () => {
      //OnShowtimeFinished
    }, () => {
      //didExpired
    }, () => {
      //didShowMoreThan x times
    }, () => {
      //DidClickOut
    }, () => {
      //dismissForever
    },() => {
      //onSuccess
    }, (error) => {
      //Log error
    })