Kin Plugin

Kin is an AI-powered chat assistant that helps candidates find jobs, answer questions, and navigate your career site.

Installation

npm
pnpm
CDN

npm install @inploi/plugin-kin

pnpm add @inploi/plugin-kin

<script defer src="https://sdk.inploi.com/@inploi/sdk/cdn/index.js"></script>
<script defer src="https://sdk.inploi.com/@inploi/plugin-kin/cdn/index.js"></script>

If your site uses a server-side caching or minification plugin (e.g. WP Rocket, W3 Total Cache, Autoptimize), exclude all https://sdk.inploi.com/* URLs from it. These plugins can serve a stale cached copy of the SDK, preventing updates from reaching your site. See CDN caching and minification for details.

Basic usage

Package
CDN

import { initialiseSdk } from '@inploi/sdk';
import { kinPlugin } from '@inploi/plugin-kin';

const sdk = initialiseSdk({ publishableKey: 'pk_...', env: 'production' });

const kin = sdk.register(kinPlugin({
  appearance: { mode: 'light', accentColor: '#FF4D00' },
}));

kin.prepare();

<script defer src="https://sdk.inploi.com/@inploi/sdk/cdn/index.js"></script>
<script defer src="https://sdk.inploi.com/@inploi/plugin-kin/cdn/index.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const sdk = inploi.initialiseSdk({ publishableKey: 'pk_...', env: 'production' });
    const kin = sdk.register(inploi.kinPlugin({
      appearance: { mode: 'light', accentColor: '#FF4D00' },
    }));
    kin.prepare();
  });
</script>

Configuration

Parameter	Type	Required	Description
`agentName`	`string`	No	Customer-facing display name for the agent. Defaults to `"Agent"`. Max 32 characters — longer values are silently truncated with a console warning.
`appearance`	`KinAppearance`	No	Visual styling, layout & stacking options
`starterPrompts`	`StarterPrompt[]`	No	Suggested prompts shown in empty state
`container`	`HTMLElement \| string`	No	Container element or CSS selector for `embedded` placement
`serviceUrl`	`string`	No	Override the agents service URL. Defaults to production (`wss://agents.inploi.com`) or sandbox based on `env`

The publishable key is automatically inherited from the SDK initialisation — you don’t need to pass it again.

Agent name

agentName controls the display name shown to candidates. It appears in the chat header, the iframe accessibility label, message author labels, and the empty-state greeting. If you omit it, the agent is shown as “Agent”.

const kin = sdk.register(kinPlugin({
  agentName: 'Acme Careers Assistant',
}));

Keep it short — values longer than 32 characters are truncated automatically so the header doesn’t wrap or clip on mobile.

Appearance

All visual and layout options are grouped under appearance:

Option	Type	Default	Description
`accentColor`	`string`	`'#FF4D00'`	Primary brand color (hex)
`neutralColor`	`string`	`'#555555'`	Neutral tone color (hex)
`mode`	`'light'` \| `'dark'`	`'light'`	Color scheme
`rounded`	`'sm'` \| `'md'` \| `'lg'`	`'lg'`	Border radius preset
`placement`	`string` \| `object`	`'center'`	Widget position. Pass a string (`'left'`, `'center'`, `'right'`, `'embedded'`) for both breakpoints, or `{ desktop, mobile }` for independent positioning (see below)
`launcher`	`object`	`{ desktop: 'input', mobile: 'icon' }`	Launcher style per breakpoint: `{ desktop: 'input' \| 'icon', mobile: 'input' \| 'icon' }`
`zIndex`	`number`	`2147483647`	CSS stacking order of the widget
`logo`	`string` \| `null`	Kin logo	URL for a custom launcher icon. Pass `null` to use the default

Placement

Pass a single string to use the same position on all devices, or an object for independent desktop/mobile positioning:

// Same position everywhere
appearance: { placement: 'right' }

// Different per breakpoint
appearance: { placement: { desktop: 'center', mobile: 'right' } }

Available values: 'left', 'center', 'right'. Use 'embedded' together with the container parameter to render the widget inline in a specific element instead of as a floating overlay.

Launcher

Controls whether the trigger displays as an input bar or a circular icon. By default, desktop shows the input bar and mobile shows the icon.

// Icon on mobile, input on desktop (default)
appearance: { launcher: { desktop: 'input', mobile: 'icon' } }

// Icon everywhere
appearance: { launcher: { desktop: 'icon', mobile: 'icon' } }

The breakpoint between desktop and mobile is determined by (hover: none) and (pointer: coarse) — devices without a precise pointer (phones, tablets) use the mobile setting.

Starter prompts

type StarterPrompt = {
  label: string;   // Text displayed on the button
  message: string; // Message sent when clicked
};

Example:

const kin = sdk.register(kinPlugin({
  agentName: 'Acme Careers Assistant',
  appearance: {
    mode: 'light',
    accentColor: '#FF4D00',
    placement: { desktop: 'center', mobile: 'right' },
    launcher: { desktop: 'input', mobile: 'icon' },
    zIndex: 999999,
  },
  starterPrompts: [
    { label: 'Find jobs near me', message: 'What jobs are available in my area?' },
    { label: 'Help with my application', message: 'I need help with my job application' },
  ],
}));

API

`prepare()`

Preloads the UI and establishes a connection. Call this early for the best user experience.

kin.prepare();

`open()`

Opens the chat panel.

kin.open();

`close()`

Closes the chat panel.

kin.close();

`toggle()`

Toggles the chat panel open/closed.

kin.toggle();

`setAppearance(options)`

Updates visual properties at runtime. Accepts any combination of accentColor, neutralColor, mode, and rounded. Omitted fields keep their current values.

Layout options (placement, launcher, zIndex, logo) cannot be changed at runtime — call destroy() and re-create the plugin to change them.

