首页 > web前端 > js教程 > 正文

在 CodeStash 中调查 AI 对 Formbricks 的满意度

Barbara Streisand
发布: 2024-10-31 06:05:30
原创
702 人浏览过

介绍

所以,我一直在开发 CodeStash,这是一个用于共享和讨论代码片段的平台,有点像 Reddit 和 Stack Overflow 的结合体。最酷的部分?有一个内置的人工智能可以解释代码片段,由 Google Gemini 提供支持。无论是一些粗糙的 JavaScript 还是 Python 代码,CodeStash 都可以让用户按需请求 AI 解释。但是……人工智能的解释可能有点随意。有些用户可能会发现这个回复非常有帮助,而其他用户呢?没那么多。这就是 Formbricks 发挥作用的地方。

在这篇文章中,我将向您展示如何添加 Formbricks 在用户获得 AI 答案后对他们进行调查,检查他们是否认为它有用。如果您对应用内反馈感到好奇,或者只是想了解 Formbricks 如何融入您的项目,请留下来!

为什么要费心进行调查?

人工智能令人印象深刻,但让我们面对现实吧——有时它没有达到目标。通过直接询问用户解释是否有帮助,我得到了诚实的、即时的反馈,我可以用它来微调 CodeStash。 Formbricks 使得将这些快速、简单的调查直接添加到应用程序中变得非常简单。双赢。

将 Formbricks 添加到 CodeStash(带有 Next.js)

添加 Formbricks 非常简单,设置时间不到 10 分钟。因此,如果您在想,“我没有时间添加所有这些调查内容”,请相信我,它比您想象的要快。详细介绍如下:

第 1 步:创建 Formbricks 帐户

按照本快速入门指南中的步骤开始使用 Formbricks。

第2步:安装Formbricks

您首先需要 Formbricks 软件包。运行此命令来安装它,然后按照以下步骤操作:

npm install @formbricks/js zod
登录后复制

现在,创建一个 app/formbricks.tsx 文件

"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;
}
登录后复制

现在,更新您的 app/layout.tsx 文件。

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

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

第 3 步:嵌入调查

人工智能解释完成后,会弹出一项调查,询问用户是否喜欢它。以下是如何将调查组件嵌入到响应中。

在您的 Formbricks 帐户中,创建一个新调查,并在设置下的调查触发器中添加带有键“ai_answer”的代码触发器。

现在我们可以在代码中的任何位置使用 formbricks.track("ai_answer") 方法以编程方式触发调查。

例如...

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

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

第 4 步:定制调查问题

在 Formbricks 仪表板中,调整调查以适合您正在寻找的内容。我带着这样的问题去:

“这个解释有帮助吗?” (是,否)
“我们如何改进人工智能的解释?” (可选)

我让调查简短明了,这样用户就不会因为调查而分心。

最好的部分?您可以将调查设置为每隔一段时间出现一次,这样您就不会在用户每次要求解释时向他们发送垃圾邮件。

截图

Surveying AI Satisfaction with Formbricks in CodeStash

Surveying AI Satisfaction with Formbricks in CodeStash

Surveying AI Satisfaction with Formbricks in CodeStash

查看实际反馈

一旦回复开始滚滚而来,Formbricks 就会为您提供完整整洁的数据。现在我可以看到什么是有效的,什么是令人困惑的,以及什么需要一两个调整。

Surveying AI Satisfaction with Formbricks in CodeStash

总结一下

将 Formbricks 添加到 CodeStash 可以轻松捕获诚实的反馈,而不会中断用户体验。因此,如果您在构建时考虑到了用户反馈,请尝试一下 Formbricks!

感谢您的阅读,如果您和我一样热衷于这些工具,请不要忘记为 Formbricks 的 GitHub 存储库加注星标 ⭐——如果您喜欢 CodeStash,也请给它加注星号!

参考

  1. Formbricks 文档
  2. Next.js 文档

以上是在 CodeStash 中调查 AI 对 Formbricks 的满意度的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板