import { MdxImage } from "@/components/MdxImage";
import Link from "next/link";

import ActionCSS from "./action-css.webp";
import ActionText from "./action-innertext.webp";
import AddAction from "./add-action.webp";
import ChangeTextContent from "./change-text-content.webp";
import CreateFeedbackBox from "./create-feedback-box-by-template.webp";
import PublishSurvey from "./publish-survey.webp";
import SelectAction from "./select-action.webp";
import RecontactOptions from "./set-recontact-options.webp";

export const metadata = {
  title: "Implementing the Feedback Box with Formbricks: A Step-by-Step Tutorial",
  description:
    "Unlock user insights effortlessly! Discover how to set up the Feedback Box in your app using Formbricks, allowing your users to provide real-time feedback. Follow our comprehensive guide to enhance user experience and respond rapidly to feedback",
};

#### Best Practices

# Feedback Box

The Feedback Box gives your users a direct channel to share their feedback and feel heard.

## Purpose

A low friction way to gather feedback helps catching even the smallest points of frustration in user experiences. Use automations to react rapidly and make users feel heard.

## Formbricks Approach

- Make it easy: 2 clicks to share feedback
- Pipe insights where team can see them and react quickly

## 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. Add user action to trigger Feedback Box
3. Update recontact settings to display correctly

### 1. Create new Feedback Box

If you don't have an account yet, create one at [app.formbricks.com](https://app.formbricks.com/auth/signup)

Then, create a new survey and look for the "Feedback Box" template:

<MdxImage
  src={CreateFeedbackBox}
  alt="Create feedback box by template"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

### 2. Update question content

Change the questions and answer options according to your preference:

<MdxImage
  src={ChangeTextContent}
  alt="Change text content"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

### 3. Create user action to trigger Feedback Box:

Go to the “Audience” tab, find the “When to send” card and choose “Add Action”. We will now use our super cool User Action Tracker:

<MdxImage src={AddAction} alt="Add action" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />

We have two options to track the Feedback Button in your application: innerText and CSS-Selector:

1. **Inner Text:** This means that whenever a user clicks any HTML item in your app which has an `Inner Text` of `Feedback` the Feedback Box will be displayed.

   <MdxImage src={ActionText} alt="Add HTML action" quality="100" className="rounded-lg" />

2. **CSS Selector:** This means that when an element with a specific CSS-Selector like `#feedback-button` is clicked, your Feedback Box is triggered.
   <MdxImage src={ActionCSS} alt="Add CSS action" quality="100" className="rounded-lg" />

### 4. Select action in the “When to ask” card

<MdxImage
  src={SelectAction}
  alt="Select feedback button action"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

### 5. Set Recontact Options correctly

Scroll down to “Recontact Options”. Here you have to choose the right settings so that the Feedback Box pops up every time the user action is performed. (Our default is that every user sees every survey only once):

<MdxImage
  src={RecontactOptions}
  alt="Set recontact options"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

### 6. You’re ready publish your survey!

<MdxImage
  src={PublishSurvey}
  alt="Publish survey"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

## Setting up the Widget

<Note>
  ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Feedback Box
  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart) to install the widget.
</Note>

### &nbsp;

# That’s it! 🎉
