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.
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 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">
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 . |
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.
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 |
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. |
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.
|
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
|
You can style the widget to match your website's look and feel. Below are the CSS classes you would need to target.
Styles applied to main hub-apply
Styles applied to the overlay that opens when the widget is clicked