Studio Development - Using Variables

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

Variables are not sticky between projects by default. Selecting the "Copy between projects" checkbox makes the variable sticky between projects.

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.

You can access this data within any text property or HTML element.

Access authenticatedUser within HTML elements:

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

Access authenticatedUser within JavaScript code:

getAuthenticatedUser()

You can fill the authenticatedUser field by:

1. In Creative Studio, every element triggers onStart, onEnd, and onClick functions, which have a standard action list. The "Set Variable" action can create or edit a variable.

For example, Figure-1 triggers two actions on the onClick function:

score = 10
score = ${score} + 5

This syntax works across all text properties of interactive elements (HTML widget and widget library).

Figure-1: Adding variables within Cinema8 Creative Studio

*Allow Multiple Execution allows the variable calculation to run multiple times within the same video. By default, variables are only calculated once per video.

*Copy between projects makes the variable sticky, so it remains accessible across jumped projects.

2. You can create and edit variables within JS API hooks:

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

3. You can also create and edit variables within the widget development environment:

getAuthenticatedUser();
getVariable('score')

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

${authenticatedUser.username}
${score}

4. Every server-side webhook response parameter will be injected as variables to the runtime context.

For example, you can access the following parameters from a response:

${uniqueId}
getVariable('uniqueId')