Load the app instance output to update content in an overlay and trigger animations using an app or the REST API.
<!DOCTYPE html>
<html>
<head>
<!-- Include the Singular Graphic JavaSrcipt library -->
<script src="https://app.singular.live/libs/singulargraphics/1.0.0/singulargraphics.js"></script>
</head>
<body>
<!-- define iFrame for a non-interactive Singular Player Instance -->
<iframe id="SingularOverlay" style="width:720px; height: 400px;"
src="https://app.singular.live/singularplayer/client"></iframe>
<script>
// Singular App Instance
const SHARED_APP_TOKEN = "2B50lCTxWNYfoYadq1I2K9";
// create graphic object from iframe 'SingularOverlay'
const overlay = SingularGraphics("SingularOverlay");
// render app instance specified by SHARED_APP_TOKEN,
// the second param is output name, passing undefined to select the first output
overlay.renderAppOutput(SHARED_APP_TOKEN, null, function (isSuccess) {
if (isSuccess) {
console.log("App output loaded");
} else {
console.warn("Couldn't load app output");
}
});
</script>
</body>
</html>
