Введение

Итак, я работал над CodeStash, платформой для обмена и обсуждения фрагментов кода, что-то вроде гибрида Reddit и Stack Overflow. Крутая часть? Имеется встроенный искусственный интеллект, который объясняет фрагменты кода на базе Google Gemini. Будь то какой-то корявый код JavaScript или Python, CodeStash позволяет пользователям по запросу запрашивать объяснения ИИ. Но… объяснения ИИ могут быть немного случайными. Некоторые пользователи могут найти ответ очень полезным, а другие? Не так уж и много. Вот тут-то и приходит на помощь Formbricks.

В этом посте я покажу вам, как я добавил 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