Load a composition with its token

Use this code to load a composition by its token for on-device use cases during the design process only.

For best performance and quickest loading times, we recommend using the composition URL when publishing an integration.

Supported data integrations

Type

Support

Description

<!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>

View on codepen.io.

PreviousGuides and examples NextLoad a composition with its URL

Last updated 1 year ago