首頁 >web前端 >js教程 >在 CodeStash 中調查 AI 對 Formbricks 的滿意度

在 CodeStash 中調查 AI 對 Formbricks 的滿意度

Barbara Streisand原創: 2024-10-31 06:05:30743瀏覽

介紹

所以，我一直在開發 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");
});