Load a composition with its URL

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

Supported data integrations

Type
Support
Description

Control node

No

No support for REST API calls.

Data node

Yes

Update data nodes via the REST API.

Composition scripting

Yes

Manage user interactions and read data from third-party APIs.

Data stream

Yes

Connect data streams via composition scripting.

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

View on codepen.io.

PreviousLoad a composition with its tokenNextGet the composition URL of an app instance

Last updated

Was this helpful?