Next.js अनुप्रयोगों के लिए प्रतिक्रिया विजेट

उत्पाद निर्णयों को निर्देशित करने के लिए उपयोगकर्ता प्रतिक्रिया महत्वपूर्ण है। हमने आपके उपयोगकर्ताओं से प्रतिक्रिया प्राप्त करने में आपकी सहायता के लिए एक विजेट बनाया है। यह एक रिएक्ट घटक है जो नेक्स्ट.जेएस एपीआई को अपना बैकएंड कहता है। बैकएंड एपीआई केवल अपस्टैश रेडिस डेटाबेस को फीडबैक डेटा भेजता है। साथ ही, आप सबमिट किए गए डेटा को Upstash कंसोल इंटीग्रेशन पेज में देख और प्रबंधित कर पाएंगे

जब आप घटक को अपने Next.js पृष्ठ में जोड़ते हैं, तो निचले दाएं कोने पर एक आइकन प्रदर्शित होगा। क्लिक करने पर फीडबैक फॉर्म दिखाई देगा। यह कैसे काम करता है यह देखने के लिए डेमो देखें।

कोड देखने के लिए जीथब रेपो देखें। वर्तमान में, विजेट को Next.js एप्लिकेशन में उपयोग करने के लिए डिज़ाइन किया गया है। Nuxt, SvelteKit या रीमिक्स जैसे अन्य लोगों का समर्थन करने के लिए हम आपके योगदान का स्वागत करते हैं

इंस्टॉलेशन

निर्भरताएं स्थापित करें:

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

नीचे दिए गए एपीआई कोड को 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 });
  }
}

आपको Upstash पर एक Redis डेटाबेस बनाने की जरूरत है, फिर UPSTASH_REDIS_REST_URL को बदलें और UPSTASH_REDIS_REST_TOKEN जो Upstash कंसोल में डेटाबेस विवरण पृष्ठ पर पाया जा सकता है।

व्यवस्थापक डैशबोर्ड

Upstash कंसोल में Integrations के अंतर्गत एक पेज है> Feedback Widget ताकि आप सबमिट किए गए फ़ीडबैक को देख और प्रबंधित कर सकें।

कॉन्फ़िगरेशन

उपयोगकर्ता :user . का उपयोग करें उपयोगकर्ता की आईडी या ईमेल को पैरामीटर के रूप में पास करने के लिए फ़ील्ड, ताकि उपयोगकर्ता को अपना ईमेल दर्ज न करना पड़े।

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

गुमनाम सबमिशन की अनुमति देने के लिए, ईमेल इनपुट को छिपाने के लिए किसी भी स्ट्रिंग को यूजर आईडी के रूप में सेट करें।

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

मेटाडेटा :आप मेटाडेटा फ़ील्ड का उपयोग करके अतिरिक्त जानकारी संलग्न कर सकते हैं।

शोऑनइनिशियल :सही सेट करें, यदि आप इनपुट डायलॉग को आरंभिक में दिखाना पसंद करते हैं।

समापन शब्द

आपकी रुचि के आधार पर, हम नए घटकों के निर्माण की योजना बना रहे हैं। आप हमारे जीथब रेपो में योगदान कर सकते हैं और मुद्दों और सुविधा अनुरोधों को खोल सकते हैं। ट्विटर और डिस्कॉर्ड पर हमें फॉलो करें।