Widget phản hồi người dùng liền mạch cho Next.js

Phản hồi người dùng quan trọng để định hướng quyết định sản phẩm. Chúng tôi xây dựng một widget giúp bạn thu thập phản hồi từ người dùng. Đây là component React gọi Next.js API làm backend. Backend API đơn giản gửi dữ liệu phản hồi đến cơ sở dữ liệu Upstash Redis. Ngoài ra, bạn có thể xem và quản lý dữ liệu đã gửi trong Trang Integrations của Upstash Console.

Khi thêm component vào trang Next.js, một biểu tượng sẽ hiển thị ở góc dưới bên phải. Khi nhấp vào, form phản hồi sẽ hiện ra. Xem demo để xem cách hoạt động.

Xem repo Github để xem mã nguồn. Hiện tại, widget được thiết kế cho ứng dụng Next.js. Chào đón đóng góp để hỗ trợ Nuxt, SvelteKit hoặc Remix

Cài đặt

Cài đặt phụ thuộc:

npm install @upstash/feedback @upstash/redis

Component và style:

// pages/_app.js
import "@upstash/feedback/dist/style.css";
import FeedbackWidget from "@upstash/feedback";

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <FeedbackWidget type="full" />
      <Component {...pageProps} />
    </>
  );
}

Sao chép mã API dưới vào pages/api/feedback.js

// pages/api/feedback.js
import { Redis } from "@upstash/redis";

const redis = new Redis({
  url: "UPSTASH_REDIS_REST_URL",
  token: "UPSTASH_REDIS_REST_TOKEN",
});

export default async function FeedbackWidgetAPI(req, res) {
  try {
    await redis.hset("feedback", {
      [Date.now().toString()]: req.body
    });
    return res.status(200).json({ message: "success" });
  } catch (err) {
    return res.status(400).json({ message: err });
  }
}

Bạn cần tạo cơ sở dữ liệu Redis tại Upstash sau đó thay thế UPSTASH_REDIS_REST_URL và UPSTASH_REDIS_REST_TOKEN có thể tìm thấy tại trang chi tiết database trong Upstash Console.

Bảng quản trị Admin

Upstash Console có trang dưới Integrations > Feedback Widget để xem và quản lý phản hồi đã gửi.

Cấu hình

user: Dùng trường user để truyền id hoặc email người dùng làm tham số, giúp người dùng không phải nhập email.

<FeedbackWidget type="full" user={currentUser.email} />

Để cho phép gửi ẩn danh, đặt bất kỳ chuỗi nào làm user id chỉ để ẩn ô nhập email.

<FeedbackWidget type="full" user="anything" />

metadata: Có thể đính kèm thông tin thêm dùng trường metadata.

showOnInitial: Đặt true nếu muốn hiển thị dialog nhập liệu ngay từ đầu.

Lời kết

Tùy theo sự quan tâm, chúng tôi dự định xây dựng component mới. Bạn có thể đóng góp cho Github repo và mở issues, feature requests. Theo dõi chúng tôi tại Twitter và Discord.