Surveying AI Satisfaction with Formbricks in CodeStash-JS Tutorial-php.cn

Surveying AI Satisfaction with Formbricks in CodeStash

Barbara Streisand

Release： 2024-10-31 06:05:30

Original

646 people have browsed it

Introduction

So, I’ve been working on CodeStash, this platform for sharing and discussing code snippets, kind of a cross between Reddit and Stack Overflow. The cool part? There’s a built-in AI that explains code snippets, powered by Google Gemini. Whether it's some gnarly JavaScript or Python code, CodeStash lets users request an AI explanation on demand. But… AI explanations can be a bit hit-or-miss. Some users might find the response super helpful, while others? Not so much. That’s where Formbricks comes in.

In this post, I’ll show you how I added Formbricks to survey users after they get an AI answer, checking if they found it useful. If you’re curious about in-app feedback or just want to see how Formbricks can fit into your projects, stick around!

Why Bother with Surveys?

AI is impressive, but let’s face it—sometimes it misses the mark. By asking users directly if an explanation helped, I get honest, in-the-moment feedback that I can use to fine-tune CodeStash. And Formbricks makes it super simple to add these quick, no-fuss surveys directly into the app. Win-win.

Adding Formbricks into CodeStash (w/ Next.js)

Adding Formbricks was straightforward, and the setup took less than 10 minutes. So if you're thinking, "I don't have time to add all this survey stuff," trust me, it's quicker than you think. Here’s a breakdown:

Step 1: Create Formbricks Account

Follow the steps in this quickstart guide to get started with Formbricks.

Step 2: Install Formbricks

You’ll first need the Formbricks package. Run this command to install it, then follow the steps at :

npm install @formbricks/js zod

Copy after login

Now, create a app/formbricks.tsx file

"use client";

import { usePathname, useSearchParams } from "next/navigation";
import { useEffect } from "react";
import formbricks from "@formbricks/js";

export default function FormbricksProvider() {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    formbricks.init({
      environmentId: "<environment-id>",
      apiHost: "<api-host>",
      userId: "<user-id>", //optional
    });
  }, []);

  useEffect(() => {
    formbricks?.registerRouteChange();
  }, [pathname, searchParams]);

  return null;
}

Copy after login

Now, update your app/layout.tsx file.

// other imports
import FormbricksProvider from "./formbricks";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <FormbricksProvider />
      <body>{children}</body>
    </html>
  );
}

Copy after login

Step 3: Embed the Survey

After an AI explanation is served, a survey pops up asking users how they liked it. Here’s how to embed the survey component right in the response.

In your Formbricks account, create a new survey and in the survey trigger under settings add a code trigger with the key "ai_answer".

Now we can use formbricks.track("ai_answer") method anywhere in our code to programmatically trigger a survey.

For example...

import formbricks from "@formbricks/js";
import axios from "axios";

await axios
  .get("/ai/explain")
  .then((res) => {
      formbricks.track("ai_answer");
});

Copy after login

Step 4: Customize the Survey Questions

In the Formbricks dashboard, tweak the survey to fit what you’re looking for. I went with questions like:

“Was this explanation helpful?” (Yes, No)
“How can we improve AI explanations?” (Optional)

I kept the survey short and simple so that users aren't too distracted by the survey.

The best part? You can set the survey to appear every so often, so you’re not spamming users every time they ask for an explanation.

Screenshots

Surveying AI Satisfaction with Formbricks in CodeStash

Seeing the Feedback in Action

Once responses start rolling in, Formbricks gives you the data all nice and neat. Now I can see what’s working, what’s confusing, and what needs a tweak or two.

Surveying AI Satisfaction with Formbricks in CodeStash

Wrapping It Up

Adding Formbricks to CodeStash made it easy to capture honest feedback without interrupting the user experience. So if you’re building with user feedback in mind, give Formbricks a try!

Thanks for reading, and if you’re into these tools as much as I am, don’t forget to star Formbricks’ GitHub repo ⭐—and if you like CodeStash, give that a star too!

References

Formbricks docs
Next.js docs

The above is the detailed content of Surveying AI Satisfaction with Formbricks in CodeStash. For more information, please follow other related articles on the PHP Chinese website!