@hubertai/hubert-apply v1.1.11
Hubert Apply
The official Hubert Apply widget.
Table of Contents
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 :
<script type="module" src="https://unpkg.com/@hubertai/hubert-apply"></script>
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></hubert-apply>
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.
Configuration
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.
{
"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. Supported locales en-us (default)sv-se |
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:
.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. */
}