The official Hubert interview web widget

Features included:

• Clients without an Applicant Tracking Systems (ATS) can use the Hubert Interview Platform to carry out and assist in their recruitment processes.
• Install on anywhere with the power of web components.
• Near native look and feel to match your website.

• Hubert Widget
  • Table of Contents
  • Getting Started
    • Install via a CDN
    • Add the component CSS
  • Usage
    • No ATS Configuration
    • ATS Configuration
    • Configuring with Intelliplan
    • Element Attributes
    • Styling

For now we recommend installing the widget via a CDN. We are working on making it available via npm.

Using unpkg :

<script type="module" src="https://unpkg.com/@hubertai/interview-widget/dist/esm/interview-widget.js"></script>
<script nomodule src="https://unpkg.com/@hubertai/interview-widget/dist/index.js"></script>

Using jsdelivr :

<script type="module" src="https://cdn.jsdelivr.net/npm/@hubertai/interview-widget/dist/esm/interview-widget.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@hubertai/interview-widget/dist/index.js"></script>

Add the CSS file at the end of your head to make sure it doesn't get overidden by any of your site's styles.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hubertai/interview-widget/dist/hubert-widget.css">

There are 2 steps in order for the component to work as expected.

In your HTML, Template or JSX include the following

<hubert-apply job-id="<your-job-id>">
    Start interview
</hubert-apply>

Important to note that even in your JSX, the props must be in kebab-case. (separated by a '-') since the interview widget is built on the native web components spec

Add a script to initialise the hubert-apply component with the necessary props

<script>
    (async () => {
        await customElements.whenDefined('hubert-apply')
        const button = document.querySelector('hubert-apply')
        button.init({
            // ... pass your configuration here
        })
    })()
</script>

For information on the configuration object, see the Configuration section below.

The configuration object is passed to the init method of the hubert-apply component.

If you use type: "no-ats" in the configuration object, you do not need to provide any additional configuration beyond the type property and the job-id attribute on the widget.

If you use type: "ats" in the configuration object, you will need to provide the following additional configuration.

If you are a user of the Intelliplan ATS, you will need to provide the following additional configuration.

These props will be passed ot the component directly in the HTML.

You can style the widget to match your website's look and feel. Below are the CSS classes you would need to target.

Styles applied to main hub-apply

Styles applied to the overlay that opens when the widget is clicked