Upstash Chatbox पेश: आपकी वेबसाइट के लिए निर्बाध लाइव चैट

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

यह क्या है

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

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

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

नए शुरू किए गए चैट के लिए एक सूचना Slack पर जाती है

एडमिन जवाब दे सकते हैं

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

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

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

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

Upstash Console पर एक फ्री Redis डेटाबेस बनाएं

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

cp .env.local.example .env.local 

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

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

विकल्पों को React props के रूप में पास किया जा सकता है

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

5. API बनाएं

// pages/api/chatbox/[...chatbox].js 
 import createChatBoxAPI from "@upstash/chatbox/api"; 
 const ChatBoxAPI 
= createChatBoxAPI({ 
 webhooks: [process.env.SLACK_WEBHOOK_URL], 
}); 
 export 
default 
ChatBoxAPI; 

बधाई हो!

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

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

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