Johannes

Posted on Aug 28, 2023

📃 👀 Run in-app surveys in your web app in 10 minutes with Formbricks 🤓❤️‍🔥

#webdev #javascript #react #opensource

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

4 simple steps

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

Create a free Formbricks Cloud account
Create your first survey
Set up the Formbricks Widget in your app
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 if you're into that, but if you're chasing speed, the cloud is your best friend. Just sign up here and breeze through the onboarding steps until you're here:

2. Craft Your First Survey 🛠️

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

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

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

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

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:

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:

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’

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:

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:

Annnd that should be it!

👏 Congrats, you did it! 🚀

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 and check the Setup Checklist. If it's singing the "Not connected" blues, your app hasn't pinged Formbricks Cloud yet.

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.

Survey not loaded

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

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:

The Fix:

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().
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 and we'll jam together until we get it right. 🤘