npm package: @hubertai/hubert-apply
Description: Hubert Apply Widget
Author: hubert.ai
Latest version: 1.5.1

# Hubert Apply

The official Hubert Apply widget.

### Table of Contents
- [Hubert Apply](#hubert-apply)
    - [Table of Contents](#table-of-contents)
  - [Getting Started](#getting-started)
    - [Install via CDN](#install-via-cdn)
  - [Usage](#usage)
    - [General Usage](#general-usage)
    - [Teamtailor](#teamtailor)
  - [Configuration](#configuration)
      - [Configuring for Intelliplan](#configuring-for-intelliplan)
    - [Element Attributes](#element-attributes)
    - [Styling](#styling)
      - [Color Theme](#color-theme)


## Getting Started

### Install via 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/hubert-apply"></script>
```

## Usage

### General 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></hubert-apply>
```

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="usage-teamtailor">Teamtailor</h3>
To integrate Hubert Apply with Teamtailor, you will have to add the following code to a custom CSS/HTML block on your job page and replace the client id with the one provided by Hubert.

```html
<script type="module" data-client-id="<YOUR CLIENT ID>" id="ha-init" src="https://hubert-apply.hubert.ai/assets/teamtailor.js" async></script>
```

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

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

#### Configuring for Intelliplan

If you are using Intelliplan as your ATS, you will need to provide the following configuration to the `init` method.

```JSON
{
    "ats": "intelliplan",
    "jobId": "12345",
    "jobAdId": "1234",
    "clientId": "1234567",
    "jobTitle": "Hubert Apply integrator"
}
```

| Name | Type | Description |
| ---- | ---- | ----------- |
| `ats` | `"intelliplan"` |
| `jobId` | `string` | The job project's ID in Intelliplan. |
| `jobAdId` | `string` | The ID of the job ad. |
| `clientId` | `string` | Your client ID registered with Hubert. |
| `jobTitle` | `string` | The title of the job ad. |

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

| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `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> |
| `button-text` | `string` | None | Sets the button text, 


### Styling
You can style the widget to match your website's look and feel.

#### Color Theme
You can overwrite the color theme of the button by targeting the `hubert-apply` element or the `.hubert-apply` class.

Example: 
```css
.hubert-apply {
    --button-bg-color: rgb(0, 0, 0); /* Overwrites the color of an idle button. */
    --button-bg-color-hover: rgb(0, 0, 0); /* Overwrites the color of a hovered button. */
    --button-text-color: rgb(255, 255, 255); /* Overwrites the text color of a button. */
    --button-text-color-hover: rgb(255, 255, 255); /* Overwrites the text color of a hovered button. */
}
```

---