Note: For background on dynamic creatives, to learn when to implement the functions in this article, and to download sample dynamic creatives, see Building dynamic creatives for the Cortex Player.
Introduction
Dynamic creatives can listen for events that describe what is happening to them. They can also use the Config API to access parameter data set in Fleet and the Custom Attributes API to access custom attributes sent to the device attribute endpoint.
Events
Cortex loads creatives in the background before showing them on-screen. Dynamic creatives can listen for events that explain what is happening:
- cortex-ready: creative is set up in the background but isn’t visible yet
- cortex-visible: creative is visible on-screen
- cortex-hidden: creative is no longer visible
Config API
Dynamic creatives can retrieve UAS app, VSA, and device-level custom parameters by calling the following function after the cortex-ready event fires.
Device Config Function:
window.Cortex.app.getConfig()
Example Device Config Response:
{
// UAS app parameters
"venue_id": "my-awesome-venue",
"network_id": "abcd1234",
"allow_audio": false,
"static_duration": 15,
// Custom parameters
"my_custom_parameter": "always a string value"
"my_custom_boolean_parameter": "true"
"my_custom_number_parameter": "300"
...
}Custom Attributes API
The custom attributes currently set on the device will be retrievable by calling the following function after the cortex-ready event is fired:
Device Custom Attributes Function:
window.Cortex.extra.getDeviceAttributes()
Example Device Custom Attributes Response:
[
{
name: "Station Name",
value: "HQ"
},
{
name: "Temperature",
value: "80"
}
]Calling the API with HTML and Javascript
This following code snippet is a basic HTML and JavaScript application that calls the API to retrieve configuration data for a Cortex application. It uses the "cortex-ready" event listener to trigger the request for configuration data from the API and display the venue and network IDs.
<head>
<style>
body {
background-color: white;
color: black;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h2 {
margin-bottom: 20px;
}
</style>
<script>
window.addEventListener("cortex-ready", function() {
var config = window.Cortex.app.getConfig();
document.getElementById("venueId").innerHTML = config.venue_id;
document.getElementById("networkId").innerHTML = config.network_id;
});
</script>
</head>
<body>
<h2>Cortex Configuration:</h2>
<div>
<strong>Venue ID:</strong> <span id="venueId"></span>
</div>
<div>
<strong>Network ID:</strong> <span id="networkId"></span>
</div>
</body>