Plugins
Job Search Widget
Render an inploi job search UI with the SDK
The Job Search plugin renders a full search UI. Start by initialising the SDK, then register the plugin.
Host element required: <div data-widget="inploi-job-search" /> . Use data-widget-id when rendering multiple widgets.
import { jobSearchPlugin } from '@inploi/plugin-job-search';
import { initialiseSdk } from '@inploi/sdk';
const sdk = initialiseSdk({ publishableKey: 'pk_...', env: 'sandbox' });
const jobSearch = sdk.register(jobSearchPlugin());
// Host element in your HTML:
// <div data-widget="inploi-job-search" data-widget-id="main"></div>
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 }, typography: {} },
initialState: { view: 'list', mode: 'base', filters: {}, query: '', page: 1 },
onStateChange: partial => {
/* sync URL, analytics, etc. */
},
});<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: 'production' });
const jobSearch = sdk.register(inploi.jobSearchPlugin());
jobSearch.render({
widgetId: 'main',
properties: [{ key: 'city', label: 'City', select: 'many' }],
jobCard: { subheading: { key: 'company_name' }, infoTags: [{ key: 'city' }] },
theme: { mode: 'light', corners: 'soft', highlights: 'fill', accent: { hue: 260, chroma: 1 }, typography: {} },
initialState: { view: 'list', mode: 'base', filters: {}, query: '', page: 1 },
onStateChange: () => {},
});
});
</script>Plugin configuration
theme
Controls the visual design of the widget.
Prop
Type
properties
Controls which filters to expose and how they behave.
Prop
Type
jobCard overrides
Customise card display (salary, links, click handlers).
Prop
Type
terms
Override translations.
Prop
Type
API surface
prerender(params)
Returns { html, data? } for SSR/pre-hydration.
Prop
Type
render(params)
Mounts the UI in the host element; hydrates if prerendered.
Prop
Type
Optional integrations:
feedbackplugin for in-widget feedbackalertsplugin for job alerts
Host element
<div data-widget="inploi-job-search" data-widget-id="main"></div>Requirements
- SDK initialised with your API key from dashboard.inploi.com.