import { Layout } from "@/components/docs/Layout";
import { Fence } from "@/components/shared/Fence";
import Link from "next/link";
import NewFB from "@/images/docs/create-feedback-box.png";
import FBID from "@/images/docs/fb-id.png";
import ResponsiveEmbed from "react-responsive-embed";
import Image from "next/image";

export const meta = {
  title: "Feedback Box",
};

The Feedback Box is an easy way to gather feedback from users in your app.

## Purpose

Allow users to share feedback with 2 clicks. A low friction way to gather feedback helps catching even the smallest points of annoyance / frustration in user experiences.

## Formbricks Approach

- Make it **easy**: 2 clicks to share feedback
- Keep it **personal**: Founder faces
- **Pre-sort** feedback:
  - Bug → Pipe into Bug channel for devs
  - Feedback → Pipe into Feedback channel for PM’s
  - Appreciation → Pipe into General channel for team spirit & testimonials

## Preview

<div className="max-w-md">
  <ResponsiveEmbed
    src="/docs/wrappers/slide-out/demo"
    allowFullScreen
    className="rounded-lg border-2 border-gray-200"
    ratio="8:10"
  />
</div>

## Installation

To add the Feedback Box to your app, you need to perform these steps:

1. Create new Feedback Box at app.formbricks.com
2. Embed JS snippet in `<head>`
3. Configure
4. Render in-app

### 1. Create new Feedback Box

Create an account at [app.formbricks.com](https://app.formbricks.com/auth/signup)

Then, create a new Feedback Box:

<Image src={NewFB} alt="new feedback box" quality="100" />

Go to the "Setup instructions" tab and locate your Feedback Box ID. You'll need it in a minute:

<Image src={FBID} alt="copy feedback box id" quality="100" />

### 2. Embed Formbricks snippet in `<head>`

Embed the following Feedback Box script in your HTML `<head>` tag.

```tsx
<script src="https://cdn.jsdelivr.net/npm/@formbricks/feedback@0.3" defer></script>

<script>
  window.formbricks = {
      ...window.formbricks,
      config: {
        formbricksUrl: "https://app.formbricks.com",
        formId: "YOUR FEEDBACK BOX ID HERE", // copy from Formbricks dashboard
        contact: {
          name: "Matti",
          position: "Co-Founder",
          imgUrl: "https://avatars.githubusercontent.com/u/675065?s=128&v=4",
        },
      },
    }
</script>
```

Afterwards you need to embed the feedback box into your app. The standard ways are either a <Link href="/docs/wrappers/pop-over">pop-over on button click</Link> or <Link href="/docs/wrappers/inline">inline inserted into a div</Link>.

For example for a pop-over on button click you need to add the following code to your app:

```html
<button data-formbricks-button>Feedback</button>
```

### 3. Configure Feedback Box

You can change the content behaviour of the Feedback Box with the config object.

**Basic config**

Add your Formbricks form ID and the formbricks server address to the config object.

```html
<script>
  window.formbricks = {
    ...window.formbricks,
    config: {
      formbricksUrl: "https://app.formbricks.com",
      formId: "cldipnvz80002le0ha2a3zhgl",
    },
  };
</script>
```

**Personalizing**

Add your name, position and image link to give users the impression that you care about their feedback :)

```javascript
window.formbricks = {
  ...window.formbricks,
  config: {
    // ...
    contact: {
      name: "Matti",
      position: "Co-Founder",
      imgUrl: "https://avatars.githubusercontent.com/u/675065?s=128&v=4",
    },
  },
};
```

<div id="add-user-email">**Sending user data with feedback**</div>

The feedback box is built for in-app experiences. We assume that you already have user properties stored in a session object.

Here is an example of how to pass it to Formbricks. However, it might differ in your specific case.

```javascript
window.formbricks = {
  ...window.formbricks,
  config: {
    // ...
    customer: {
      email: "", // fill dynamically
      name: "", // fill dynamically
    },
  };
},
```

Note: the `email` field must be present in the customer object

**Styling**

You can style the Feedback Box to match your UI. We recommend to at least replace the brand color with your main color.

```javascript
window.formbricks = {
  ...window.formbricks,
  config: {
    // ...
    style: {
      brandColor: "#00c4b8",
    },
  };
},
```

Here are all variables you can set with the current defaults:

```javascript
style: {
  brandColor: "#00c4b8",
  borderRadius: "0.4rem",
  headerBGColor: "#1e293b",
  headerTitleColor: "#111111",
  boxBGColor: "#cbd5e1",
  textColor: "#0f172a",
  buttonHoverColor: "#e2e8f0",
},
```

### Example config

Here is an example of a full config object:

```javascript
window.formbricks = {
  ...window.formbricks,
  config: {
    formbricksUrl: "https://app.formbricks.com",
    formId: "cldipcgat0000mn0g31a8pdse",
    containerId: "formbricks-feedback-box", // only needed for modal & inline
    contact: {
      name: "Johannes",
      position: "Co-Founder",
      imgUrl: "https://avatars.githubusercontent.com/u/72809645?v=4",
    },
    customer: {
      id: "", // fill dynamically
      name: "", // fill dynamically
      email: "", // fill dynamically
    },
    style: {
      brandColor: "#0E1420",
      headerBGColor: "#E5E7EB",
      headerTitleColor: "#4B5563",
      boxBGColor: "#F9FAFB",
      textColor: "#374151",
      buttonHoverColor: "#F3F4F6",
    },
  },
};
```

### 4. Render survey in your app

To add the Feedback Box to your UI, you can use different wrappers. Please follow the instructions linked below:

1. <Link href="/docs/wrappers/pop-over">In-app Pop-over</Link>
2. <Link href="/docs/wrappers/modal">Modal</Link>
3. <Link href="/docs/wrappers/inline">Inline</Link>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
