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.

$3

- 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

$3

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

Using unpkg :
``html


`
Using jsdelivr :

`html


`

$3


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.
`html

`

Usage

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

In your HTML, Template or JSX include the following

`html

Start interview

`

> 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

`html

`

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

Configuration

---

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

$3

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

|

$3

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

---