Integrate video into your recruitment solution and enhance the decision making process for employers.

Integrating the widget (5 mins)

It is as simple as these 2 steps :

  1. Add <div> to your HTML with the ID myinterview-widget in the location you would like to add the button.
  2. Call our JS widget at the end of the page and initialize it with the parameters


<body>

  <!-- Your form -->
  <form>
    ...
    <div id="myinterview-widget"></div>
    ...
    
  </form>
  <!-- End of the application form -->

  <!-- Scripts -->
  <script async defer src="https://d3ru7etmq7l3l1.cloudfront.net/widget/2.7.0/widget.js"></script>
</body>
Integrating with React

Customisation (10 mins)

Customise the look and feel of the widget to perfectly match your requirement

Widget Mode

We offer 2 different modes for the widget :

  1. Standard mode: candidates can see the questions before they answer them and they press record whenever they are ready.
  2. Interview mode: questions are hidden, when candidates click Start Recording, they have 30 seconds to prepare the question before it automatically records. They can also skip the waiting time if ready to answer immediately.

To activate the interview mode, simply add hideQuestions: true to the config object.

One Step Parameter

We worked with a psychologist to improve the experience of the user when recording their video. Based on their recommandations, we decided to split the recording into 4 parts instead of 1 heavy 2mns presentation. Those 4 parts are then stitched together to produce one video as a result.

However, this splitted recording might not fit your use cases (e.g. in case of profile videos). If you prefer to have a unique step, we offer the oneStep parameter.

Just use the configurator below to see how to use it.

Button Parameters

Choose your button design

Choose your recording screen color theme

Widget Mode

Standard Mode
Interview Mode

Do you prefer 1 step or 4 steps process ?

4 Steps
1 Step

The result:

Review the final video

Copy this code and replace the apiKey parameter with your own API Key


 <script>
      myInterviewConfig = {
          apiKey: "qDp2egprFa",
          button: {
              color: "blue",
              size: "mid",
              text: "Apply with Video"
          },
          overlay: "",
          oneStep: false,
          hideQuestions: false
      };
  </script>

Custom Questions

If you want to use your own questions you can fully customize it.

You need to create a parts array inside the config and put the right parameters inside.

Here is an example with 2 questions :


 <script>
      myInterviewConfig = {
          apiKey: "qDp2egprFa",
          parts : [
            //Complete example
            {
                question: 'Introduce yourself', // the question of this part of the interview
                partDuration: 15, // the duration of this part of the interview in seconds
                description: 'Example: Hello my name is [Your Name] and have been a [Profession] for [Number of] years.)' , // the description of this part of the interview
                explanation: 'The introduction is your opportunity to make a good first impression. ' +
                             'Here are some tips on how to ace this part of the cover video:',
                points: ['Dress professionally.','Look directly at the webcam.', 'Speak clearly and at a steady pace.',
                         'Make sure that the room you are in is well lit and quiet.', 'Smile!',
                          'State your name, profession and years of experience (If applicable).'],
                conclusion: 'This section may take less than 15 seconds to complete, please click ' +
                            'stop when you are finished speaking.',
                numOfRetakes: 1 // the number of retakes the user may take for a single part
            },
            //Minimal example
            {
                question: 'What do you want to learn from your next experience?',
            },
          ]
      };
  </script>

Parameters of a part


  • question (required): Text of the question

  • partDuration: Limit the time to answer the question in seconds (default 30)

  • numOfRetakes: Number of attempts to retry the question (default 2). For unlimited use -1

  • description: Subtitle displayed below the question

  • explanation: When completed, you have an icon next to the question that opens a panel on the right with additional help for the user

  • points: Numbered list to assist candidates in the right panel

  • conclusion: Paragraph after the listed points

Custom Button

If you want to implement your own button, we have a parameter that allows you to use your own HTML code : the customBtn parameter

Here is how it works :

  • It needs to be wrapped inside a <a> tag with attribute href="#video-interview"
  • This <a> tag needs to have the id open-popup-myinterview
  • You are free to put any HTML code inside the <a> tag
  • When the user submits the video, it adds the completed class to the button

Here is a code example:


 <script>
      myInterviewConfig = {
          apiKey: "qDp2egprFa",
          customBtn: "<a href='#video-interview' id='open-popup-myinterview' class='mycustomBtn'>Record Video</a>"
      };
  </script>

Saving the video (20 mins)

All our videos are uploaded to Amazon Cloudfront, to ensure maximum performance

You need to modify your backend slightly to save the new field, that contains the id of the video.


