Hubert Widget

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.

Table of Contents

• 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

Getting Started

Install via a CDN

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 component CSS

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">

Usage

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.

| Name | Type | Description | | ---- | ---- | ----------- | | type | ats \| no-ats | The type of the client. If you have an ATS, use ats. If you don't have an ATS, use no-ats. |

No ATS Configuration

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.

ATS Configuration

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

| Name | Type | Description | | ---- | ---- | ----------- | | name | "intelliplan" \| "uniflex" | The name of your ATS (more support coming soon) | | clientId | string | Your client ID registered with Hubert | | jobTitle | string | The title to be displayed on our Pre-Interview page |

Configuring with Intelliplan

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

| Name | Type | Description | | ---- | ---- | ----------- | | jobAdId | string | Job AD ID attached to your Intelliplan specified job. |

Element Attributes

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

| Name | Type | Default | Description | | ---- | ---- | ------- | ----------- | | job-id | string | - | (required) The ID of the job you want to start an interview for. | | disable-overlay | boolean | false | If set to true, the widget will not open in an overlay and will instead open in a new tab. | | open-in | popup \| tab | popup | If set to popup, the widget will open in a popup window. If set to tab, the widget will open in a new tab. When disable-overlay is true, open-in uses tab | | locale | string | en_us | Sets the locale of the widget, however the language of the interview flow is not determined by this attribute. Supported locales en_us (default)sv_se |

Styling

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

.hub-apply

Styles applied to main hub-apply

.hub-interview-frame-overlay

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