Config Object

React
HTML

<Widget
    ref={widgetRef} // In order to open/close the widget programmatically
    disabled={false}
    buttonText="START VIDEO INTERVIEW"
    buttonStyle={{ color: '#fff', backgroundColor: '#5aa4f5' }}
    config={{
        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: "https://vimeo.com/698499292",
        welcomeTitle: `Welcome ${candidate_name} 👋,`,
        minimizable: true,
        hideHeader: true,
        hideIntercom: true,
        disablePractice: false,
    }}
    candidate={/* ... */}
    job={/* ... */}
    styleUrls={['https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css']}
    fontsUrls={['https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap']}
>
  <style>
          {`
                .myinterview-widget-header {
                    font-family: 'Caveat', cursive;
                    font-weight: 700;
                    text-transform: uppercase;
                }

                .myinterview-widget-header__job-title {
                    color: #5aa4f5;
                }
          `}
    </style>
</Widget>

<body>
  <myinterview-widget></myinterview-widget>
  <script>
    document.querySelector("myinterview-widget").widgetConfig = {
      disabled: false,
      buttonText: 'START VIDEO INTERVIEW',
      buttonStyle: { color: '#fff', backgroundColor: '#5aa4f5' },
      config: {
          widget_id: 'widget-1'
          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: "https://vimeo.com/698499292",
          welcomeTitle: `Welcome ${candidate_name} 👋,`,
          minimizable: true,
          hideHeader: true,
          hideIntercom: true
      }
      candidate: {/* ... */}
      job: {/* ... */}
      styleUrls: [
        'https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css',
        './style.css'
      ],
      fontsUrls: ['https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap']
    }
  </script>
</body>

Parameters list

Root Level

Param	Type	Required	Default	Description
`disabled`	`Boolean`	false	false	Programmatically disable 'Start Interview' button
`buttonText`	`String`	false	'Start Interview'	Set your own button text
`buttonStyle`	`Object`	false	{}	Start Interview	Set your own button style
`ref`	`Object`	false	{}	Programmatically open/close the widget	React version only
`widget_id`	`String` \| `Number`	false		Defined the widget instace (CDN version only)	CDN version only

disabled

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;

buttonText

Default : 'Start Interview'

Change the text of the main button to open the Interview

buttonText: "Start Video Interview";

buttonStyle

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'}

ref

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

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

  const programmaticallyOpenWidget = () => {
    widgetRef.current.open()
  }

  const programmaticallyCloseWidget = () => {
    widgetRef.current.close()
  }

  return (
    <Widget
      ref={widgetRef}
      config={/* ... */}
      candidate={/* ... */}
      job={/* ... */}
    />
  )
}

Inside the config Object

Param	Type	Required	Default	Description
`auth`	`String`	true	-	Making sure your calls are secured
`onWidgetClicked()`	`Function`	false	-	Callback when the candidate clicks on the Start Interview button
`onFinish(data)`	`Function`	false	-	Callback when the candidate finishes applying. `data: { video_id: string, redirectUrl?: String }`
`onError(data)`	`Function`	false	-	Callback to catch the errors during the process. `data: { messageType: String }`
`onWidgetClose()`	`Function`	false	-	Callback when the candidate minimize the widget `minimizable: true` is required
`openAnimation`	`Boolean`	false	true	Open animation when the candidates clicks on the the Start Interview button
`debug`	`Boolean`	false	false	Enable debug mode to get more information during the integration
`practiceQuestions`	`Object[]`	false	null	Customise the practice questions
`overlay`	`String`	false	'#5aa4f5'	Customise the main colour of the widget
`introVideo`	`String`	false	-	Setting up an introduction video before starting the recording
`welcomeTitle`	`String`	false	'Welcome'	Title displayed next to the introduction video
`welcomeText`	`String`	false	-	Text displayed below the introduction title
`minimizable`	`Boolean`	false	false	Allow the candidate to minimize the widget
`hideHeader`	`Boolean`	false	false	Will hide the header [ logo, company name and job title ]
`hideIntercom`	`Boolean`	false	false	Will disable Intercom
`disablePractice`	`Boolean`	false	false	Will disable practice
`recordWithoutVideo`	`Boolean`	false	false	Record 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";

onWidgetClicked

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
};

onFinish

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 :

Customise the behaviour when the user returns to your page
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);
};

onError

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

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

onWidgetClose

Will be triggerd every time the candidate minimize the widget

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

debug

Default : false

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

debug: true;

practiceQuestions

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",
  },
];

overlay

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%)";

info

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.

Attention

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: "https://vimeo.com/698499292",
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 😃`

widget_id

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

<body>
<myinterview-widget></myinterview-widget>

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

<script>
const myinterviewWidgt = document.querySelector("myinterview-widget").widgetConfig = {
        widget_id: "widget-1",
        candidate: {/*...*/},
        config: {/*...*/},
        job:{/*...*/},
      };
</script>
</body

Config Object

Parameters list​

Root Level​

disabled​

buttonText​

buttonStyle​

ref​

Inside the config Object​

auth (required)​

onWidgetClicked​

onFinish​

onError​

onWidgetClose​

debug​

practiceQuestions​

overlay​

Welcome Stage​

widget_id​