介紹

所以，我一直在開發 CodeStash，這是一個用於共享和討論程式碼片段的平台，有點像 Reddit 和 Stack Overflow 的結合體。最酷的部分？有一個內建的人工智慧可以解釋程式碼片段，由 Google Gemini 提供支援。無論是一些粗糙的 JavaScript 還是 Python 程式碼，CodeStash 都可以讓使用者按需請求 AI 解釋。但是……人工智慧的解釋可能有點隨意。有些用戶可能會發現這個回覆非常有幫助，而其他用戶呢？沒那麼多。這就是 Formbricks 的用武之地。

在這篇文章中，我將向您展示如何在用戶獲得 AI 答案後添加 Formbricks 來調查用戶，檢查他們是否認為它有用。如果您對應用程式內回饋感到好奇，或者只是想了解 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: "",
      apiHost: "",
      userId: "", //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 (
    
      
      {children}
    
  );
}

第 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 儀表板中，調整調查以滿足您的需求。我帶著這樣的問題：

「這個解釋有幫助嗎？」(是，否)
「我們如何改進人工智慧的解釋？」（選修的）

我讓調查簡短明了，這樣用戶就不會因為調查而分心。

最好的部分？您可以將調查設定為經常出現，這樣您就不會在使用者每次要求解釋時向他們發送垃圾郵件。

截圖

查看實際回饋

一旦回覆開始滾滾而來，Formbricks 就會為您提供完整整潔的數據。現在我可以看到什麼是有效的，什麼是令人困惑的，以及什麼需要一兩個調整。

總結一下

將 Formbricks 新增至 CodeStash 可以輕鬆捕捉誠實的回饋，而不會中斷使用者體驗。因此，如果您在建置時考慮到了用戶回饋，請嘗試 Formbricks！

感謝您的閱讀，如果您和我一樣熱衷於這些工具，請不要忘記為 Formbricks 的 GitHub 存儲庫加註星標 ⭐，如果您喜歡 CodeStash，也請給它加註星標！

參考

1. Formbricks 文件
2. Next.js 文件