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.

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.

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

InApIndigitallFlutterPluginp.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',
			"closePopupWhenClicked": true
    },
    (inApp) => {
      //DO SOMETHING
    },
    (error) => {
      //DO SOMETHING
    }
  );