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

<InAppComponent inAppCode={'YOUR_INAPP_CODE'} width={400} height={600} />

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

Multiple banners
If we want to have several InApp, the previous step has to be carried out for each component that we want to show.

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.

InApp.showPopUp(
    {
      inAppCode: 'YOUR_INAPP_CODE',
      closeIconDisabled: false,
    },
    (state, inApp) => {
      //DO SOMETHING
    },
    (error) => {
      //DO SOMETHING
    }
  );

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.

InApp.showPopUp(
    {
      inAppCode: 'YOUR_INAPP_CODE',
      closeIconDisabled: false,
      imageCloseButtonName: 'YOUR_ICON_BUTTON_NAME',
      closePopupWhenClicked = true
    },
    (state, inApp) => {
      //DO SOMETHING
    },
    (error) => {
      //DO SOMETHING
    }
  );


  InApp.showPopUpWithParams(
    {
      inAppCode: 'YOUR_INAPP_CODE',
      closeIconDisabled: false,
      imageCloseButtonName: 'YOUR_ICON_BUTTON_NAME',
      closePopupWhenClicked = true
    },
    (inApp: any) => {
      console.log('Popup onLoad', inApp);
    },
    (inAppCode: any, showTime: any) => {
      //show time
      console.log('Popup show time', inAppCode, showTime);
    },
    (action: any) => {
      //did clicked
      console.log('Popup did clicked', action);
    },
    () => {
      //didclosed
      console.log('Popup didclosed');
    },
    () => {
      //did dismissed
      console.log('Popup dismissed');
    },
    (inApp: any, code: any, message: any) => {
      //didExpired
      console.log('popup didExpired: ', inApp);
      console.log('popup didExpired code: ', code);
      console.log('popup didExpired message: ', message);
    },
    (inApp: any, code: any, message: any) => {
      //didClickout
      console.log('popup didClickout: ', inApp);
      console.log('popup didClickout code: ', code);
      console.log('popup didClickout message: ', message);
    },
    (inApp: any, code: any, message: any) => {
      //didShowManytimes
      console.log('popup didShowManytimes: ', inApp);
      console.log('popup didShowManytimes code: ', code);
      console.log('popup didShowManytimes message: ', message);
    },
    (inApp: any, code: any, message: any) => {
      //dismissForever
      console.log('popup dismissForever: ', inApp);
      console.log('popup dismissForever code: ', code);
      console.log('popup dismissForever message: ', message);
    },
    (errorCode: any, message: any) => {
      //didFormError error
      console.log('popup didFormError code: ', errorCode);
      console.log('popup didFormError message: ', message);
    },
    (inApp: any) => {
      //didForm submit
      console.log('Popup didFormSubmit', inApp);
    },
    (inApp: any) => {
      console.log('Popup onSuccess', inApp);
      //Show inApp
    },
    (errorCode: any, message: any, description?: String) => {
      //log error
      console.log('popup didfail code: ', errorCode);
      console.log('popup didfail message: ', message);
      console.log('popup didfail description: ', description ?? '');
                  setErrorValue(
                  'Popup didExpired:' +
                  message +
                  'description: ' +
                  (description ?? ''),
        );
    },
  );