Overview

Skill Level: Any

You can implement in-app messages that are displayed in your app as a header or footer.

Prerequisites

Note:

Because of Apple changes, IBM Mobile App Messaging has rewritten the in-app message subsystem. If you are already using in-app messages and want to continue using them, you must upgrade your SDK to a version that supports the new in-app message delivery mechanism by early summer (exact date to be determined). For more information, see In-app messages are changing.

There are four templates you can use to customize your in-app messages. Keep in mind that you only need to implement the templates that you want to support.

BannerInAppTemplate shows a banner either on the top or bottom of the screen.

In iOS, MediaInAppTemplate is the base class for the ImageInAppTemplate and VideoInAppTemplate. If you want to use either of these templates, you must include the files from MediaInAppTemplate; however, you do not have to register this template with the template registry, as it cannot be used independently.

ImageInAppTemplate shows an image full screen along with an expandable text region below overlaid on top of your app content through a vibrant effect.

VideoInAppTemplate shows a video full screen along with an expandable text region below overlaid on top of your app content through a vibrant effect.

Step-by-step

  1. Implement in-app message banners by following these steps:

    1. Add {package}/plugins/InApp Plugins/Banner InApp Template/BannerInAppTemplate.cs to the Forms project in Xamarin.
    2. Add SDK.Instance.RegisterInAppTemplate (“default”, new BannerInAppTemplate ()) to the project’s App Constructor.
    3. Add the cancel.png by following these steps:
      1. Add {package}/plugins/InApp Plugins/Banner InApp Template/cancel.png to the Android project’s resources/drawable directory.
      2. Create cancel.imageset in the iOS projects’s Resources/Images.xcassets folder.
      3. Add {package}/plugins/InApp Plugins/Banner InApp Template/cancel@1x.png to cancel.imageset for Universal 1x image.
      4. Add {package}/plugins/InApp Plugins/Banner InApp Template/cancel@2x.png to cancel.imageset for Universal 2x image.
      5. Add {package}/plugins/InApp Plugins/Banner InApp Template/cancel@3x.png to cancel.imageset for Universal 3x image.
    4. Add the comment.png by following these steps:
      1. Add {package}/plugins/InApp Plugins/Banner InApp Template/comment@1x.png to Android project’s Resources/drawable directory.
      2. Create comment.imageset in iOS project’s Resources/Images.xcassets folder.
      3. Add {package}/plugins/InApp Plugins/Banner InApp Template/comment@1x.png to comment.imageset for Universal 1x image.
      4. Add {package}/plugins/InApp Plugins/Banner InApp Template/comment@2x.png to comment.imageset for Universal 2x image.
      5. Add {package}/plugins/InApp Plugins/Banner InApp Template/comment@3x.png to comment.imageset for Universal 3x image.
    5. Add the note.png by following these steps:
      1. Add {package}/plugins/InApp Plugins/Banner InApp Template/note.png to Android project’s Resources/drawable directory.
      2. Create note.imageset in iOS project’s Resources/images.xcassets folder.
      3. Add {package}/plugins/InApp Plugins/Banner InApp Template/note@1x.png to note.imageset for Universal 1x image.
      4. Add {package}/plugins/InApp Plugins/Banner InApp Template/note@2x.png to note.imageset for Universal 2x image.
      5. Add {package}/plugins/InApp Plugins/Banner InApp Template/note@3x.png to note.imageset for Universal 3x image.
    6. Add the notification.png by following these steps:
      1. {package}/plugins/InApp Plugins/Banner InApp Template/notification.png to Android project’s Resources/drawable directory.
      2. Create notification.imageset in iOS project’s Resources/images.xcassets folder.
      3. Add {package}/plugins/InApp Plugins/Banner InApp Template/notification@1x.png to notificaton.imageset for Universal 1x image.
      4. Add {package}/plugins/InApp Plugins/Banner InApp Template/notification@2x.png to notification.imageset for Universal 2x image.
      5. Add {package}/plugins/InApp Plugins/Banner InApp Template/notification@3x.png to notification.imageset for Universal 3x image.
    7. Add the offer.png by following these steps:
      1. Add {package}/plugins/InApp Plugins/Banner InApp Template/offer.png to Android project’s Resources/drawable directory.
      2. Create offer.imageset in iOS project’s Resources/images.xcassets folder.
      3. Add {package}/plugins/InApp Plugins/Banner InApp Template/offer@1x.png to offer.imageset for Universal 1x image.
      4. Add {package}/plugins/InApp Plugins/Banner InApp Template/offer@2x.png to offer.imageset for Universal 2x image.
      5. Add {package}/plugins/InApp Plugins/Banner InApp Template/offer@3x.png to offer.imageset for Universal 3x image.
    8. Add the store.png by following these steps:
      1. Add {package}/plugins/InApp Plugins/Banner InApp Template/store.png to Android project’s Resources/drawable directory.
      2. Create store.imageset in iOS project’s Resources/images.xcassets folder.
      3. Add {package}/plugins/InApp Plugins/Banner InApp Template/store@1x.png to store.imageset for Universal 1x image.
      4. Add {package}/plugins/InApp Plugins/Banner InApp Template/store@2x.png to store.imageset for Universal 2x image.
      5. Add {package}/plugins/InApp Plugins/Banner InApp Template/store@3x.png to store.imageset for Universal 3x image.

     

  2. If you are using in-app images or in-app videos in iOS, implement in-app media by following these steps:

    1. Add {package}/plugins/InApp Plugins/Media InApp Template/MediaInAppTemplate.cs to the Forms project in Xamarin.
    2. Add the dismiss.png by following these steps.
      1. Add {package}/plugins/InApp Plugins/Media InApp Template/dismiss.png to the Android’s project’s Resources/drawable directory.
      2. Create dismiss.imageset in iOS project’s Resources/Images.xcassets folder.
      3. Add {package}/plugins/InApp Plugins/Media InApp Template/dismiss@1x.png to dismiss.imageset for Universal 1x image.
      4. Add {package}/plugins/InApp Plugins/Media InApp Template/dismiss@2x.png to dismiss.imageset for Universal 2x image.
      5. Add {package}/plugins/InApp Plugins/Media InApp Template/dismiss@3x.png to dismiss.imageset for Universal 3x image.
    3. Add the handle.png by following these steps.
      1. Add {package}/plugins/InApp Plugins/Media InApp Template/handle.png to the Android’s project’s Resources/drawable directory.
      2. Create handle.imageset in iOS project’s Resources/Images.xcassets folder.
      3. Add {package}/plugins/InApp Plugins/Media InApp Template/handle@1x.png to handle.imageset for Universal 1x image.
      4. Add {package}/plugins/InApp Plugins/Media InApp Template/handle@2x.png to handle.imageset for Universal 2x image.
      5. Add {package}/plugins/InApp Plugins/Media InApp Template/handle@3x.png to handle.imageset for Universal 3x image.

     

  3. Implement images in your in-app messages by following these steps.

    1. Add {package}/plugins/InApp Plugins/Media InApp Template/ImageInAppTemplate.cs to the Forms project in Xamarin.
    2. Add SDK.Instance.RegisterInAppTemplate (“image”, new ImageInAppTemplate ()) to the project’s App Constructor.
    3. Set up the Media InApp Template.
  4. Implement in-app videos in your in-app messages by following these steps:

    1. Add {package}/plugins/InApp Plugins/Media InApp Template/VideoInAppTemplate.cs to the Forms project in Xamarin.
    2. Add SDK.Instance.RegisterInAppTemplate (“video”, new VideoInAppTemplate ()) to the project’s App Constructor.
    3. Set up the Media InApp Template.
    4. Set up VideoPlayer.
  5. Add node property if sending video in inapp messages:

    If you plan on sending video in inapp messages, you will also need to add the <application> node property “android:usesCleartextTraffic” with the value of “true” in your AndroidManifest.xml file of your Android subproject. For example:

    <application android:label="Sample" android:name="com.ibm.mce.sdk.api.MceApplication" android:usesCleartextTraffic="true">
    

Expected outcome

For information about other advanced mobile app messaging features for apps developed with Xamarin.Forms, see the Documentation.

Go Back to the Mobile App Messaging home page.

Join The Discussion

Your email address will not be published. Required fields are marked *