Studio Development - Using Variables

Studio Development - Using Variables

Cinema8 creative studio allows you to develop video interactions without writing code with drag-and-drop tools, You can still create variables in the video, fill these variables from integrations or widgets you have developed, and build algorithms over these variables.

Variables are the main data representers within the Cinema8 environment. You can share data with variables between widgets and interactive elements, use variables to decide what action to trigger with conditional actions, visualize variable values, and set and get variables inside javascript API and widgets. 

Creating Variables

There are many points that you can create a new variable or edit an existing one ; 
By default, every question widget in the creative studio is a variable with its defined name. The answers of the users are stored within this variable.
Also if a user is authenticated while watching the video, the video runtime has a pre-defined variable with the name "authenticatedUser".
You can access this data within any text property or HTML element.
      
      Access authenticatedUser within HTML elements.
  1. ${authenticatedUser.username!DEFAULT_VALUE}
    ${authenticatedUser.name!DEFAULT_VALUE}
    ${authenticatedUser.surname!DEFAULT_VALUE}
      Access authenticatedUser within js code.
  1. getAuthenticatedUser()
    You can fill authenticatedUser field by ; 
  1.        Api token authentication / SSO - Authentication & SSO
  2.        Using Private Token API
  3.        External user authentication - Working with video URL parameters
  4.        Using Introduction Forms


1- Within Creative Studio every element triggers onStart , onEnd, and OnClick functions , these functions has a standard action list , 
"Set Variable" action in this action list can create a new variable or edit an existing variable.
Figure-1 triggers two actions on onClick function , first action sets the variable value ; 
  1. score = 10
Second action adds "5" points to score
  1. score = ${score} + 5
This syntax works in all text properties of interactive elements (HTML widget , and widget library)

Figure-1


2- You can create and edit variables within js api hooks ; 

  1. <script>
         var player = new Cinema8Player("#video", {
                        id: "rJVZ6nJg",
                        onReady: function(){
                          player.getVariables(); // Returns all available variables at runtime
                          player.setVariable("score", 10); // dynamically set variable within video
                          player.getVariable("score"); // get variable value at runtime
                        },
                   });
    });
    </script>

3- You can create and edit variables within widget development environment.  
  1. getAuthenticatedUser() ;
    getVariable('score')

You can also pass dynamic data to widgets from any text widget property.
  1. ${authenticatedUser.username}
    ${score}

4- Every server-side webhook response parameter will be injected as variables to the runtime context.
 https://cinema8.com/api/webhook-test is an echo test webservice , while creating an echo effect it also injects these two dummy parameters to the response. 

  Response:
  {
     uniqueId: "aa556677",
     licenseType: "PRO"
  }

You can access to these parameters in runtime within every text property and  HTML element in studio,  and also from javascript within widgets.

  1. ${uniqueId}
    getVariable('uniqueId')
    • Related Articles

    • Getting started with C8 API

      Cinema8 APIs to build extensive digital experiences within your videos. Cinema8 has an extensive API to support your business and your customers’ needs while developing interactive video-based solutions. Whether you are developing a web application, ...
    • Widget API

      Widgets are key expansion points of any cinema8 interactive video. While You can use any widget from the widget library you can also develop your own customized widgets with the C8 Widget Development environment. This article walks you through ...
    • Creating A Fancy Button Widget - Cyberpunk Glitch Button

      In this article, we will explain step by step how to create and configure a button from scratch. 1- Create the Widget From Widgets Section Open Cinema8 Admin Panel Select Tools Menu  Select 8 Widgets Link Select  + New Widget Button Give a name to ...
    • Code Samples

      Cinema8 provides a selection of code samples and templates for you to use to accelerate your app development. Browse sample code to learn how to build different components for your applications.  All of the examples contained in the Cinema8 ...
    • Server Side WebHooks

      A webhook (also called a web callback or HTTP push API) is a way for an app to provide other applications with real-time information. A webhook delivers data to other applications as it happens, meaning you get data immediately. Cinema8 Webhooks are ...