kin.setAppearance({ mode: 'dark', accentColor: '#6366f1' });

`destroy()`

Removes the widget and cleans up resources.

kin.destroy();

Full configuration reference

type KinPluginParams = {
  agentName?: string;
  serviceUrl?: string;
  appearance?: {
    accentColor?: string;
    neutralColor?: string;
    mode?: 'light' | 'dark';
    rounded?: 'sm' | 'md' | 'lg';
    placement?: 'left' | 'center' | 'right' | 'embedded' | {
      desktop?: 'left' | 'center' | 'right';
      mobile?: 'left' | 'center' | 'right';
    };
    launcher?: {
      desktop?: 'input' | 'icon';
      mobile?: 'input' | 'icon';
    };
    zIndex?: number;
    logo?: string | null;
  };
  starterPrompts?: { label: string; message: string }[];
  container?: HTMLElement | string;
};

WordPress installation

WordPress sites that use a Content Security Policy (CSP) with nonces require additional setup. This is common on enterprise WordPress installations.

CSP nonce setup

If your WordPress site sets a Content-Security-Policy header with a nonce- value, you need to:

Add https://sdk.inploi.com to your CSP directives. In your theme’s functions.php, ensure your CSP header includes:

"script-src 'self' 'nonce-" . esc_attr($nonce) . "' 'unsafe-inline' https://sdk.inploi.com; " .
"frame-src 'self' https://sdk.inploi.com; " .
"connect-src 'self' https://agents.inploi.com wss://agents.inploi.com; " .

Add the nonce to the inline init script. The two external <script> tags don’t need a nonce (they’re allowed by https://sdk.inploi.com in script-src), but the inline init script does:

<script defer src="https://sdk.inploi.com/@inploi/sdk/cdn/index.js"></script>
<script defer src="https://sdk.inploi.com/@inploi/plugin-kin/cdn/index.js"></script>
<script nonce="<?php echo esc_attr(your_csp_nonce_function()); ?>">
  document.addEventListener('DOMContentLoaded', () => {
    const sdk = inploi.initialiseSdk({ publishableKey: 'pk_...', env: 'production' });
    const kin = sdk.register(inploi.kinPlugin({ /* config */ }));
    kin.prepare();
  });
</script>

The nonce value must match the one in your CSP header. If you use a static nonce function with the static keyword, the same value is returned for both the header and the script tag within a single request.

Recommended approach with `wp_enqueue_script`

For the cleanest integration, register scripts through WordPress’s script API instead of hardcoding them in your template. This automatically handles CSP nonces if your theme or CSP plugin supports it:

function enqueue_inploi_kin() {
    wp_enqueue_script('inploi-sdk', 'https://sdk.inploi.com/@inploi/sdk/cdn/index.js', [], null, true);
    wp_enqueue_script('inploi-kin', 'https://sdk.inploi.com/@inploi/plugin-kin/cdn/index.js', ['inploi-sdk'], null, true);
    wp_add_inline_script('inploi-kin', "
        document.addEventListener('DOMContentLoaded', () => {
            var sdk = inploi.initialiseSdk({ publishableKey: 'pk_...', env: 'production' });
            var kin = sdk.register(inploi.kinPlugin({ /* config */ }));
            kin.prepare();
        });
    ");
}
add_action('wp_enqueue_scripts', 'enqueue_inploi_kin');

If your site uses a server-side caching or minification plugin (e.g. WP Rocket, W3 Total Cache, Autoptimize), exclude all https://sdk.inploi.com/* URLs from it. See CDN caching and minification for details.

If your site uses client-side navigation (e.g. Turbo, HTMX, SPA routers), the Kin widget’s DOM can be removed without it knowing. Use destroy() before the page content is replaced, and re-initialise on the new page.

Turbo / Turbolinks
HTMX (hx-boost)
SPA routers

document.addEventListener('turbo:before-cache', () => kin.destroy());
document.addEventListener('turbo:load', () => kin.prepare());

document.addEventListener('htmx:beforeSwap', () => kin.destroy());
document.addEventListener('htmx:afterSettle', () => kin.prepare());

router.beforeEach(() => kin.destroy());
router.afterEach(() => kin.prepare());

Features

Real-time streaming responses

Kin streams responses in real-time, providing a natural conversational experience.

Conversation history

The agent remembers the conversation within a session (or persistently, based on your configuration in Studio).

File uploads

Candidates can upload CVs and other documents for the agent to analyse.

Cross-tab sync

Conversations sync across browser tabs for a seamless experience.

Consent screen

Overview

Plugins

Kin Plugin

Kin Plugin

Installation

Basic usage

Configuration

Agent name

Appearance

Placement

Launcher

Starter prompts

API

`prepare()`

`open()`

`close()`

`toggle()`

`setAppearance(options)`

`destroy()`

Full configuration reference

WordPress installation

CSP nonce setup

Recommended approach with `wp_enqueue_script`

Soft navigation

Features

Overview

Plugins

Documentation Index

​Kin Plugin

​Installation

​Basic usage

​Configuration

​Agent name

​Appearance

​Placement

​Launcher

​Starter prompts

​API

​prepare()

​open()

​close()

​toggle()

​setAppearance(options)

​destroy()

​Full configuration reference

​WordPress installation

​CSP nonce setup

​Recommended approach with wp_enqueue_script

​Soft navigation

​Features

Kin Plugin

Installation

Basic usage

Configuration

Agent name

Appearance

Placement

Launcher

Starter prompts

API

`prepare()`

`open()`

`close()`

`toggle()`

`setAppearance(options)`

`destroy()`

Full configuration reference

WordPress installation

CSP nonce setup

Recommended approach with `wp_enqueue_script`

Soft navigation

Features