Custom HTML Templates

Urban Airship provides several predefined templates for sending Message Center messages and Landing Pages to the device. Custom templates are also supported by uploading an HTML page.

Urban Airship JavaScript Interface

Both iOS and Android/Amazon load an Urban Airship JavaScript interface into every landing page and Message Center message, This interface allows the HTML pages to access information about the system and trigger actions. The interface is available on both platforms, namespaced by a global UAirship object.

UAirship.getAppKey()

The App Key in the UA system (e.g. Wx7SIqAdJDmFj6ar97AFcQ). Available in UA Android 8.3.0 SDK and iOS 8.2.0 SDK.

UAirship.getUserId()

The user’s ID in the UA system (e.g. 4e84b80563051f67ec001a87).

UAirship.getChannelId()

The channel ID in the UA system (e.g. 45741d38-2dab-4c7b-8981-41423e078959). Available in UA Android 7.2.0 SDK and iOS 7.2.2 SDK.

UAirship.getNamedUser()

The named user ID associated to the channel (e.g. SomeNamedUserId). Available in UA Android 7.2.0 SDK and iOS 7.2.2 SDK.

UAirship.getDeviceModel()

The device model on which the user is viewing the Message Center message (e.g. iPod touch, XT1053).

UAirship.close()

Close the current landing page or Message Center message.

  • Android Simulates a back button
  • iOS If the webview’s delegate implements the protocol UARichContentWindow it will call closeWindow:

UAirship.runAction(actionName, argument, callback)

Triggers an action asynchronously. Any action that is registered in the device’s action registry are able to be triggered from JavaScript. For more information on actions, including a list of available actions and how to write custom actions, see Android Actions and iOS Actions.

  • actionName The name of the action to trigger.
  • argument The value of the action’s argument in the form of any valid JSON.
  • callback Callback when the action finishes. Invoked with an instance of an Error if an error occurred and any result data from the action.

Example:

// Triggers the add tags action with tag "MY_TAG"
UAirship.runAction("add_tags_action", "MY_TAG", function(error, result) {
  console.log("add_tags_action finished")
  if (!error) {
    console.log("Added MY_TAG")
  } else {
    console.log("Failed to add MY_TAG")
  }
})

console.log("add_tags_action called")

The callback will be called after the action has finished executing. The earliest the callback will ever be triggered is during the next turn of the event loop, i.e., the example above will always log “add_tags_action called” before “add_tags_action finished”.

UAirship.getMessageId()

The message ID being displayed or null for Landing Pages.

UAirship.getMessageSentDate()

The message’s sent date in GMT with format yyyy-MM-dd HH:mm:ss or null for Landing Pages.

UAirship.getMessageSentDateMS()

The message’s sent date in milliseconds (unix epoch time) or -1 for Landing Pages.

UAirship.getMessageTitle()

The message’s title or null for Landing Pages.

Events

ualibraryready

Fired once the UAirship interface is fully loaded. This event will be fired after the content of the page is loaded.

Example:

// Check if the interface is fully loaded
if(typeof UAirship === 'object' && UAirship.runAction) {
  onload()
} else {
  document.addEventListener('ualibraryready', onload, false)
}

Urban Airship URL intercepting

Any URLs with the scheme uairship will be intercepted by the Urban Airship SDK.

uairship://run-basic-actions

Runs action with implicit string arguments. Actions and the arguments are defined by the URI parameters.

Example:

<a href="uairship://run-basic-actions?add_tags_action=hi&">Add tags!</a>

Will add the tag “hi” when the user clicks the link.

uairship://run-actions

The same as run-basic-actions but the action’s arguments are JSON encoded.

Example:

<!-- ["foo", "bar"] url encoded is %5B%22foo%22%2C%22bar%22%5D -->
<a href="uairship://run-actions?add_tags_action=%5B%22foo%22%2C%22bar%22%5D">Add tags!</a>

Will add the tags “foo” and “bar” to the device when the user clicks the link.

Custom Template Sample

Send a Message Center message or Landing page with the following HTML.

<html>
  <head>
    <script>
      function onUAReady() {
        var output = document.getElementById('output')

        // Write out all of the getters
        output.textContent += 'User Id:' + UAirship.getUserId() + '\n'
        output.textContent += 'Channel Id:' + UAirship.getChannelId() + '\n'
        output.textContent += 'Named User Id:' + UAirship.getNamedUser() + '\n'
        output.textContent += 'Device Model: ' + UAirship.getDeviceModel() + '\n'
        output.textContent += 'Message Id: ' + UAirship.getMessageId() + '\n'
        output.textContent += 'Message Title: ' + UAirship.getMessageTitle() + '\n'
        output.textContent += 'Message Sent Date: ' + UAirship.getMessageSentDate() + '\n'
        output.textContent += 'Message Sent Date MS: ' + UAirship.getMessageSentDateMS()

        var closeButton = document.getElementById('close')
        closeButton.disabled = false
        closeButton.addEventListener('click', function()  {
          UAirship.close()
        })

        var addTagsButton = document.getElementById('addTags')
        addTagsButton.disabled = false
        addTagsButton.addEventListener('click', function()  {
            UAirship.runAction("add_tags_action", "hi", function(error, result) {
              if (error) {
                console.log("Failed to add tags!")
              } else {
                console.log("Tags added!")
              }
          })
        })

        var openExternalURLButton = document.getElementById('openURL')
        openExternalURLButton.disabled = false
        openExternalURLButton.addEventListener('click', function()  {
            UAirship.runAction("open_external_url_action", "http://www.urbanairship.com", function() {return true})
        })

      }

      document.addEventListener('ualibraryready', onUAReady, false)
    </script>
  </head>
  <body>
    <button id="close" disabled>close</button><br><br>
    <button id="addTags" disabled>add tags</button><br><br>
    <button id="openURL" disabled>open external URL</button><br><br>
    <button onclick="location.href='http://www.urbanairship.com'">open URL in webview</button>
    <pre id="output"></pre>
  </body>
</html>