Documentation Index
Fetch the complete documentation index at: https://docs.inploi.com/llms.txt
Use this file to discover all available pages before exploring further.
Job Alerts Plugin
The Job Alerts plugin lets candidates subscribe to email notifications when new jobs matching their criteria are posted.
Installation
npm install @inploi/plugin-job-alerts
pnpm add @inploi/plugin-job-alerts
<script defer src="https://sdk.inploi.com/@inploi/sdk/cdn/index.js"></script>
<script defer src="https://sdk.inploi.com/@inploi/plugin-job-alerts/cdn/index.js"></script>
Basic usage
import { initialiseSdk } from '@inploi/sdk';
import { jobAlertsPlugin } from '@inploi/plugin-job-alerts';
const sdk = initialiseSdk({ publishableKey: 'pk_...', env: 'sandbox' });
const alerts = sdk.register(jobAlertsPlugin());
alerts.render({
theme: { mode: 'light', corners: 'rounded', highlights: 'fill', accent: { hue: 260, chroma: 1 } },
config: { label: 'Get alerts', headerText: 'Subscribe to job alerts' },
initialFilters: {},
});
<div id="inploi-job-alerts"></div>
<script defer src="https://sdk.inploi.com/@inploi/sdk/cdn/index.js"></script>
<script defer src="https://sdk.inploi.com/@inploi/plugin-job-alerts/cdn/index.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const sdk = inploi.initialiseSdk({ publishableKey: 'pk_...', env: 'sandbox' });
const alerts = sdk.register(inploi.jobAlertsPlugin());
alerts.render({
theme: { mode: 'light', corners: 'rounded', highlights: 'fill', accent: { hue: 260, chroma: 1 } },
config: { label: 'Get alerts', headerText: 'Subscribe to job alerts' },
initialFilters: {},
});
});
</script>
Host element
Add a container element where the widget will render:
<div id="inploi-job-alerts"></div>
Configuration
Theme
| Option | Values | Description |
|---|
mode | light, dark | Color scheme |
corners | rounded, soft, sharp | Border radius style |
highlights | stroke, fill | Button/tag style |
accent | { hue: number, chroma: number } | Accent color. hue: 0–360 color angle, chroma: 0–2 intensity multiplier |
Other options
| Option | Type | Required | Description |
|---|
config.label | string | Yes | Button label text |
config.headerText | string | Yes | Header above the form |
initialFilters | Record<string, string | string[]> | Yes | Pre-populated filter values |
terms | object | No | Override default UI text. Keys: email, name, save, save_alert, frequency, create_alert, email_placeholder, name_placeholder, and frequency labels (DAILY, WEEKLY, MONTHLY) |
API
render(params)
Mounts the job alerts form in the host element.
setFilters(filters)
Updates the current filters programmatically.
alerts.setFilters({ city: 'London' });
setConfig(config)
Updates the label and header text at runtime. Accepts an object or an updater function.
alerts.setConfig({ label: 'Subscribe', headerText: 'Get notified about new jobs' });
// Or use an updater function
alerts.setConfig(prev => ({ ...prev, label: 'Updated label' }));
prerender(params)
Returns HTML for server-side rendering.
const { html } = await alerts.prerender({ theme, config, initialFilters: {} });
Full configuration reference
type JobAlertsPluginParams = {
theme: {
mode: 'light' | 'dark';
corners: 'rounded' | 'soft' | 'sharp';
highlights: 'stroke' | 'fill';
accent: { hue: number; chroma: number };
};
config: {
label: string;
headerText: string;
};
initialFilters: Record<string, string | string[]>;
terms?: Partial<JobAlertsTranslationTerms>;
};
Integration with Job Search
Job Alerts works well alongside the Job Search plugin, allowing candidates to save their current search as an alert:
import { jobSearchPlugin } from '@inploi/plugin-job-search';
import { jobAlertsPlugin } from '@inploi/plugin-job-alerts';
const jobSearch = sdk.register(jobSearchPlugin());
jobSearch.render({
// ... other options
alerts: {
plugin: jobAlertsPlugin(),
params: { config: { label: 'Alert me', headerText: 'Subscribe to job alerts' } },
},
});
