> ## 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

> Collect candidate feedback

# Feedback Plugin

The Feedback plugin collects feedback from candidates about their experience.

## Installation

<Tabs>
  <Tab title="npm">
    ```bash theme={null}
    npm install @inploi/plugin-feedback
    ```
  </Tab>

  <Tab title="pnpm">
    ```bash theme={null}
    pnpm add @inploi/plugin-feedback
    ```
  </Tab>

  <Tab title="CDN">
    ```html theme={null}
    <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>
    ```
  </Tab>
</Tabs>

## Basic usage

<Tabs>
  <Tab title="Package">
    ```typescript theme={null}
    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: {},
    });
    ```
  </Tab>

  <Tab title="CDN">
    ```html theme={null}
    <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>
    ```
  </Tab>
</Tabs>

## Host element

Add a container element where the widget will render. The `data-key` attribute must match the `key` parameter passed to `render()`:

```html theme={null}
<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.

```typescript theme={null}
const { html } = await feedback.prerender({ key: 'my-feedback', theme, size: 'sm', terms: {} });
```

## Full configuration reference

```typescript theme={null}
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](/sdk/plugins/chatbot) and [Job Search](/sdk/plugins/job-search).

```typescript theme={null}
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?',
      },
    },
  },
}));
```