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.showInAppp({
divId: "divView_code",
schemeId: "divView",
appKey: appKey,
deviceID: deviceId,
urlInAppApi: "YOUR_INAPP_API_URL" //Enterprise Client
}, (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) => {
console.log('showInApp success '+JSON.stringify(inApp, null, 2));
}, (inApp, error) => {
console.log(' showInApp error '+JSON.stringify(inApp, null, 2)+' error: '+JSON.stringify(message));
});
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) => {
console.log('showMultipleInApp success '+JSON.stringify(inApp, null, 2));
}, (inApp, error) => {
console.log(' showMultipleInApp error '+JSON.stringify(inApp, null, 2)+' error: '+JSON.stringify(message));
});
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.