Embedding the Widget

Important: A Videola.io widget must be placed on an HTTPS page of your site. The embed WILL NOT work if inserted in a non-secure HTTP page.

The following code will insert a responsive Videola.io widget on the page. We also add a call button. Clicking the button will start the call in a random room (see the Videola.Embed.generateRandomCode() method in our JavaScript reference).

The code above will render the following widget:

 

Let’s break down this example. After the API’s JavaScript code loads, the onVideolaEmbedAPIReady function is called, at which point you can construct the Videola.Embed object to insert an embed in your page. (Note that you must implement the onVideolaEmbedAPIReady function for the embedding to work.)

The following parameters are specified by the embed constructor:

  1. The first parameter specifies the id of the DOM element that the embed <iframe> tag will replace.
  2. The second parameter specifies embed options. The following properties are used:
    • width (number) – The width of the embed. The default value is 640. Ignored if the responsive property is supplied.
    • height (number) – The height of the embed. The default value is 440. Ignored if the responsive property is supplied.
    • responsive (0 or 1) – Whether to enable the responsive sizing mode of the embed. The default value is 0. Enabling the responsive mode makes the embed ignore the width and height properties.
    • embedParams (object) – Any extra embed parameters that can be used to customize the embed.

Authentication

To use the Videola.io widget, you need to pass the clientid embed parameter containing your client ID. You can obtain your client ID and API secret on this page. In addition to passing clientid, you also need to implement a token signing scheme in your code as described below.

Token Signing – Client Side

The Videola.io embed fires the requestToSignApiAuthToken event every time a video or voice call is initiated. For the calls to successfully connect, you will need to implement a handler for the requestToSignApiAuthToken event, where you:

  1. Pass the received event.token value to your server-side signer endpoint
  2. Receive the Base64-encoded HMAC signature for the token from the server side
  3. Pass the signature to the Videola.io API using the embed.authorize() method.

The token HMAC is computed with SHA-256 as the hash function and with your API secret as the HMAC’s secret key. To avoid exposing your API secret in client code, we strongly recommend computing the HMAC signature on the server side. Please see below for some code examples.

Token Signing – Server Side

Here is how you can compute the HMAC on the server side in a Node.js app (example taken from the server-side part of our Embed API demo). This snippet assumes that the token to sign arrives to the server in the req parameter, i.e. the HTTP request body:

Here is an equivalent PHP snippet, which again assumes that the token arrives in the HTTP request body:

Security Considerations

You should keep your API secret secure at all times and never expose it in the client code. We strongly recommend computing the token HMAC on the server side with proper authentication of your web application. Please refer to our Embed API demo for a basic example of computing the HMAC on the server side.