📃 👀 Run in-app surveys in your web app in 10 minutes with Formbricks 🤓❤️‍🔥
Tags: webdev, javascript, react, opensource
Published: 2023-08-28 10:33:37

Did you know that in app surveys have a whopping **6-10x better conversion rate** compared to those boring email surveys? If you're eager to know how you can set one up in your web app in a **breezy 10-15 minutes**, just read on...

## TL;DR
I'll show you how you can display any in app survey in your web app with Formbricks (open source). It'll allow you to add a **Feedback Box, invite users to interviews, measure feature satisfaction** and muuuuuch more 🤍

![Look at all of them possibilities with Formbrick](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gul96h5x1jonw0sw7k7p.gif)_Look at all of them possibilities with Formbricks_

---

### Formbricks: Open-source Forms and Surveys 🤸
A word about us before we dive in: Formbricks helps you understand how users like your product or service. It helps you ask the right people the right questions to **build the most user-friendly product possible**. The best part? It"s open-source, [pls support us with a ⭐](https://formbricks.com/github)

<a href="https://formbricks.com/github" target="_blank">![Can Formbricks has all the stars](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3926ksrmyk3uh5yv62sn.png)</a>

---

## 4 simple steps

Let's dive right in. This is what we'll be doing:

1. Create a free Formbricks Cloud account
2. Create your first survey
3. Set up the Formbricks Widget in your app
4. Restart your app and enjoy your brand new in app survey


## 1. Grab a Formbricks Cloud Account - it's free

You can totally [self-host Formbricks](/docs/self-hosting/deployment) if you're into that, but if you're chasing speed, the cloud is your best friend. Just [sign up here](https://app.formbricks.com/auth/signup) and breeze through the onboarding steps until you're here:


![Formbricks Open Source Experience Management Onboarding](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9uzmwh5gkr0xu5ip1m1i.png)


## 2. Craft Your First Survey 🛠️

Okay, let's make a survey! Hop into one of the templates, and then swing by the survey settings:

![In app micro survey popup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tir2e1ivtw763zd02k6w.png)

There's a little note in orange that's telling us we haven't connected with our app yet. No sweat, we'll get to that! First, let's set our survey right.

For the "How to ask" setting, make sure you pick "Web App":

![Collect in app survey responses in 10 minutes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yn82mljk606148sgozis.png)

Now, wander down to the "Survey Trigger" section and choose "New Session". This means that on every new user session this survey will pop:

![Survey settings for popup micro surve](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0stj8obut0a9bx7pts2.png)

In "Recontact Options", set it up in a way that suits your taste. By default, a survey only nudges a user once. For testing, it makes sense to display the survey until a response was provided (or even all the time, ignoring the waiting period):

![In app survey trigger for feedback popup micro survey](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zc2wgky5sfyk8tcz8clq.png)

Once you're happy, slam that **Publish** button!

You'll be escorted to the Summary Page, which is your magical place for all survey responses. From there, head over to the Setup Checklist:

![Options for survey popup in app micro survey](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ff48kc6qlkz5klozu0z.png)

## 3. Unleash the Formbricks Widget 🧙

Now on the Setup Checklist, you'll notice a couple of things. First up, there's the Widget Status Indicator. When your app and Formbricks Cloud do their special handshake, this will light up green:

![pop up survey settings for inapp web survey](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0g0vw07lrlajqge3p2b8.png)

The manual's got a code snippet which has:

- Your unique **Environment ID** for Formbricks
- The **API Host** which is, for us Cloud folks, ‘https://app.formbricks.com’

![feedback popup in app survey](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y526jspl6bhje52y0qhi.png)

### Let's Bring Formbricks to Life in Your App!

Now, depending on what tech stack you're using for your frontend, the process varies slightly. Here are some guides:

- [Next.JS App Dir](/docs/getting-started/nextjs-app)
- [Next.JS Pages Dir](/docs/getting-started/nextjs-pages)
- [React](/docs/getting-started/react)
- [Vue.JS](/docs/getting-started/vuejs)

## 4. Revive Your App & Spy on the Console 👀

Restart your app and then pop open your browser console. If all's gone to plan, you should spot your survey sitting in the bottom right corner:

![In app survey in React app for micro surveys](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tkc8r55u2ve9ufo2lf01.png)
Annnd that should be it!

## 👏 Congrats, you did it! 🚀

<img width="100%" style="width:100%" src="https://media.giphy.com/media/WO5Q7FsxJN2pjYc424/giphy.gif">

---


### Debugging Support - 'Cause Sometimes Things Get Wonky 🐛

If your survey's playing hide-and-seek, don't sweat. Here's a mini cheat sheet to help you:

#### Connectivity Issues

Swing back to [app.formbricks.com](http://app.formbricks.com) and check the Setup Checklist. If it's singing the "Not connected" blues, your app hasn't pinged Formbricks Cloud yet. 


![setup checklist ui of survey popup for in app surveys](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cx1rmmfq61xserx90kxd.png)


**The Fix:** Double-check your widget's heartbeat in your browser console. For that make sure that `debug: true` mode is enabled in the Formbricks embedding. If things look off, we've got your back over at [our Discord](https://formbricks.com/discord).

---

#### Survey not loaded

Your app's talks with Formbricks Cloud, but the widget did not load your survey.

![survey logs for in app survey pop up micro](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6tmbm3t3x6sr9dxsyy6h.png)

**The Fix:** Confirm your survey is not a draft anymore and set to "in progress" in Formbricks Cloud's Survey Summary page.

---

#### Survey's Being Shy

Your survey's there, but it's just not being triggered:

![ui of survey popup for in app micro surveys](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3dwzgsusv9ob77hm3va6.png)

**The Fix:** 
1. Try opening your app incognito-style. Remember, the New Session action is only fired after 60 minutes of user inactivity or if a user gets logged out via `formbricks.logout()`.
2. See if “Event ‘New Session” is being tracked in the logs. If it's all good but the survey's still hiding, give us a shout at our Discord 👇

Still stuck? No worries! Drop by [our Discord](https://formbricks.com/discord) and we'll jam together until we get it right. 🤘

---

## Let's look back and learn
Today we've learned how to:

- Connect Formbricks with your app
- Create an in app survey
- Display it in your app
- Send the data to the analysis backend

From now on, the world of in app surveys is yours!

Check out these best practices for inspiration:

- [Learn from Churn](https://formbricks.com/docs/best-practices/cancel-subscription)
- [Interview Prompt
](https://formbricks.com/docs/best-practices/interview-prompt)
- [Product Market Fit Survey](https://formbricks.com/docs/best-practices/pmf-survey)
- [Trial Conversion Survey](https://formbricks.com/docs/best-practices/improve-trial-cr)
- [Feature Chaser](https://formbricks.com/docs/best-practices/feature-chaser)
- [Feedback Box](https://formbricks.com/docs/best-practices/feedback-box)
- [Docs Feedback
](https://formbricks.com/docs/best-practices/docs-feedback)

**Comment for which you'd like the next tutorial!**


<a href="https://formbricks.com/github" target="_blank">![Can Formbricks has allll the starsss](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3926ksrmyk3uh5yv62sn.png)</a>
To help us keep these articles coming, [drop us a twinkelin' ⭐ ](https://formbricks.com/github)

Thank you for reading!
Johannes