Feedback Plugin

The Feedback plugin collects feedback from candidates about their experience.

Installation

npm
pnpm
CDN

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

Package
CDN

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?',
      },
    },
  },
}));

​Feedback Plugin

​Installation

​Basic usage

​Host element

​Configuration

​Theme

​Other options

​Available term keys

​API

​render(params)

​prerender(params)

​Full configuration reference

​Integration with other plugins