🔥 How To Get Juicy User Insights With In-App Pre-Churn Survey In Next.js With Formbricks 💡💬
Tags: opensource, webdev, tutorial, nextjs
Published: 2023-09-22 12:03:34


Churn surveys are a valuable tool for businesses, especially app-based businesses, to understand why customers are leaving their service. By asking customers why they are churning, businesses can identify areas where they can improve their product or service to prevent future churn. An example of such surveys can be seen below:

![Image of a churn survey](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oayajb59v8han1jakfot.jpg)

Imagine being able to anticipate user departures before they happen, giving you a chance to address concerns, tailor your offerings, and ultimately, boost user loyalty. This is where the power of pre-churn surveys comes into play, revolutionizing the way businesses interact with their users.

## TL;DR

In this article, you will learn how to get juicy user insights with in-app pre-churn surveys in your `Next.js` application using [`Formbricks`](https://formbricks.com/).

![Light bulb gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vsftf09407cdbv3xy4uj.gif)

## Formbricks: The Only Open-Source Solution For Pre-Churn Surveys 

`Formbricks` is an open-source survey software that can help businesses create and send in-app pre-churn surveys. Formbricks is easy to use and integrates with any web, mobile, or desktop application. Support us by [giving us a star.](https://github.com/formbricks/formbricks) :wink: 

## How To Craft A Churn Survey With Formbricks

In this section, I will guide you systematically through the process of crafting a churn survey for your application. Here's an overview of the steps we'll cover:

* Create a complimentary Formbricks cloud account.
* Construct your churn survey utilizing the Formbricks platform.
* Seamlessly integrate Formbricks into your application.
* Put theory into practice by implementing your in-app survey.

### 1. Create an account on Formbricks - It's Free

When utilizing Formbricks, you have the flexibility to either opt for [self-hosting](https://formbricks.com/docs/self-hosting/deployment) if you prefer, or take the more straightforward path by registering on our [platform](https://app.formbricks.com/auth/login).

Upon completing the signup process and swiftly navigating through the onboarding procedures, you will find yourself on your dashboard, which will be presented in a layout similar to this:

![Formbricks dashboard image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nueb10htocgl4rpr9xsh.png)

Following this, it's time to construct your churn survey :hammer_and_wrench:

### 2. Craft your churn survey

Navigate to your dashboard and select the churn survey template:

![Churn survey tab image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tcmqyrm4mavgellko6su.png)

You'll be navigated to a page that looks like this:

![Churn Survey page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sk4g8dksp00bh8tmmq2t.png)

This is your canvas for refining survey questions. Keep in mind that your edits on the left side reflect in real-time in the preview.

Once you've refined the questions to your liking, proceed to the `Settings` tab adjacent to the `Questions` tab. This is where you can fine-tune your survey's configuration.

For the "How to Ask" segment, opt for the web app choice, given your intention to integrate it into your web application:


![How to ask section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/onrp0l73s310csz1jgsh.png)

There's a note in orange that hints we haven't connected with our app yet. No sweat! We'll get back to it, let's get our other survey configuration right first!

Another essential aspect within the `Settings` tab is the `Survey Trigger` section. As its name implies, this settings is for what will trigger the survey in your app. 

![Survey trigger section image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qaq189m60791yhqo4hyb.png)

When you click on the select field, a dropdown will appear, presenting you with a range of options. In case none of these options align with your preferences, you can introduce a personalized trigger by selecting the "Add action" choice. This will prompt a modal to appear:

![Illustration to select out-of-the-box options](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ag1k88fpewwdu0n8kk0r.gif)

From the available options, feel free to make your selection. However, for the context of this article, I'll demonstrate using the inner text option.

![Inner text option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z6zx2egk7ubxyl6nijln.png)

Once you've chosen your preference within this modal, proceed to save your choice by clicking the "Track Action" button. Subsequently, revisit the dropdown and select the newly added option.

Now, proceed to click the "Publish" button located in the upper right corner.

This action will direct you to the Summary page, where you'll gain access to your survey analytics. Additionally, you'll receive a prompt to install the Formbricks widget, enabling you to establish a connection between your survey and your application.

![Survey analytics image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c00b65f39reh9t9ehgi4.png)

Click on it to navigate to the setup checklist page. 

### 3. Setup Checklist: Installing The Formbricks Widget

On the setup checklist page, you'll come across a widget status indicator. This indicator informs us whether our application has been linked to Formbricks Cloud or not. Since we haven't yet established the connection at this juncture, you will observe the following display on your screen:

![Status indicator image ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cpd7cen8vq9vfusg3cza.png)

This is the point where we'll have to get our hands dirty and dive into our app code editor. :smiley: :rocket: 

I assume you already have your Next.js application up and running, so we're set to hit the ground running! 

> Note: I'll be using the Next.js pages dir moving forward.

We'll start by installing Formbricks accross our app with the following command:

```npm
npm install @formbricks/js --save
```

Afterwards, navigate to the `_app.js` component and modify the code as seen below:

```jsx
import formbricks from "@formbricks/js";
import { useEffect } from "react";
import { useRouter } from "next/router";

if (typeof window !== "undefined") {
  formbricks.init({
    environmentId: "<your environment id>" ,
    apiHost: "https://app.formbricks.com", 
    debug: true,
  });
}

export default function App({ Component, pageProps }) {
  const router = useRouter();
  
  useEffect(() => {
    // Connect next.js router to Formbricks
    const handleRouteChange = formbricks?.registerRouteChange;
    router.events.on("routeChangeComplete", handleRouteChange);

    return () => {
      router.events.off("routeChangeComplete", handleRouteChange);
    };
  }, []);

  return <Component {...pageProps} />
}

```

Pay attention to the `if` statement before the component definition. It makes sure that the widget is only initialized if this component is rendered in a browser.

For this tutorial's sake, the `environmentId` property has been intentionally omitted. In actual practice, this value is private and unique to each user. You can retrieve your `environmentId` from **Step 2** of the setup checklist page. Copy and paste the value into the appropriate variable as depicted below:

![Environmentid image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x4mq8q9pdiyfch45lqc6.png)

Following this, the widget status indicator in the Setup checklist page should have been updated to this after reloading your app :tada::

![Status indicator update](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58rskcr8w7noxi9si6n0.png)

Your web browser's console should also display the following logs, confirming the establishment of the connection:

![Console log image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/if6tot0oqjf3e6witkhl.png)

Now that we've verified the connection between your app and Formbricks Cloud, we can proceed to implement the survey trigger.

### 4. How to trigger the Formbricks pre-churn survey

As a quick reminder, we configured a trigger based on the button's inner text, "Cancel Subscription."

With that in mind, feel free to incorporate the `button` with the designated inner text wherever you see fit. I'll demonstrate the implementation in my `index.js` file:

```jsx
import Head from "next/head";

export default function Home() {
  return (
    <>
      <Head>
        <title>Formbricks Churn Survey</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        {/* survey trigger */}
        <button>Cancel Subscription</button>
      </main>
    </>
  );
}
```

On my home page, the survey can now be triggered after clicking the button:

![Illustration of survey trigger](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82mbwtomyh7ip1r1khty.gif)

Congratulations! You have effectively integrated your churn survey into your app! :tada: 

Furthermore, you have the flexibility to customize the placement and appearance of the survey in your application. To achieve this, navigate to the settings page within your Formbricks account and select the "Look & Feel" option from the sidebar.

As an illustration, if you prefer your survey to appear at the center of your web application, scroll down to the "In-app survey placement" section and opt for the "Centered Modal" choice. After adjusting it to your liking, the modal should now appear like this:

![Illustration for centered modal option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0347az3n16yzvq20xfp4.gif)

If the placement doesn't reflect immediately, try restarting your app. :wink: 

Finally, you can effortlessly access your survey analytics and view responses on the Formbricks platform. Simply click on the survey you've crafted to explore these valuable insights.

## Conclusion

So far, you've learnt how to:

- connect Formbricks Cloud to your app
- Easily create an in-app Churn Survey with Formbricks
- How to view your survey analytics on Formbricks

From now on, the world of in-app pre-churn survey is yours. Go ahead and prevent that churn :muscle: :grin: 


To help us keep this articles coming, kindly give us a star on [Github.](https://github.com/formbricks/formbricks) :wink: 

Thank you for reading!