Overview

Skill Level: Intermediate

Creating inbox and inbox-only notifications for your Cordova mobile app.

Prerequisites

You can create inbox and inbox-only notifications for your Cordova mobile app. Example inbox notification payloads for Cordova are the same as the iOS and Android payload examples. You must have, at a minimum, version 4.2.0 of Apache Cordova to include videos in your inbox notifications.

Step-by-step

  1. Add JavaScript

    Run the following code in the command line to copy the JavaScript and CSS to the project and allow the JavaScript to be auto included in the project:

    cordova plugin add <path to download directory>/plugins/com.xtify.mce.sdk.inbox
    cordova prepare
  2. Add stylesheet

    Add the global inbox stylesheet to the page.

    <link rel="stylesheet" type="text/css" href="css/inbox.css" />
  3. Add default template

    To add default inbox template stylesheet:

    <link rel="stylesheet" type="text/css" href="css/inbox_default.css" />
  4. Add inbox post stylesheet

     To add video or image message:

    <link rel="stylesheet" type="text/css" href="css/inbox_post.css" />
  5. Add inbox list

    To add inbox list:

    <div data-role="page" id="inbox">
    <div id='inboxMessages' class="ui-body"></div>
    <div data-role="header">
    <a href="#sample" data-direction="reverse" data-transition="slide">Sample</a>
    <h1>Inbox</h1>
    <a id="refresh_button"><img width='22' height='22' src="images/inbox/refresh.png"></a>
    </div>
    </div>
  6. Add inbox message

    To add the inbox message to the page:

     <div data-role="page" id="inboxMessage">
    <div id='inboxMessageContent' class="ui-body"></div>
    <div data-role="header">
    <div id='buttons'>
    <a id="delete_button"><img width='22' height='22' src="images/inbox/trash.png"></a>
    <a id="down_button"><img width='22' height='11' src="images/inbox/chevron-down.png"></a>
    <a id="up_button"><img width='22' height='11' src="images/inbox/chevron-up.png"></a>
    </div>
    <a href="#inbox" data-direction="reverse" data-transition="slide">Inbox</a>
    <h1></h1>
    </div>
    </div>

Expected outcome

For more information, 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 *