npm package: @hubertai/interview-widget
Description: Collection of hubert widgets which allow for Real-Time screening supported interviews
Author: hubert.ai
Latest version: 1.1.6

[![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)](https://stenciljs.com)

# 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](#hubert-widget)
    - [Table of Contents](#table-of-contents)
  - [Getting Started](#getting-started)
    - [Install via a CDN](#install-via-a-cdn)
    - [Add the component CSS](#add-the-component-css)
  - [Usage](#usage)
      - [No ATS Configuration](#no-ats-configuration)
      - [ATS Configuration](#ats-configuration)
      - [Configuring with Intelliplan](#configuring-with-intelliplan)
    - [Element Attributes](#element-attributes)
    - [Styling](#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 :
```html
<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 : 

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

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

```html
<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](#config) section below.

<h3 id="config">Configuration</h3>

---

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. <ul><li>When `disable-overlay` is `true`, <br>`open-in` uses `tab`</li></ul> |
| `locale` | `string` | `en_us` | Sets the locale of the widget, however the language of the interview flow is not determined by this attribute. <br /> Supported locales <ul><li>en_us (default)</li><li>sv_se</li></ul> |


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

---