Job Search Plugin
The Job Search plugin renders a complete job search interface with filters, search, and job cards.
Installation
npm install @inploi/plugin-job-search
pnpm add @inploi/plugin-job-search
<script defer src="https://unpkg.com/@inploi/plugin-job-search/cdn/index.js"></script>
Basic usage
import { initialiseSdk } from '@inploi/sdk';
import { jobSearchPlugin } from '@inploi/plugin-job-search';
const sdk = initialiseSdk({ publishableKey: 'pk_...', env: 'sandbox' });
const jobSearch = sdk.register(jobSearchPlugin());
jobSearch.render({
widgetId: 'main',
properties: [
{ key: 'city', label: 'City', select: 'many' },
{ key: 'contract_type', label: 'Contract', select: 'one' },
],
jobCard: {
subheading: { key: 'company_name' },
infoTags: [{ key: 'city' }],
},
theme: {
mode: 'light',
corners: 'soft',
highlights: 'fill',
accent: { hue: 260, chroma: 1 },
},
});
<script defer src="https://unpkg.com/@inploi/sdk/cdn/index.js"></script>
<script defer src="https://unpkg.com/@inploi/plugin-job-search/cdn/index.js"></script>
<div data-widget="inploi-job-search" data-widget-id="main"></div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const sdk = inploi.initialiseSdk({ publishableKey: 'pk_...', env: 'sandbox' });
const jobSearch = sdk.register(inploi.jobSearchPlugin());
jobSearch.render({
widgetId: 'main',
properties: [{ key: 'city', label: 'City', select: 'many' }],
jobCard: { subheading: { key: 'company_name' } },
theme: { mode: 'light', corners: 'soft' },
});
});
</script>
Host element
Add a container element where the widget will render:
<div data-widget="inploi-job-search" data-widget-id="main"></div>
Use data-widget-id to identify the container when rendering multiple widgets on the same page.
Configuration
Full configuration documentation coming soon. See the examples above for common options.
Theme
| Option | Values | Description |
|---|
mode | light, dark | Color scheme |
corners | sharp, soft, round | Border radius style |
highlights | fill, outline | Button/tag style |
accent | { hue, chroma } | Accent color in LCH |
Properties (Filters)
Define which job properties appear as filters:
properties: [
{ key: 'city', label: 'City', select: 'many' }, // Multi-select
{ key: 'contract_type', label: 'Contract', select: 'one' }, // Single-select
]
Job Card
Customize how job cards display:
jobCard: {
subheading: { key: 'company_name' },
infoTags: [{ key: 'city' }, { key: 'salary' }],
}
API
render(params)
Mounts the job search UI in the host element.
prerender(params)
Returns HTML for server-side rendering.
const { html, data } = await jobSearch.prerender({ /* params */ });
