Custom HTML for Rich Pages and In-App Automation

Airship provides several predefined templates for sending rich pages A landing page or Message Center message in your app that can include HTML, video, etc. to the device. Custom templates are also supported by uploading an HTML page.

JavaScript Interface

Both iOS and Android/Amazon load an Airship JavaScript interface into landing pages, Message Center messages, and In-App Automation messages. You can use the following functions in your custom HTML to access information about the system and trigger actions. The interface is available on both iOS and Android platforms, namespaced by a global UAirship object.

UAirship.getAppKey()

The App Key in the UA system, e.g., Wx7SIqAdJDmFj6ar97AFcQ. Available for Airship Android 8.3.0 SDK and iOS 8.2.0 SDK or later.

UAirship.getUserId()

Get the user's Airship ID, e.g., 4e84b80563051f67ec001a87.

UAirship.getChannelId()

Get the user's Airship channel_id, e.g., 45741d38-2dab-4c7b-8981-41423e078959.

UAirship.getNamedUser()

Get the named user that the channel_id is associated with.

UAirship.getDeviceModel()

Returns the device model that the user is viewing your message on, e.g., iPod Touch, XT1053.

UAirship.close()

Closes the current landing page or Message Center message.

  • Android: Simulates the 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. You can trigger any action registered with the device's action registry using JavaScript. For more information about 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 you want to trigger.
  • argument — The value of the action's argument in 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.
// 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 earliest the callback will execute is during the next turn of the event loop, i.e., the example above will log add_tags_action called before add_tags_action finished.

UAirship.getMessageId()

Get the message ID of the current message/page or null for landing pages.

UAirship.getMessageSentDate()

The message's sent date in GMT yyyy-MM-dd HH:mm:ss format 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.

UA Library Ready Event

The ualibraryready event fires when the UAirship interface and page content are fully loaded.

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

URL Intercepting

URLs with the scheme uairship are intercepted by the Airship SDK.

uairship://run-basic-actions

Runs action with implicit string arguments. Actions and the arguments are defined by the URI parameters. The following example adds the hi tag when a user clicks the link.

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

uairship://run-actions

The same as run-basic-actions, but the action's arguments are JSON encoded. The following example adds the foo and bar tags to a device when a user clicks the link.

<!-- ["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>

Custom HTML Sample

Send an In-App Automation, 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.airship.com", function() {return true})
        })

      }

      document.addEventListener('ualibraryready', onUAReady, false)
    </script>
  </head>
  <body style="background: #d3d3d3">
    <h1>Tap a button below to perform an action!</h1>
    <p>Check out what you can do with a little bit of Javascript</p>
    <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.airship.com'">open URL in webview</button>
    <pre id="output"></pre>
  </body>
</html>