@hubertai/interview-widget
v1.1.6
Published
Collection of hubert widgets which allow for Real-Time screening supported interviews
Downloads
97
Readme
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
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