Forem: Formbricks

📊🔍Measure Your Product-Market Fit With Formbricks' In-App Product-Market Fit Survey 📏📈

Olasunkanmi Balogun — Fri, 13 Oct 2023 17:55:51 +0000

By gauging your startup's product-market fit (PMF), you can determine whether your venture has successfully created a product that resonates with users' preferences and needs.

TL;DR

In this tutorial, you'll learn how to integrate an in-app PMF survey in your Next.js application with Formbricks. It has been built to suit your needs with best practices just like Superhuman.

Formbricks: The Only Open-Source Solution For In-App PMF Surveys

Formbricks is an open-source survey software that helps businesses create and send in-app PMF surveys. Formbricks is easy to use and integrates with any web, mobile, or desktop application. Support us by giving us a star. 😉

Now, before we delve into integrating our PMF survey into our application, let's first create a template for how our survey should appear in our app. We will create this template within the Formbricks cloud platform.

Here's a brief about the steps we'll cover moving forward:

Register an account on the Formbricks platform.
Customize your PMF survey to suit your preferences.
Seamlessly integrate Formbricks into your application.
Implement your in-app PMF survey.

1. Create an account on the Formbricks platform - It's free

Formbricks offers you the choice to either self-host or take the simpler path by registering an account on the Formbricks Cloud platform. For this tutorial will opt for the cloud platform.

Once you have completed the signup and the onboarding procedures, you will be navigated to your dashboard.

Your dashboard should look like this:

If everything has proceeded smoothly up to this stage, let's continue to create and customize our PMF survey 🚀

2. How to create and customize your PMF survey

Within the "For you" feed, you may not come across the PMF survey card among the available templates. In such cases, simply click the "Product Experience" filter button, where you'll discover the PMF survey featuring two distinct templates: one resembling the superhuman template and the other being rather short.

Choose the one that aligns best with your requirements. However, for the sake of this article, I'll opt for the superhuman template.

However, on selecting the one with the superhuman template, you'll be navigated to a page that contains six different question cards (you can choose to add more if you like), and a Thank you card which will be displayed at the end of the survey.

You can also choose to edit each of the questions if you like by clicking on whichever question card you want to edit. It's worth noting that you changes is reflected in the preview real-time.

As an example, in the second question card, you can choose the next question to be displayed based on which answer was submitted with the logic jumps.

In the above image, I have modified my logic to skip to the fourth question card if the "Not at all disappointed" option was selected in the survey instead of normally navigating to the third question.

Once you've completed modifying your questions, navigate to the Settings tab, located right next to the Questions tab. In this section, you can configure your survey according to your preferences.

For the "How to Ask" segment, select the web app choice, since our intention is to integrate it into a web application:

You may get a note in orange that hints you haven't connected with our app yet. It looks like this:

I didn't encounter this notification because I had previously connected Formbricks to an application. However, no need to worry! I'll guide you through overcoming this issue in a subsequent section.

Now, moving on to the Survey Trigger section, this is where you'll configure how you'd like your survey to be triggered in your app.

You can select however you want to trigger your survey in your app when you click the select field.

Perhaps you want to trigger the survey when a user visits a particular URL, this option isn't available in the dropdown. Instead click the "Add Action" option, this will pop-up a modal.

In the above dropdown, I have filled up the required fields to achieve our aim to trigger the survey when a user visits a particular URL.

Regarding the URL for displaying the survey within our app, I've configured the condition to trigger when the browser's URL contains https://localhost:3000/dashboard. This is based on the fact that I'll be using my development server, which initiates on localhost:3000.

However, feel free to select any URL of your preference. Just keep in mind that using an invalid URL will result in an error message stating "your survey will not be shown."

When you are done, click the Track Action button, the action should now be available in the dropdown. Click the dropdown again to select it.

Once you hit the publish button at the top right corner, you will be navigated to your PMF survey dashboard. Here, you'll be notified that you have not connected Formbricks to your app.

Hit the connect button, this will direct you to the Setup checklist page.

3. Setup Checklist: Integrate Formbricks Widget Into Your Application

Since we haven't connected our application to Formbricks Cloud, the widget status indicator will display on your screen like this:

To connect our app with the cloud, we'll have to dive into our code editor 🚀

To streamline this section, I'll assume that your Next.js application is already up and running, allowing us to get straight to the specifics.

To start, install the Formbricks package into our app with the following command:

npm install @formbricks/js --save

Next, navigate to the _app.js file and paste the following code in it:

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} />
}

The environmentId property has been intentionally omitted in the if statement. 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 seen in the image below:

Having done this, the widget status indicator should have been updated to this:

Also, you should see that your PMF survey has been fetched in your browser's console:

If everything works well to this point, let's go ahead to trigger the PMF survey in our app.

4. Trigger Your In-app PMF Survey

I'll navigate to the dashboard page from my app's index page. Hence, I'll implement a link to the dashboard page in my index page as seen below:

import Head from "next/head";
import Link from "next/link";

export default function Home() {
  return (
    <>
      <Head>
        <title>Formbricks PMF 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>
        {/* link to dashboard */}
        <Link href="/dashboard">Nav To Dashboard</Link> 
      </main>
    </>
  );
}

When I click on the link, the page navigates to the dashboard and triggers the survey according to how we implemented the trigger on the Formbricks platform:

And there you have it, you have successfully implemented your in-app PMF survey.

If you desire a more personalized survey, maybe to harmonize with the colors in your UI, we offer a solution for this in the "Look and Feel" section of the settings page. Feel free to dive in and tailor the survey to your liking 🎨

Conclusion

So far, you learned how to:

connect Formbricks Cloud to your app
create a PMF with the best template possible (superhuman)
utilize Formbricks to seamlessly integrate an in-app PMF survey
Customize your survey to your taste

With this solution, you are just on the right track to measure your PMF in no time. 🚀 👊

To help us keep this articles coming, don't forget to give us a star on Github. 😉

Thank you for reading!

🔥 How To Get Juicy User Insights With In-App Pre-Churn Survey In Next.js With Formbricks 💡💬

Olasunkanmi Balogun — Fri, 22 Sep 2023 12:03:34 +0000

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:

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.

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. 😉

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 if you prefer, or take the more straightforward path by registering on our platform.

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:

Following this, it's time to construct your churn survey 🛠️

2. Craft your churn survey

Navigate to your dashboard and select the churn survey template:

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

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:

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.

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:

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.

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.

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:

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

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 install @formbricks/js --save

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

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:

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

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

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:

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:

Congratulations! You have effectively integrated your churn survey into your app! 🎉

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:

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

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 💪 😁

To help us keep this articles coming, kindly give us a star on Github. 😉

Thank you for reading!