Use this code to load a composition by its token for on-device use cases during the design process only.
<!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>
// Composition token
const COMPOSITION_TOKEN = "08EBsfeF4yoYLejOXM51Rk";
// create graphic object from iframe 'SingularOverlay'
const overlay = SingularGraphics("SingularOverlay");
// render composition instance specified by COMPOSITION_TOKEN,
// the second param is output name, passing undefined to select the first output
overlay.loadComposition(COMPOSITION_TOKEN, null, function (isSuccess) {
if (isSuccess) {
console.log("Composition loaded");
} else {
console.warn("Couldn't load composition");
}
});
</script>
</body>
</html>