The process is as followed :

  1. When a user saves a video, we generate a random identifier on our side, of 36 characters (both letters and figures), to make it impossible to guess
  2. Using the postMessage API, we pass this id to a hidden field: <input type="hidden" name="myinterview-video" id="myinterview-videoId" />
  3. You save this id on your database to use it during the playback (the field will be inside the <form>, if you placed the button inside it, since we append it after the button)


You have 2 steps to implement :

  1. You need to create a new field in your database that is a VARCHAR(20) to save those ids.
  2. You need to modify the function that saves the form data in the database to add the value of the hidden field.

Play the Videos (15 mins)

You can implement the function that will retrieve the URL of the video securely in various server-side languages. The idea is to generate a unique hash using BCrypt, with a combination of API Key, API Secret Token and a timestamp.

To ensure a great level of security, the hash is valid between 5 minutes before to 10 minutes after its generation (we leave an interval to match for the difference that might exist between server times, but please make sure to synchronize it with NTP following these instructions)

.NET

We recommend using BCrypt.NET library (NuGet Package) to implement the algorithm


string apiKey = "xxx-YourAPIkey-xxx";
string secretToken = "xxYourSecretTokenxx";
Int32 timestamp  = (Int32)(DateTime.UtcNow - new DateTime(1970, 1, 1)).TotalSeconds;
string apiSecret = apiKey" + secretToken + timestamp;
hashKey = BCrypt.Net.BCrypt.HashPassword(submittedPassword, 10);

PHP

PHP >= 5.5 has built-in BCrypt library


<?php
$timestamp = gmdate('U');
$apiSecret = "YOUR API KEY" . "YOUR API TOKEN HERE" . $timestamp;
$hashKey = password_hash($apiSecret, PASSWORD_DEFAULT);

NodeJS

There are a few BCrypt libraries in npm as well, and we personally recommend the use of bcryptjs. You can install this through npm by running npm install bcryptjs --save from your project’s root directory.
Here’s an example of how to use it in code.


var bcrypt = require('bcryptjs');

var timestamp = Math.floor(Date.now() / 1000);
var apiSecret = "YOUR API KEY" + "YOUR API TOKEN HERE" + timestamp;
var hash = bcrypt.hashSync(apiSecret, 10);

Python

There is only one major BCrypt library for Python. Install it by running pip install bcrypt.
Here’s how to use it in your code.


# first, import it
import bcrypt
import time

# seconds since GMT Epoch
timestamp = str(int(time.time()))
# hash and save the result
hashKey = bcrypt.hashpw(apiKey + secret + timestamp, bcrypt.gensalt(10))

Embed the Videos (10 mins)

Iframe Embed (Recommended)

The simplest option to embed the video is to use our iframe.

You need to use the hashed key generated in the last step, here is an example :


<iframe 
src="https://www.myinterview.com/player.html?apiKey=myApiKey&hashTimestamp=timestamp&hash=calculatedHash&video=videoId" 
frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>

Parameters


  • apiKey (required): Your API Key

  • hashTimestamp (required): Timestamp in seconds used to calculate the hash key

  • hash (required): Calculated hash

  • video (required): The id of the video you want to embed

Size of the video


Setting the size of the video is easy, just set the size the iframe either with width and height attributes or using CSS.

To simplify integration we provide you with this tool to help you determine the best size for your videos.

Height(px):

Width(px):

Custom Embed

If you prefer a custom integration rather than our player, you can get the URL of the video and manage the integration yourself, check our guide for more information.

Technical considerations

Caching and Updates

All our assets (JS, CSS, images) are hosted on Amazon Cloudfront CDN, to ensure maximum performance.

Since CDN cache is persistent until unvalidated, and also to prevent Client-side caching, we version everything using folders.

For example, when we transition from version 2.7.0 to version 2.8.0, you just have to change the address of the script widget from https://d3ru7etmq7l3l1.cloudfront.net/widget/2.7.0/widget.js to https://d3ru7etmq7l3l1.cloudfront.net/widget/2.8.0/widget.js

We will of course send an e-mail to inform you of the changes made between the 2 revisions. Please note that our usual release cycle is every 3 weeks, so that we keep constantly improving our product.

Compatibility

Our product is tested to work on :

  • Desktop : Chrome >= 45.0 (>= 58.0 for webRTC version) , Firefox >= 49.0, IE >= 10 and Edge, Safari >= 9.0
  • Android : Chrome >= 51.0
  • iOS : Chrome >= 51.0, Safari on iOS version >= 9.3