In-app messages

In-app messages are shown in the mobile app as a layer over the content (overlay) or as view component injected (added as a subview) into the app (inline).

The guides in this section cover the implementation on the application side. To learn more about in-app messages, their types, and creating the content, see the User Guide.

Requirements

The minimum SDK version depends on the feature you use:

• If your in-app content (such as JavaScript, CSS, images, or fonts) is being loaded from your own server via HTTP and you have configured CORS policies, you need to set the contentBaseUrl to your server's address. For example, if you're loading resources from https://www.synerise.com/example/font.woff, you should configure contentBaseUrl to https://www.synerise.com (check this option in the Settings). The value must be a valid absolute URL. An invalid value is ignored and only reported in the SDK log.
• Enable the IN_APP_DEFINITIONS_COMMUNICATION_READ (Experience Hub) permission in the Profile (formerly Client) API key used by the mobile application so the mobile application can fetch in-app messages.
  

  

• Inline in-apps: embed a placement component in your UI (InlineInAppView created with Injector.createInlineInAppView on Android and iOS, the InlineInAppView React component in React Native). The placement key used in the app must match the one configured in the campaign. See Inline in-app
• Flutter 2.11.0: configure the SDK's reverse method channel in MainActivity.configureFlutterEngine. Without it, the application crashes with a NullPointerException on the first in-app callback. iOS needs no extra steps. Starting with Flutter 3.0.0 SDK, this is no longer required.
  
  JavaKotlin

  @Override
  public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
      super.configureFlutterEngine(flutterEngine);
      SyneriseMethodChannel.configureChannel(flutterEngine);
  }
  

  override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
      super.configureFlutterEngine(flutterEngine)
      SyneriseMethodChannel.configureChannel(flutterEngine)
  }
  

• React Native: use Synerise.Injector only inside Synerise.onReady(...). Before initialization finishes, the module is undefined. onReady keeps one callback (the last registration wins), so register in-app listeners once, at the application root.

Good practices

Campaign planning recommendations

Using a large number of in-app messages in your application can impact rendering time, message delivery, and battery usage.

To maintain optimal application performance when using in-app campaigns:

• Avoid assigning more than 10 in-app messages to the same trigger event.
• Avoid adding more than 10 inline in-app messages to the same placement key.
• Avoid having more than 20 in-app messages active at the same time in your application.
• Review and archive in-app campaigns that you no longer need.
• In-app tests should be made in a test environment instead of test segmentation in the production environment.

Template construction

When creating or editing in-app message content:

• Define the close handler (SRInApp.close()) at the beginning of the JS script so it works even if later code fails. SRInApp.hide() and SRInApp.resize() work only in overlay messages; in inline messages they do nothing. hide() sends inApp.hide, not inApp.discard, and does not trigger the dismiss callback.
• Use try/catch to handle possible fatal errors in the JS script.
• Handle situations where Jinjava inserts return empty data.
• When adding external links to your message:
  • Only link to sites you trust.
  • Don't link to large images that may negatively affect performance.
  • Don't link to resources whose CSS/HTML may be blocked. If you have resources loaded from your own URLs, set Synerise.settings.inAppMessaging.contentBaseUrl and use relative paths in HTML/CSS.

Configuration

In-app message campaigns are served by the Synerise backend.

Check possible available configuration options in the Settings.

JavaScript methods in in-app messages

See "Using in-app template builder" in the User Guide.

Some methods are only available in one in-app type:

Events generated by in-app messaging

For information about events generated by in-app messaging, see the event reference.

Setting up a global control group for in-app message

For information about global control groups in in-app messages, see the global control group article.

Handling actions from in-app messages

Handling main actions from campaigns depends on the campaign type and operating system and it is described here.

Implementing in-app messages in the application

See Overlay in-apps and Inline in-apps