📝In-App Surveys Made Simple with Formbricks in React Native: A Complete Guide ❤️‍🔥

Did you know that in-app surveys can increase response rates by 6 to 10 times compared to email surveys? If you're looking to gather valuable user insights, setting up an in-app survey in your React Native app takes just minutes. You're in the right place to get started!

What to Expect:

In this article, I'll take you on an exciting journey to integrate Formbricks into your React Native app. You’ll discover how to effortlessly add features like a dynamic Feedback Box, invite users for meaningful interviews, gauge feature satisfaction, and much more.

Let’s jump in and revolutionize the way you gather user feedback!

Formbricks: Open-Source Forms and Surveys🤸

Let me introduce Formbricks! We help you gain valuable insights into user perceptions with targeted questions to enhance user experience. Plus, it’s open-source! If you appreciate our work, show us some love with a ⭐!

4 Easy Steps

Ready to jump in? Here’s what we’ll accomplish together:

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. Create a free Formbricks Cloud account 🚀

While self-hosting is always an option, if you’re after speed and simplicity, the cloud is the way to go! Just sign up, follow the quick onboarding steps, and you'll be all set:

2. Build Your First Survey 🛠️

Ready to create your survey? Jump into a template, then head over to the survey settings to fine-tune everything:

Here, you'll find a survey trigger that lets you specify when the survey should be activated.

You’ve got two options here:

1. New Session: The survey will automatically pop up every time a new user session starts.
2. Custom Trigger: Set your own specific action to trigger the survey when you see fit.

Pick the option that best suits your needs and customize your survey flow!

You’ll also find additional settings like Response Options, Recontact Options, and Survey Placement to help you tailor the survey for an even more personalized experience.

Once you're satisfied, hit that Publish button! 🎉

You’ll land on the Summary Page, your central hub for all survey responses. Here, you'll find a Connect button—use it to link your website or app to Formbricks and start collecting feedback!

3. Unleash the Formbricks Widget 🧙

When you click on connect button it will take you to this page where you can see the Formbricks sdk connection status

Just below, you'll find a manual with a code snippet. This is where you can grab your environmentId and API host to complete the setup.

The next step is to install the Formbricks React Native SDK using your preferred package manager, such as npm, pnpm, or yarn in your React Native App.

npm install @formbricks/react-native

Now, update your App.js/App.tsx file to initialize Formbricks:

// other imports
import Formbricks from "@formbricks/react-native";

const config = {
  environmentId: "<environment-id>",
  apiHost: "<api-host>",
  userId: "<user-id>",
};

export default function App() {
  return (
    <>
      {/* Your app content */}
      <Formbricks initConfig={config} />
    </>
  );
}

4.Restart Your App & Keep an Eye on the Console👀

Restart your app and open your browser console. If everything’s working as expected, you'll see your survey appear in the bottom right corner!

And that’s it—you're all set! 🎉

👏 Congrats, you nailed it! 🚀

Debugging Support – For When Things Don’t Go as Planned 🐛

If your survey is playing hard to find, don’t worry! Here’s a quick cheat sheet to help you out:

Connectivity Issues
Head back to app.formbricks.com and check the Website and App Connection in Configuration. If it's showing "Not connected," it means your app hasn't communicated with 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 is communicating with Formbricks Cloud, but the widget hasn't loaded your survey yet.

The Fix: Ensure your survey is no longer in draft mode and is set to "in progress" on the Survey Summary page in Formbricks Cloud.

Let’s Reflect and Learn

Today, we explored how to:

1. Connect Formbricks with your app
2. Create engaging in-app surveys
3. Display them effortlessly within your app
4. Send the collected data to your analysis backend Now, you’re ready to unlock the full potential of in-app surveys!

Check out these best practices for inspiration:

• Learn from chrun
• Interview prompt
• Product Market Fit Survey
• Trial Conversion Survey
• Feature Chaser
• Feedback Box
• Docs Feedback

Comment for which you'd like the next tutorial!

To help us continue creating these articles, leave us a sparkling ⭐!

Thank you for reading!
Raju