วิดเจ็ตคำติชมสำหรับแอปพลิเคชัน Next.js

ความคิดเห็นของผู้ใช้มีความสำคัญต่อการตัดสินใจเลือกผลิตภัณฑ์ เราได้สร้างวิดเจ็ตเพื่อช่วยให้คุณได้รับคำติชมจากผู้ใช้ของคุณ เป็นองค์ประกอบ React ซึ่งเรียก Next.js API เป็นแบ็กเอนด์ แบ็กเอนด์ API เพียงแค่ส่งข้อมูลตอบรับไปยังฐานข้อมูล Upstash Redis นอกจากนี้ คุณจะสามารถดูและจัดการข้อมูลที่ส่งได้ในหน้าการผสานรวม Upstash Console

เมื่อคุณเพิ่มส่วนประกอบในหน้า Next.js ไอคอนจะปรากฏที่มุมล่างขวา เมื่อคลิกแล้ว แบบฟอร์มคำติชมจะปรากฏขึ้น ตรวจสอบการสาธิตเพื่อดูว่ามันทำงานอย่างไร

ดู repo Github เพื่อตรวจสอบรหัส ขณะนี้ วิดเจ็ตได้รับการออกแบบเพื่อใช้ในแอปพลิเคชัน Next.js เรายินดีรับฟังความคิดเห็นของคุณเพื่อสนับสนุนผู้อื่น เช่น Nuxt, SvelteKit หรือ Remix

การติดตั้ง

ติดตั้งการพึ่งพา:

npm install @upstash/feedback @upstash/redis

องค์ประกอบและรูปแบบ:

// 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} />
    </>
  );
}

คัดลอก/วางโค้ด API ด้านล่างไปที่ 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 });
  }
}

คุณต้องสร้างฐานข้อมูล Redis ที่ Upstash จากนั้นแทนที่ UPSTASH_REDIS_REST_URL และ UPSTASH_REDIS_REST_TOKEN ซึ่งสามารถพบได้ที่หน้ารายละเอียดฐานข้อมูลใน Upstash Console

แดชบอร์ดผู้ดูแลระบบ

Upstash Console มีหน้าภายใต้ Integrations> Feedback Widget เพื่อให้คุณดูและจัดการความคิดเห็นที่ส่งมาได้

การกำหนดค่า

ผู้ใช้ :ใช้ user ฟิลด์เพื่อส่ง ID ผู้ใช้หรืออีเมลเป็นพารามิเตอร์ ดังนั้นผู้ใช้จะไม่ต้องป้อนอีเมล

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

หากต้องการอนุญาตการส่งแบบไม่ระบุชื่อ ให้ตั้งค่าสตริงใดๆ เป็นรหัสผู้ใช้เพียงเพื่อซ่อนการป้อนข้อมูลอีเมล

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

ข้อมูลเมตา :คุณสามารถแนบข้อมูลเพิ่มเติมโดยใช้ฟิลด์ข้อมูลเมตา

showOnInitial :ตั้งค่าเป็น true หากคุณต้องการให้กล่องโต้ตอบอินพุตแสดงเป็นค่าเริ่มต้น

ปิดคำ

เรากำลังวางแผนที่จะสร้างส่วนประกอบใหม่ขึ้นอยู่กับความสนใจของคุณ คุณสามารถมีส่วนร่วมใน repo Github และปัญหาที่เปิดอยู่และคำขอคุณสมบัติ ติดตามเราได้ที่ Twitter และ Discord