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.
Feedback Plugin
The Feedback plugin collects feedback from candidates about their experience.
Installation
npm install @inploi/plugin-feedback
pnpm add @inploi/plugin-feedback
<script defer src="https://sdk.inploi.com/@inploi/sdk/cdn/index.js"></script>
<script defer src="https://sdk.inploi.com/@inploi/plugin-feedback/cdn/index.js"></script>
Basic usage
import { initialiseSdk } from '@inploi/sdk';
import { feedbackPlugin } from '@inploi/plugin-feedback';
const sdk = initialiseSdk({ publishableKey: 'pk_...', env: 'sandbox' });
const feedback = sdk.register(feedbackPlugin());
feedback.render({
key: 'my-feedback',
theme: {
mode: 'light',
corners: 'rounded',
highlights: 'stroke',
accent: { hue: 265, chroma: 1 },
positive: { hue: 180, chroma: 1 },
negative: { hue: 33, chroma: 1 },
},
size: 'sm',
terms: {},
});
<div data-widget="inploi-feedback" data-key="my-feedback"></div>
<script defer src="https://sdk.inploi.com/@inploi/sdk/cdn/index.js"></script>
<script defer src="https://sdk.inploi.com/@inploi/plugin-feedback/cdn/index.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const sdk = inploi.initialiseSdk({ publishableKey: 'pk_...', env: 'sandbox' });
const feedback = sdk.register(inploi.feedbackPlugin());
feedback.render({
key: 'my-feedback',
theme: {
mode: 'light',
corners: 'rounded',
highlights: 'stroke',
accent: { hue: 265, chroma: 1 },
positive: { hue: 180, chroma: 1 },
negative: { hue: 33, chroma: 1 },
},
size: 'sm',
terms: {},
});
});
</script>
Host element
Add a container element where the widget will render. The data-key attribute must match the key parameter passed to render():
<div data-widget="inploi-feedback" data-key="my-feedback"></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 |
positive | { hue: number, chroma: number } | Positive feedback color |
negative | { hue: number, chroma: number } | Negative feedback color |
Other options
| Option | Type | Required | Description |
|---|
key | string | Yes | Unique identifier matching the host element’s data-key |
size | sm, md, lg | Yes | Widget size |
terms | object | Yes | Override default UI text (pass {} to use defaults; see available keys below) |
Available term keys
| Key | Default |
|---|
a11y_label | How was your experience? |
positive_heading | Thanks! |
negative_heading | We’re sorry to hear that |
positive_text | Would you like to tell us more about your experience? |
negative_text | Would you like to tell us more about your experience? |
submit | Send feedback |
submitting | Sending feedback… |
skip | No, thanks |
submitted_heading | Thank you! |
submitted_text | Your feedback has been sent and will be used to improve our products. |
API
render(params)
Mounts the feedback widget in the host element.
prerender(params)
Returns HTML for server-side rendering.
const { html } = await feedback.prerender({ key: 'my-feedback', theme, size: 'sm', terms: {} });
Full configuration reference
type FeedbackPluginParams = {
key: string;
theme: {
mode: 'light' | 'dark';
corners: 'rounded' | 'soft' | 'sharp';
highlights: 'stroke' | 'fill';
accent: { hue: number; chroma: number };
positive: { hue: number; chroma: number };
negative: { hue: number; chroma: number };
};
terms: Partial<FeedbackTranslationTerms>;
size: 'sm' | 'md' | 'lg';
};
Integration with other plugins
The Feedback plugin can be embedded in other plugins. It is supported by Chatbot and Job Search.
import { chatbotPlugin } from '@inploi/plugin-chatbot';
import { feedbackPlugin } from '@inploi/plugin-feedback';
const chatbot = sdk.register(chatbotPlugin({
feedback: {
plugin: feedbackPlugin(),
params: {
terms: {
positive_heading: 'Thanks for your feedback!',
negative_heading: 'We appreciate your honesty. What could be better?',
},
},
},
}));
