Formbricks Documentation

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

Installation

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

Create new Feedback Box at app.formbricks.com
Embed JS snippet in <head>
Configure
Render in-app

1. Create new Feedback Box

Create an account at app.formbricks.com

Then, create a new Feedback Box:

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

2. Embed Formbricks snippet in `<head>`

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

<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 pop-over on button click or inline inserted into a div.

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

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

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

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

Sending user data with feedback

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.

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.

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

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

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:

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: