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


  <!-- Your form -->
    <div id="myinterview-widget" style="opacity:0"></div>
  <!-- End of the application form -->

  <!-- Scripts -->
  <script async defer src=""></script>

Customisation (15 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.

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.

Widget Parameters

Choose your button design

Choose your recording screen colour 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

      myInterviewConfig = {
          apiKey: "qDp2egprFa",
          button: {
              color: "blue",
              size: "mid",
              text: "Apply with Video"
          overlay: "",
          oneStep: false,
          hideQuestions: false

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 :

      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?',

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:

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

Custom Welcome Screen

If you want to use your own wording for the first screen of the popup, we added 3 parameters for you to do so:

  1. firstScreenTitle: string. This parameter will be the wording for the title
  2. firstScreenSubOne: string. This parameter will be the wording for the first subtitle
  3. firstScreenSubTwo: string. This parameter will be the wording for the second subtitle

All 3 parameters are optional. For a better understanding of those 3 parameters, you can check this visual reference.

Here is a code example:

      myInterviewConfig = {
          apiKey: "qDp2egprFa",
          firstScreenTitle: "This will be the title",
          firstScreenSubOne: "This will be the first subtitle",
          firstScreenSubTwo: "This will be the second subtitle",

Custom Transcript Language

The default transcript we provide is in Australian English. We offer you to change this language if you need. Please add the transcriptLanguage parameter to the myInterviewConfig. This parameter consists of BCP-47 identifier as a string (e.g. "en-US", "fr-FR", etc.)

For a list of supported languages and their corresponding codes, you can click here.

Here is a code example:

      myInterviewConfig = {
          apiKey: "qDp2egprFa",
          transcriptLanguage: "he-IL" // in this example videos taken will have hebrew transcript

Custom User Information

Passing the user information can help you retrieve user videos at a later stage. In order to do so we give you 2 possibilities:

  1. Adding user parameter to myInterviewConfig.

    It can include these parameters:

    1. username: string. The candidate's name.
    2. email: string. The candidate's email.

    Here is a code example:

          myInterviewConfig = {
              apiKey: "qDp2egprFa",
              user: {
                username: "candidate's username",
                email: "candidate's email"
  2. Or calling this public function passUserInfos(email, username). It will pass the user information to the widget in order to save the candidate's information (needs to be done before the candidate finishes the process).

Custom Colours

Allows you to customise the colours of the buttons/elements inside the widget. In order to do so please add the overlay parameter to the myInterviewConfig. Its value is the Hex colour code as a string (e.g. "#66cccc", "#87c0ec", etc.)

Here is a code example:

      myInterviewConfig = {
          apiKey: "qDp2egprFa",
          overlay: "#77a1e5"

Debug Mode

If you need more verbose output when integrating it, you can use the debug parameter.

Here is a code example:

      myInterviewConfig = {
          apiKey: "qDp2egprFa",
          debug: true // activate the verbose mode (default: false)

Complete Callback Function

At the end of the recording process when the pop-up closes, a callback function can be invoked using completeCallback parameter. This is useful if you want to customise the behaviour when the user returns to your page. It is executed in the scope of your page, so you can use your own functions. It takes one parameter :

  • videoID: string. The index generated for this interview (see Saving the video for more info.

Here is a code example:

      myInterviewConfig = {
          apiKey: "qDp2egprFa",
          completeCallback: function(videoID){
            console.log('Finished recording with id: '+ videoID);

Show Number Of Applicants

To increase the conversion you can display a "popup" inside the widget, to push candidates to apply. It appears as soon as the user opens the widget. Here is how it looks :

To activate it, use the showNbApplicants parameter (boolean, default false), like this :

      myInterviewConfig = {
          apiKey: "qDp2egprFa",
          showNbApplicants: true, 

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(36) 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)


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(apiSecret, 10);


PHP >= 5.5 has built-in BCrypt library

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


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( / 1000);
var apiSecret = "YOUR API KEY" + "YOUR API TOKEN HERE" + timestamp;
var hash = bcrypt.hashSync(apiSecret, 10);


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 (5 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 :

frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>


  • 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.



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.14.0 to version 2.15.0, you just have to change the address of the script widget from to

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.


Our product is tested to work on :

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