> ## Documentation Index
> Fetch the complete documentation index at: https://formbricks.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Feedback Box

> A step-by-step guide to creating a feedback box using Formbricks.

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](https://formbricks.com/survey-templates/feedback-box):

<img src="https://mintcdn.com/formbricks/DApr5ZMISC_jbIxa/images/xm-and-surveys/xm/best-practices/feedback-box/create-feedback-box-by-template.webp?fit=max&auto=format&n=DApr5ZMISC_jbIxa&q=85&s=82a0aa62aff4d1a3813f82784e66a3fd" alt="Create feedback box by template" width="1612" height="902" data-path="images/xm-and-surveys/xm/best-practices/feedback-box/create-feedback-box-by-template.webp" />

### 2. Update question content

Change the questions and answer options according to your preference:

<img src="https://mintcdn.com/formbricks/DApr5ZMISC_jbIxa/images/xm-and-surveys/xm/best-practices/feedback-box/change-text-content.webp?fit=max&auto=format&n=DApr5ZMISC_jbIxa&q=85&s=f84fa5d3a76e31441dfc1156a4e65d6a" alt="Change text content" width="1899" height="821" data-path="images/xm-and-surveys/xm/best-practices/feedback-box/change-text-content.webp" />

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

<img src="https://mintcdn.com/formbricks/DApr5ZMISC_jbIxa/images/xm-and-surveys/xm/best-practices/feedback-box/add-action.webp?fit=max&auto=format&n=DApr5ZMISC_jbIxa&q=85&s=85a452f9bab22cdaecc307c777c45631" alt="Add action" width="2616" height="1797" data-path="images/xm-and-surveys/xm/best-practices/feedback-box/add-action.webp" />

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.

<img src="https://mintcdn.com/formbricks/DApr5ZMISC_jbIxa/images/xm-and-surveys/xm/best-practices/feedback-box/action-innertext.webp?fit=max&auto=format&n=DApr5ZMISC_jbIxa&q=85&s=6ef0759b759e9cacc3cec3c23bc1707c" alt="Add HTML action" width="2711" height="1931" data-path="images/xm-and-surveys/xm/best-practices/feedback-box/action-innertext.webp" />

2. **CSS Selector:** This means that when an element with a specific CSS-Selector like `#feedback-button` is clicked, your Feedback Box is triggered.

<img src="https://mintcdn.com/formbricks/DApr5ZMISC_jbIxa/images/xm-and-surveys/xm/best-practices/feedback-box/action-css.webp?fit=max&auto=format&n=DApr5ZMISC_jbIxa&q=85&s=a7a982a42cb1109340bc523daae7a0e1" alt="Add CSS action" width="2554" height="1994" data-path="images/xm-and-surveys/xm/best-practices/feedback-box/action-css.webp" />

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

<img src="https://mintcdn.com/formbricks/DApr5ZMISC_jbIxa/images/xm-and-surveys/xm/best-practices/feedback-box/select-action.webp?fit=max&auto=format&n=DApr5ZMISC_jbIxa&q=85&s=0783672d156ead539a61d075c2bc2168" alt="Select feedback button action" width="1146" height="572" data-path="images/xm-and-surveys/xm/best-practices/feedback-box/select-action.webp" />

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

<img src="https://mintcdn.com/formbricks/DApr5ZMISC_jbIxa/images/xm-and-surveys/xm/best-practices/feedback-box/set-recontact-options.webp?fit=max&auto=format&n=DApr5ZMISC_jbIxa&q=85&s=ace78dd57b7da8e5dbe2d770e5254321" alt="Set recontact options" width="927" height="696" data-path="images/xm-and-surveys/xm/best-practices/feedback-box/set-recontact-options.webp" />

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

<img src="https://mintcdn.com/formbricks/DApr5ZMISC_jbIxa/images/xm-and-surveys/xm/best-practices/feedback-box/publish-survey.webp?fit=max&auto=format&n=DApr5ZMISC_jbIxa&q=85&s=59aa29d4fdd5eadbdba65cc441ac766a" alt="Publish survey" width="1902" height="822" data-path="images/xm-and-surveys/xm/best-practices/feedback-box/publish-survey.webp" />

## 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)](/xm-and-surveys/surveys/website-app-surveys/quickstart) to install the widget.</Note>
