Integration

Banner format

Next 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 information.

A single banner
Create a Container, its size must match the one you have defined in the indigitall console ( Tools> In-App Schemas / In-Web ).

Container container = new Container (width: WIDTH, height: HEIGHT);

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.

Once the code has been created to show the InApp, 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 Container, the same container created previously 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

IndigitallFlutterPlugin.showInApp (
  IndigitallParams.PARAM_INAPP_CODE: 'YOUR_INAPP_CODE',
(inApp, container) => {
 // DO SOMETHING
}, (error) => {
// Log error message
});

You can use the showInAppWithConfig method to display it in a more configurable and controlled way.
Unlike the basic version, this method allows you to define several callbacks to handle different interaction and lifecycle events of the InApp message.

The code of the InApp, the container previously created, and the corresponding callbacks must be passed as parameters.
These callbacks will notify you when the InApp is successfully displayed, when the user interacts with it (e.g., clicks on an action), or when an error occurs.

IndigitallFlutterPlugin.showInAppWithConfig(
  {
    IndigitallParams.PARAM_INAPP_CODE: 'YOUR_INAPP_CODE',
    IndigitallParams.PARAM_DOMAIN_INAPP: 'YOUR_URL_INAPP_CUSTOM' // Optional: only if you use a custom API domain
  },
  yourContainer,
  (inApp, action) {
    // didClicked: Called when the user clicks on an InApp action
    print("InApp clicked action: ${action.url}");
	  print("InApp clicked: ${inApp.toMap()}");
  },
  (container, error) {
    // didExpired: Called when the InApp has expired
    print("InApp expired: ${error.message}");
  },
  (container, error) {
    // didShowManyTimes: Called when the InApp was shown too many times
    print("InApp show limit reached");
  },
  (container, error) {
    // didClickOut: Called when the user clicks outside the InApp
    print("User clicked outside InApp");
  },
  (container, error) {
    // dismissForever: Called when the InApp is permanently dismissed
    print("InApp dismissed forever");
  },
  (container, error) {
    // didFormSubmit: Called when a form inside the InApp is submitted
    print("Form submitted inside InApp");
  },
  (inApp, container) {
    // onSuccess: Called when the InApp is successfully loaded and displayed
    print("InApp loaded successfully!");
    yourContainer = container;
  },
  (error) {
    // onError: Called when an error occurs during loading or display
    print("Error showing InApp: ${error.errorMessage}");
  },
);

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. See our user manual for more info.

IndigitallFlutterPlugin.showPopUp(
  IndigitallParams.PARAM_INAPP_POPUP_CODE: 'YOUR_INAPP_CODE',  IndigitallParams.PARAM_DOMAIN_INAPP: 'YOUR_URL_INAPP_CUSTOM'// Optional: only if you use a custom API domain
(inAppCode) => {
     //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.

Close Popup when clicked

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

InApIndigitallFlutterPlugin.showPopUp(
    {
		  IndigitallParams.PARAM_DOMAIN_INAPP: 'YOUR_URL_INAPP_CUSTOM'// Optional: only if you use a custom API domain
      IndigitallParams.PARAM_INAPP_POPUP_CODE: 'YOUR_INAPP_CODE',
      IndigitallParams.PARAM_CLOSE_BUTTON: false,
      IndigitallParams.PARAM_CLOSE_ICON_DISABLED: 'YOUR_ICON_BUTTON_NAME',
			IndigitallParams.PARAM_CLOSE_POPUP_WHEN_CLICKED: true
    },
    (inApp) => {
      //DO SOMETHING
    },
    (error) => {
      //DO SOMETHING
    }
  );

PopUp callbacks

You can use the showPopUpWithParams method to display an In-App popup and listen to all its lifecycle events and user interactions.
This gives you full control over the popup’s behavior — from its appearance to clicks, dismissals, and errors.

IndigitallFlutterPlugin.showPopUpWithParams(
  IndigitallParams.PARAM_INAPP_CODE: "YOUR_INAPP_CODE",
  /*optionals params*/
  IndigitallParams.PARAM_DOMAIN_INAPP: "URL_DOMAIN_INAPP",
  (inApp) => {
    print("on Success inApp: ${inApp.toMap()}"),
  },
  (inApp, action) => {
    print("on didClicked action: ${action?.toMap()} inApp: ${inApp.toMap()}"),
  },
  () => {
    print("did closed")
  },
  () => {
    print("didDismissed")
  },
  () => {
    print("onShowTimeFinished")
  },
  (inApp, error) => {
    print("didClickOut inApp: ${inApp.inAppId} error: ${error.errorDescription}")
  },
  (inApp, error) => {
    print("didShowManyTimes inApp: ${inApp.inAppId} error: ${error.errorDescription}")
  },
  (inApp, error) => {
    print("didDismissForever inApp: ${inApp.inAppId} error: ${error.errorDescription}")
  },
  (inApp) => {
    print("didFormSubmit inApp: ${inApp.inAppId}")
  },
  (error) => {
    print("didFormError: ${error.errorDescription}")
  },
  (error) => {
    print(error.errorMessage ?? "General error")
  },
);

📋 Description of Callbacks

Callback	Parameters	Description
onSuccess	`(inApp)`	Triggered when the popup is successfully shown.
onDidClicked	`(inApp, action)`	Triggered when the user clicks an element within the popup. The `action` parameter contains details of the clicked element or link.
onDidClosed	`()`	Triggered when the popup is manually closed or cancel by the user (for example, pressing the close button).
onDidDismissed	`()`	Triggered when the popup is automatically dismissed .
onShowTimeFinished	`()`	Called when the configured display duration for the popup has finished.
onDidClickOut	`(inApp, error)`	Triggered when the user clicks more times than allowed by its configuration
onDidShowManyTimes	`(inApp, error)`	Triggered when the popup was shown more times than allowed by its configuration.
onDidDismissForever	`(inApp, error)`	Triggered when the popup is dismissed permanently and will not be shown again.
onFormSubmit	`(inApp)`	Called when a form inside the popup is successfully submitted.
onFormError	`(error)`	Triggered when a validation error occurs inside the popup form.
onGeneralError	`(error)`	Called for general or unexpected errors related to the popup display or communication.