Studio Development - Using Variables

Working with Runtime Variables in Interactive Videos

Cinema8 Creative Studio allows you to develop video interactions without writing code through drag-and-drop tools. You can still create variables within the video, populate them from integrations or widgets you’ve developed, and build algorithms based on these variables.

Variables are key data elements within the Cinema8 environment. You can share data using variables between widgets, interactive elements, and projects.

Use variables to control what actions to trigger with conditional actions, visualize variable values, and get/set variables within JavaScript API and widgets.

Creating Variables

You can create or edit variables at various points:

• Using the onClick, onStart, and onEnd action lists of any widgets with the “Add Variable” method
• Using questions, which automatically create a variable with the question name
• Programmatically using the JS API or widget API
• Using custom server-side webhooks, where every return parameter will be accessible as variables within the video

Each question widget in Creative Studio adds a variable to the video context with its defined name. The answers are stored within this variable.

If a user is authenticated while watching the video, a pre-defined variable named authenticatedUser will be available.

Using Variables in HTML Elements

Access authenticated user properties like this:

${authenticatedUser.username!DEFAULT_VALUE}
${authenticatedUser.surname!DEFAULT_VALUE}
${authenticatedUser.name!DEFAULT_VALUE}

Using Variables in JavaScript Code

getAuthenticatedUser();

Ways to Fill authenticatedUser

• API Token Authentication / SSO
• Private Token API
• Working with video URL parameters
• How to create introduction forms

1. Creating Variables from Element Actions

In Creative Studio, every element can trigger onStart, onEnd, and onClick functions. These have a standard action list.
The Set Variable action allows you to create or update a variable.

Example (Figure-1):

score = 10
score = ${score} + 5

This syntax works across all text properties of interactive elements, including HTML widget and widget library.

2. Creating Variables via JS API

<script>
  player.setVariable("score", 10, false); // dynamically set non-sticky variable
</script>

3. Accessing Variables in Widget Development

getAuthenticatedUser();
getVariable('score');

You can pass dynamic data to widgets from any text widget property:

${authenticatedUser.username}
${score}

4. Injecting Variables from Webhooks

Every server-side webhook response parameter will be injected into the runtime context.

You can access them like this:

${uniqueId}

getVariable('uniqueId');