1. Home
  2. Docs
  3. Embedding Rali
  4. Embedding Overview

Embedding Overview

You can embed Rali Conversations in your website. Embedded conversation windows must be at least 400×300 pixels.

Inline Frames

 
<iframe
    src="https://rali.io/player?id=<video id>"
    height="<height>"
    width="<width>"
    frameborder="0"
    allowfullscreen
    allow="fullscreen; microphone; camera; accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">
</iframe>

Iframe Attributes

These attributes are defined in https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe. The Rali conversations exists in the iframe with no ability to set the attributes on the iframe.

Name Type Description
allow string “accelerometer; encrypted-media; gyroscope; picture-in-picture; autoplay; fullscreen; microphone; camera” to allow iframe to access microphone and camera through the browser
allowfullscreen boolean If true, the player can go full screen.
height integer Height of the embedded window, in pixels. Recommended minimum: 300
src string The iframe src URL string should be https://rali.io/ with required query string parameters in Generating Embed Links.
width integer Width of the embedded window, in pixels. Recommended minimum: 400

Authentication

The Rali player can be integrated with your authentication by passing in the user information as an http parameter. Here are the following ways to integrate. You will need to first set the Embed Access to 3rd Party Integration.

User Integration

The player uses the following url:

https://rali.io/player?id=<video id>

This http parameters can be added to the embedded player:

URL Params Description
user Authenticated user object, this is required if allow-anonymous is not set to true.  See User Object for formatting.

Secured User Integration

The secured video allows for signing the data passed to the video player.  The player is located at the following url:

https://rali.io/player?id=<video id>

This http parameters can be added to the embedded player:

URL Params Description
data Encrypted JWT data

Example for an iframe using the player:

https://rali.io/player?id=334389048b872a533002b34d73f8c29fd09efc50&data=JTdCJTIyaWQlMjIlM0ElMjJ4eHgteXl5LXp6eiUyMiUyQyUyMmRpc3BsYXlOYW1lJTIyJTNBJTIyTXIuJTIwQWRhbXMlMjIlMkMlMjJpbWFnZSUyMiUzQSUyMmh0dHBzJTNBJTJGJTJGY2RuLmZpbGVzdGFja2NvbnRlbnQuY29tJTJGU2RZY0dJZ0JRb0s1T29pamJ3YjUlMjIlN0Q=

In order to generate the JWT data, the following Rali values must be used:

API Key – ex. ONQ-XXXXXXXXXXXXXXXX
API Secret – ex. xxxxxxxxxxxxxxxxxxxxxxxxxxx

The API key and secret can be found in the Admin section of the Rali tenant. 

JWT Format

Attribute Description Required Example
iss Issuer, this is the site that is issuing the token Yes https://yoursite.com
sub Subject, Logged in user Yes user@yoursite.com
exp Expiration, Time token will expire (minimum 10 mins) Yes 1356999524
iat Issued at time, Time token was created Yes 1356999524
aud Audience, Rali tenant url Yes https://rali.io
key Rali tenant Client API Key Yes ONQ-XXXXXXXXXXX
user Base64 encoded user object Yes See User Object for formatting
referrer Url where the link is rendered Yes https://yoursite.com/page1

Sample Code

PHP:

$secret = "xxxxxxxxxxxxxxxxxx"; // API Secret
$token = array(
"iss" => "https://yoursite.com",
"aud" => https://rali.io,
"sub" => "engageoq.can@yoursite.com",
"iat" => 1356999524,
"exp" => 1356999524,
"user" => $user,
"referrer" => window.location,
);

$data = JWT::encode($token, $secret);

Was this article helpful to you? Yes No

How can we help?