Custom HTML for Rich Pages and In-App Automation
Airship provides several predefined templates for sending rich pagesA 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.
You can also add custom HTML blocks when using our Interactive Editor for rich pages.
JavaScript Interface
Both iOS and Android/Fire OS 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 Airship, e.g., Wx7SIqAdJDmFj6ar97AFcQ.
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
UANavigationDelegate
, 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 Mobile 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>Categories