अपस्टैश चैटबॉक्स की घोषणा

संतोषजनक उपयोगकर्ता अनुभव के लिए त्वरित, इंटरैक्टिव संचार महत्वपूर्ण है। यही कारण है कि कई कंपनियां अपनी वेबसाइटों पर एक लाइव चैटबॉक्स विजेट प्रदान करती हैं।

यह क्या है

यह एक चैटबॉक्स विजेट है, वेबसाइटों के लिए व्यवस्थापक चैट पैनल के साथ, उपयोगकर्ताओं को डेवलपर्स/व्यवस्थापकों से जोड़ता है। इस तरह, साथियों के बीच एक संवादात्मक संचार स्थापित किया जा सकता है।

यह प्रोजेक्ट स्टोरेज के लिए Upstash Redis के साथ Next.js का उपयोग करता है।

उपयोगकर्ता ने बातचीत शुरू की

नए आरंभ की गई चैट के लिए एक सूचना Slack पर जाती है

व्यवस्थापक जवाब दे सकते हैं

आप यहां डेमो देख सकते हैं।

ध्यान दें कि चैट आईडी कंसोल में दिखाई गई है। ध्यान दें और /chat/{id} . पर जाएं व्यवस्थापक पैनल देखने के लिए और दोनों इंटरफ़ेस एक दूसरे के साथ कैसे इंटरैक्ट करते हैं।

1. डेटाबेस और पर्यावरण चर बनाएं

डेटा Upstash Redis में रखा जाएगा।

Upstash कंसोल पर एक निःशुल्क Redis डेटाबेस बनाएँ

कॉपी करें .env.local.example फ़ाइल को .env.local . पर भेजें (जिसे गिट द्वारा अनदेखा कर दिया जाएगा):

cp .env.local.example .env.local

• UPSTASH_REDIS_REST_URL और UPSTASH_REDIS_REST_TOKEN Upstash कंसोल में डेटाबेस विवरण पृष्ठ पर पाया जा सकता है।
• SLACK_WEBHOOK_URL https://api.slack.com/messaging/webhooks
में स्लैक इंटीग्रेशन पेज पर देखा जा सकता है

2. पैकेज स्थापित करें

yarn add @upstash/chatbox

3. CSS और विजेट आयात करें

// pages/_app.js

import "@upstash/chatbox/index.css";
import dynamic from "next/dynamic";

const ChatBoxWidget = dynamic({
  loader: () => import("@upstash/chatbox").then((mod) => mod.ChatBoxWidget),
  ssr: false,
});

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <ChatBoxWidget />
      <Component {...pageProps} />
    </>
  );
}

विकल्पों को रिएक्ट प्रॉप्स के रूप में पास किया जा सकता है

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

// pages/chat/[id].js

import dynamic from "next/dynamic";

const ChatBoxAdmin = dynamic({
  loader: () => import("@upstash/chatbox").then((mod) => mod.ChatBoxAdmin),
  ssr: false,
});

export default function () {
  return <ChatBoxAdmin />;
}

5. एपीआई बनाएं

// pages/api/chatbox/[...chatbox].js

import createChatBoxAPI from "@upstash/chatbox/api";

const ChatBoxAPI = createChatBoxAPI({
  webhooks: [process.env.SLACK_WEBHOOK_URL],
});

export default ChatBoxAPI;

बधाई हो!

अब आपके पास उपयोगकर्ताओं के लिए अपना स्वयं का चैटबॉक्स है! आनंद लें!

आप यहां स्रोत कोड और npm पैकेज यहां देख सकते हैं।

इस परियोजना के बारे में या सामान्य तौर पर, हम आपकी प्रतिक्रियाओं और विचारों की अत्यधिक सराहना करते हैं। यदि आप हमारी सेवाओं पर कोई प्रतिक्रिया या विचार देना चाहते हैं, तो आप ट्विटर या कलह के माध्यम से ऐसा कर सकते हैं।