Skip to main content

Config Object

ref={widgetRef} // In order to open/close the widget programmatically
buttonStyle={{ color: '#fff', backgroundColor: '#5aa4f5' }}
auth:`apikey ${YOUR_API_KEY} exp=1653841377 sig=${YOUR_SIGNATURE}`,
onWidgetClicked: () => console.log('Widget Clicked!'),
onFinish: (data) => console.log('Video ID:', data.video_id),
onError: (data) => console.log('Error Message:', data.messageType),
onWidgetClose: () => console.log('Widget minimized by the candidate'), // When minimizable: true
debug: true,
practiceQuestions: [
question: 'Why would you like to work for us?',
description: '',
attempts: 3,
duration: 60,
thinkingTime: 0,
videoQuestion: /* 'https://...' */,
overlay: "#5ed0bc",
introVideo: "",
welcomeTitle: `Welcome ${candidate_name} πŸ‘‹,`,
minimizable: true,
hideHeader: true,
hideIntercom: true,
disablePractice: false,
candidate={/* ... */}
job={/* ... */}
.myinterview-widget-header {
font-family: 'Caveat', cursive;
font-weight: 700;
text-transform: uppercase;

.myinterview-widget-header__job-title {
color: #5aa4f5;

Parameters list​

Root Level​

disabledBooleanfalsefalseProgrammatically disable 'Start Interview' button
buttonTextStringfalse'Start Interview'Set your own button text
buttonStyleObjectfalse{}Start InterviewSet your own button style
refObjectfalse{}Programmatically open/close the widgetReact version only
widget_idString | NumberfalseDefined the widget instace (CDN version only)CDN version only


Default : false

Allow candidates to apply and click the Start Interview button or disable it (e.g. if you integrate in a form and depends on sending additional information that the candidate needs to input).
// start interview button will be disabled
disabled: true;
// start interview button will be enabled
disabled: false;


Default : 'Start Interview'

Change the text of the main button to open the Interview
buttonText: "Start Video Interview";


Default : {}

If you want to implement your own button, we have a parameter that allows you to use your own CSS properties.
buttonStyle: {color: '#000', backgroundColor: '#f1f1f1'}


import React, { useRef } from 'react';
import { Widget, IWidgetRef } from '@myinterview/widget-react';

export const YourComponent = () => {
const widgetRef = useRef<IWidgetRef>(null);

const programmaticallyOpenWidget = () => {

const programmaticallyCloseWidget = () => {

return (
config={/* ... */}
candidate={/* ... */}
job={/* ... */}

Inside the config Object​

authStringtrue-Making sure your calls are secured
onWidgetClicked()Functionfalse-Callback when the candidate clicks on the Start Interview button
onFinish(data)Functionfalse-Callback when the candidate finishes applying. data: { video_id: string, redirectUrl?: String }
onError(data)Functionfalse-Callback to catch the errors during the process. data: { messageType: String }
onWidgetClose()Functionfalse-Callback when the candidate minimize the widget minimizable: true is required
openAnimationBooleanfalsetrueOpen animation when the candidates clicks on the the Start Interview button
debugBooleanfalsefalseEnable debug mode to get more information during the integration
practiceQuestionsObject[]falsenullCustomise the practice questions
overlayStringfalse'#5aa4f5'Customise the main colour of the widget
introVideoStringfalse-Setting up an introduction video before starting the recording
welcomeTitleStringfalse'Welcome'Title displayed next to the introduction video
welcomeTextStringfalse-Text displayed below the introduction title
minimizableBooleanfalsefalseAllow the candidate to minimize the widget
hideHeaderBooleanfalsefalseWill hide the header [ logo, company name and job title ]
hideIntercomBooleanfalsefalseWill disable Intercom
disablePracticeBooleanfalsefalseWill disable practice
recordWithoutVideoBooleanfalsefalseRecord without video (audio only)

auth (required)​

Default : ''
Please see details of implementation on the [previous section](/docs/widget-config/security).

Here is an example:
auth: "apikey xxxxxxxxxxx sig=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx";


If you want to execute custom functions when the popup is opened or closed, you can use this callback function.

onWidgetClicked: () => {
// your code goes here


At the end of the recording process after the candidate uploaded successfully his interview, a callback function can be invoked using this parameter. This is useful if you want to :

  1. Customise the behaviour when the user returns to your page
  2. Save the videoID on your side either to playback the video or request additional informations using our API
It is executed in the scope of your page, so you can use your own functions. It takes 1 parameter : - `video_id: String`
onFinish: ({ video_id: String }) => {
console.log("Finished recording with id: " + video_id);


Create your own error handling according to the Error Type that is returned.

onError: ({ messageType: String }) => {
// your code goes here


Will be triggerd every time the candidate minimize the widget

onWidgetClose: () => {
// your code goes here


Default : false

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


Help your candidates to feel more comfortable and set your own practice questions.

// example with one question
practiceQuestions: [
question: "Your question goes here",
attempts: 3,
duration: 30,
videoQuestion: "",
description: "Contrary to popular belief, Lorem Ipsum is not simply",


Default : '#5aa4f5'

Customise the main colour of the widget, used on the call to actions and background.
overlay: "#5aa4f5" | "blue" | "rgb(90, 164, 245)" | "hsl(211, 89%, 66%)";

Putting too bright of a colour will result in issues with contrast, we recommend using medium to dark colours

Welcome Stage​

Prior to the video recording process, we provide an option that allows you to add a video introduction and/or text introduction to your interview.
In order to do so, you need to pass one or more of the following parameters: introVideo, welcomeTitle, welcomeText.

  • introVideo is the URL of the video, it can be a Youtube, Facebook Vimeo, Dropbox or Wistia link (or any public MP4 / HLS / DASH file).
  • welcomeTitle is a short text / greeting.
  • welcomeText will be shown below the welcomeTitle.

For your introduction video, you need to make sure the video is publicly accessible (e.g. private Youtube or Vimeo links won't work for your candidates).

  • For Vimeo videos, please uncheck "Show Playbar" from Vimeo video settings.
introVideo: "",
welcomeTitle: `Welcome ${candidate_name},`,
welcomeText: `We’re looking forward to meeting you!
In the next step you will be asked to answer several questions so we can get to know you better
Feel free to reach out if you have any questions. Best of luck πŸ˜ƒ`


In order to open/close the widget programmatically (CDN version only)


<button onclick="openWidget('widget-1')">Open widget programmatically</button>
<button onclick="closeWidget('widget-1')">Close widget programmatically</button>

const myinterviewWidgt = document.querySelector("myinterview-widget").widgetConfig = {
widget_id: "widget-1",
candidate: {/*...*/},
config: {/*...*/},