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
In this first method an InApp is loaded on a page. To call it, you must create a div on your page with the size that you have previously created in InApp / InWeb Schemes of our indigitall console. Like this example:

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

<div #inappDiv id="inappDiv"></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 display 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 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.

indigitall.InApp.showInApp("myBanner_CODE", divView, (inApp, div) => {
    // DO SOMETHING
},(error) => {
    // Log error message
}, (inApp, div) => {
  // didDismissed
});

const config = {
    appKey: "YOUR APP_KEY",//if not push on project
    urlInAppApi: 'YOUR_DOMAIN',
    logLevel: indigitall.LogLevel.DEBUG,
    inAppCode: "YOUR_INAPP_CODE",
    viewId: viewId,
};

indigitall.InApp.showInAppWithConfig(config, (inApp, div, time) => {
    //onShowTimeFinished    
},(inApp, error) => {
    //didExpired    
}, (inApp, error) => {
    //didShowManyTimes    
}, (inApp, error) => {
    //didClickOut    
}, (inApp, error) => {
    //didDismissForever
}, (inApp, action) => {
  //didclicked
}, (inApp, div)=> {    
  //success DO SOMETHING
}, (error) => {
    //on error
}, (inApp, errorFormList) => {                        
  console.log('error form: ', inApp.inAppId);
  if (errorFormList && errorFormList.length > 0) {
    for (let i = 0; i< errorFormList.length; i++) {
      console.log('error form: ',JSON.stringify(errorFormList[i]));
    }
  }
});

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
  title = 'angular-pwa-test';
  @ViewChild('inappDiv', { static: true }) inappDiv!: ElementRef;
  ngAfterViewInit() {      
    const divId = this.inappDiv.nativeElement.id;    

    const config = {
      appKey: "YOUR-APP-KEY",
      urlInAppApi: "YOUR-DOMAIN",
      logLevel: indigitall.LogLevel.DEBUG,
      inAppCode: "YOUR-INAPP-CODE",
      viewId: divId,
    };


    indigitall.InApp.showInAppWithConfig(config, null, null, null, null, null, null, (inApp: any, div: any) => {
      // Showed inapp with success
    }, (error: any) => {
      // Do something with the error
    }, null, null);     
  }
}

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.

<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");
...

indigitall.InApp.showMultipleInApp(inAppCodeList, divList,(inApp, div)=>{
      //DO SOMETHING
  },(error) => {
// Log error message
  }, (inApp, div) => {
    // didDismissed
  });

const config = {
    appKey: "YOUR APP_KEY",//if not push on project
    urlInAppApi: 'YOUR_DOMAIN',
    requestLocation: true,
    logLevel: indigitall.LogLevel.DEBUG,
    inAppCodeList: inAppCodeList,
    divList: divList,
};

indigitall.InApp.showMultipleInAppWithConfig(config, (inApp, div, time) => {
    //onShowTimeFinished    
},(inApp, error) => {
    //didExpired    
}, (inApp, error) => {
    //didShowManyTimes    
}, (inApp, error)=> {
    //didClickOut    
}, (inApp, error) => {
    //didDismissForever    
}, (inApp, action) => {
  //didclicked
}, (inApp, div)=> {
     //success
}, (error) => {
    //on error
}, (inApp, errorFormList) => {                        
  console.log('error form: ', inApp.inAppId);
  if (errorFormList && errorFormList.length > 0) {
    for (let i = 0; i< errorFormList.length; i++) {
      console.log('error form: ',JSON.stringify(errorFormList[i]));
    }
  }
});

Popup Format

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

Fortunately, in Javascript, to create an InApp as a PopUp you don't need a new procedure to create it. You can follow the same action as to show a single InApp.