Overview

Skill Level: Intermediate

You can implement inbox notifications that get pulled by your app when your app is opened and display messages received and full screen messages.

Prerequisites

Three templates let you customize your inbox notifications. Implement only the templates that you want to support.

  • Base Inbox Templates: An incoming mobile app message that includes an action to open the specified message.
  • Default Inbox Templates: A simple HTML message with a subject and date display.
  • Post-style Inbox Templates: A post-style message with the following features: optional title image, title, message, optional video or image, and optional extra text to follow the video or image. An optional set of up to three action buttons is included in this plug-in.
  • Only Xamarin.Forms is supported.

Step-by-step

  1. Add {package}/plugins/Inbox Plugins/Inbox Pages/InboxMessagePage.xaml to the Forms project in Xamarin.

  2. Right-click on InboxMessagePage.xaml and then click properties.

  3. Set Build Action to EmbeddedResource.

  4. Set Custom Tool to MSBuild:UpdateDesignTimeXaml.

  5. Add {package}/plugins/Inbox Plugins/Inbox Pages/InboxMessagePage.xaml.cs to the Forms project.

  6. Add {package}/plugins/Inbox Plugins/Inbox Pages/InboxPage.xaml to the Forms project.

  7. Right-click on InboxPage.xaml and then click properties.

  8. Set Build Action to EmbeddedResource.

  9. Set Custom Tool to MSBuild:UpdateDesignTimeXaml.

  10. Add {package}/plugins/Inbox Plugins/Inbox Pages/InboxPage.xaml.cs to the Forms project.

  11. Customize pages for your application.

  12. Add next.png by following these steps:

    1. Add {package}/plugins/Inbox Plugins/Inbox Pages/next.png to Android project’s Resources/drawable directory.
    2. Create next.imageset in iOS project’s Resources/Images.xcassets folder.
    3. Add {package}/plugins/Inbox Plugins/Inbox Pages/next@1x.png to next.imageset for Universal 1x image.
    4. Add {package}/plugins/Inbox Plugins/Inbox Pages/next@2x.png to next.imageset for Universal 2x image.
    5. Add {package}/plugins/Inbox Plugins/Inbox Pages/next@3x.png to next.imageset for Universal 3x image.
  13. Add prev.png by following these steps:

    1. Add {package}/plugins/Inbox Plugins/Inbox Pages/prev.png to Android project’s Resources/drawable directory.
    2. Create prev.imageset in iOS project’s Resources/Images.xcassets folder.
    3. Add {package}/plugins/Inbox Plugins/Inbox Pages/prev@1x.png to prev.imageset for Universal 1x image.
    4. Add {package}/plugins/Inbox Plugins/Inbox Pages/prev@2x.png to prev.imageset for Universal 2x image.
    5. Add {package}/plugins/Inbox Plugins/Inbox Pages/prev@3x.png to prev.imageset for Universal 3x image.
  14. Add refresh.png by following these steps:

    1. Add {package}/plugins/Inbox Plugins/Inbox Pages/refresh.png to Android project’s Resources/drawable directory.
    2. Create refresh.imageset in iOS project’s Resources/Images.xcassets folder.
    3. Add {package}/plugins/Inbox Plugins/Inbox Pages/refresh@1x.png to refresh.imageset for Universal 1x image.
    4. Add {package}/plugins/Inbox Plugins/Inbox Pages/refresh@2x.png to refresh.imageset for Universal 2x image.
    5. Add {package}/plugins/Inbox Plugins/Inbox Pages/refresh@3x.png to refresh.imageset for Universal 3x image.
  15. Add trash.png by following these steps:

    1. Add {package}/plugins/Inbox Plugins/Inbox Pages/trash.png to Android project’s Resources/drawable directory.
    2. Create trash.imageset in iOS project’s Resources/Images.xcassets folder.
    3. Add {package}/plugins/Inbox Plugins/Inbox Pages/trash@1x.png to trash.imageset for Universal 1x image.
    4. Add {package}/plugins/Inbox Plugins/Inbox Pages/trash@2x.png to trash.imageset for Universal 2x image.
    5. Add {package}/plugins/Inbox Plugins/Inbox Pages/trash@3x.png to trash.imageset for Universal 3x image.
  16. Configure your app to include inbox notification base templates by following these steps:

    1. Add {package}/plugins/Inbox Plugins/InboxDataTemplate.xaml to the Forms project in Xamarin.
    2. Right-click on InboxDataTemplate.xaml and then click properties.
    3. Set Build Action to EmbeddedResource.
    4. Set Custom Tool to MSBuild:UpdateDesignTimeXaml.
    5. Add {package}/plugins/Inbox Plugins/InboxDataTemplate.xaml.cs to the Forms project.
    6. Add {package}/plugins/Inbox Plugins/InboxTemplateCell.cs to the Forms project.
  17. Configure your app to include inbox notification default templates by following these steps:

    1. Add {package}/plugins/Inbox Plugins/Default Inbox template/DefaultInboxTemplate.cs to the Forms project in Xamarin.
    2. Add {package}/plugins/Inbox Plugins/Default Inbox template/DefaultInboxTemplateCell.xaml to the Forms project in Xamarin.
    3. Right-click on DefaultInboxTemplateCell.xaml and then click properties.
    4. Set Build Action to EmbeddedResource.
    5. Set Custom Tool to MSBuild:UpdateDesignTimeXaml.
    6. Add {package}/plugins/Inbox Plugins/Default Inbox Template/DefaultInboxTemplateCell.xaml.cs to the Forms project.
    7. Add {package}/plugins/Inbox Plugins/Default Inbox Template/DefaultInboxTemplatePage.xaml.cs to the Forms project.
    8. Add {package}/plugins/Inbox Plugins/Default Inbox Template/DefaultInboxTemplateView.xaml.cs to the Forms project.
    9. Right-click on DefaultInboxTemplateView.xaml and then click properties.
    10. Set Build Action to EmbeddedResource.
    11. Set Custom Tool to MSBuild:UpdateDesignTimeXaml.
    12. Add SDK.Instance.RegisterInboxTemplate (“default”, new DefaultInboxTemplate ()); to the project’s App Constructor.
    13. Customize the template for your application.
  18. Configure your app to include inbox notification post-style templates by following these steps:

    1. Add {package}/plugins/Inbox Plugins/Post Inbox Template/PostInboxTemplate.cs to the Forms project in Xamarin.
    2. Add {package}/plugins/Inbox Plugins/Post Inbox template/PostInboxTemplateView.xaml to the Forms project in Xamarin.
    3. Right-click on DefaultInboxTemplateView.xaml and then click properties.
    4. Set Build Action to EmbeddedResource.
    5. Set Custom Tool to MSBuild:UpdateDesignTimeXaml.
    6. Add {package}/plugins/Inbox Plugins/Post Inbox Template/PostInboxTemplateView.xaml.cs to the Forms project.
    7. Add SDK.Instance.RegisterInboxTemplate (“post”, new PostInboxTemplate ()); to the project’s App Constructor.
    8. Customize the template for your application.
  19. Add node property if sending video in inbox messages:

    If you plan on sending video in inbox 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, 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 *