@hubertai/hubert-apply v0.0.1
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
18 days ago