DEV Community

Cover image for 🚀 In-App Surveys in React Native with Formbricks: The Ultimate Guide ❤️‍🔥
preethi sri
preethi sri

Posted on

🚀 In-App Surveys in React Native with Formbricks: The Ultimate Guide ❤️‍🔥

Did you know that in-app surveys can outperform email surveys by increasing response rates 6 to 10 times. If you're keen on collecting meaningful user insights, it only takes a few minutes to implement an in-app survey in your React Native App. Ready to dive in? Let's get started!

What’s in Store:

In this guide, I'll walk you through the exciting process of integrating Formbricks into your React Native app. You'll learn how to seamlessly implement features like an Interactive Feedback Box, invite users to insightful interviews, measure feature satisfaction, and much more.

Let’s dive in and transform how you collect user feedback!

gif1


Formbricks: Open-Source Forms and Surveys 🤸

Quick note before we dive in: Formbricks empowers you to understand how users feel about your product or service. It helps you target the right audience with the right questions to create a product that’s truly user-friendly. And guess what? It’s open-source! If you enjoy using it, don’t forget to support us with a ⭐.

star gif

Excited to get started? Here’s what we’ll do together:

(4 Simple Steps)

  • Sign up for a free Formbricks Cloud account
  • Create your first survey
  • Integrate the Formbricks Widget into your app
  • Restart your app and start using your brand new in-app survey

1. Create a free Formbricks Cloud account 🚀

You can definitely self-host Formbricks if that's your preference, but if you’re looking for quick setup, the cloud option is your best bet. Just sign up here and smoothly follow the onboarding steps until you reach this point:

Create Img

2. Create your first survey 🛠️

Excited to build your survey? Start with a template, then navigate to the survey settings to customize everything to your liking:

Build1 Img

Here, you can select the Release date of the survey!

Build2 Img

Select the Close date of the survey!
Build3 Img

You'll also discover extra settings such as Adjust Survey Closed message, allowing you to customize the survey for a more personalized experience.

Build4 Img

Single-use survey links (or one-time / disposable links) are URLs that grant access to a survey only once.The primary purpose of single-use links is to assure that no respondent submits a survey twice.

You can customize the link used messaging in the Survey Editor settings

Build5 Img

When you publish your survey, the following modal will open:

Link1 Img
Here, you can copy and generate as many single-use links as you need.

URL Encryption
You can encrypt single use URLs to assure information to be protected. To enable it, you have to set the correct environment variable:
Link2 Img

When you’re satisfied, hit that Publish button!🚀

You’ll be taken to the Summary Page, your go-to spot for all survey responses. From there, proceed to the Setup Checklist:

Build6 Img

3. Integrate the Formbricks Widget into your app 🧙

Now on the Setup Checklist, you’ll see a few important items. First, there’s the Widget Status Indicator. When your app successfully connects with Formbricks Cloud, this will turn green:

Setup Img

Right below, you'll see a manual that includes a code snippet. This is where you can obtain your Environment ID and API host to finalize the setup.

Code1 Img

Now, proceed to install the Formbricks React Native SDK using your selected package manager, such as npm, pnpm, or yarn, in your React Native app.

Code2 Img

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

4. Restart your app and start using your brand new in-app survey 🚀

Once you restart your app and open your browser console, you should see your survey appear in the bottom right corner if everything is working smoothly!

Restart Img

And just like that, you’re all set! 🎉

👏 Awesome work, you’ve nailed it! 🚀

gif2

Debugging Assistance – When Things Don’t Go as Expected 🐛

If your survey is proving elusive, don’t fret! Here’s a handy guide to get you back on track:

Connectivity Issues : Return to app.formbricks.com and look at the Website and App Connection under Configuration. If it says "Not connected," it indicates that your app has not yet established communication with Formbricks Cloud.

SDK Img

The Fix : Check your widget's heartbeat in the browser console. To do this, ensure that debug: true mode is activated in the Formbricks embedding. If something seems off, don’t worry—we’re here to help over on our Discord.

Conclusion

So far, you've learnt how to:

  • Integrate Formbricks with your app
  • Create captivating in-app surveys
  • Easily showcase them within your app
  • Transfer the gathered data to your analysis backend

Now you’re all set to harness the full power of in-app surveys!

To support us in creating more articles, please consider giving us a star ⭐ on GitHub. 😉

gif star

Thanks for reading!
Preethi

Top comments (0)