> ## 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

> Email alerts for new jobs

# Job Alerts Plugin

The Job Alerts plugin lets candidates subscribe to email notifications when new jobs matching their criteria are posted.

## Installation

<Tabs>
  <Tab title="npm">
    ```bash theme={null}
    npm install @inploi/plugin-job-alerts
    ```
  </Tab>

  <Tab title="pnpm">
    ```bash theme={null}
    pnpm add @inploi/plugin-job-alerts
    ```
  </Tab>

  <Tab title="CDN">
    ```html theme={null}
    <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>
    ```
  </Tab>
</Tabs>

## Basic usage

<Tabs>
  <Tab title="Package">
    ```typescript theme={null}
    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: {},
    });
    ```
  </Tab>

  <Tab title="CDN">
    ```html theme={null}
    <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>
    ```
  </Tab>
</Tabs>

## Host element

Add a container element where the widget will render:

```html theme={null}
<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.

```typescript theme={null}
alerts.setFilters({ city: 'London' });
```

### `setConfig(config)`

Updates the label and header text at runtime. Accepts an object or an updater function.

```typescript theme={null}
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.

```typescript theme={null}
const { html } = await alerts.prerender({ theme, config, initialFilters: {} });
```

## Full configuration reference

```typescript theme={null}
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:

```typescript theme={null}
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' } },
  },
});
```