For best performance and quickest loading time, we recommend using the composition URL when publishing an integration.
<!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_URL = "https://assets.singular.live/f12f184c9a0eb763beb40478e02a1250/jsons/164gBjjETnHFKEU3LjPCKe.json";
// create graphic object from iframe 'SingularOverlay'
const overlay = SingularGraphics("SingularOverlay");
// render composition instance specified by COMPOSITION_URL,
// the second param is output name, passing undefined to select the first output
overlay.loadComposition(COMPOSITION_URL, function (isSuccess) {
if (isSuccess) {
console.log("Composition loaded");
} else {
console.warn("Couldn't load composition");
}
});
</script>
</body>
</html>
