Upstash Chatbox পরিচিতি: আপনার ওয়েবসাইটের জন্য স্মুথ লাইভ চ্যাট

তৎক্ষণিক, ইন্টারেক্টিভ যোগাযোগ সন্তোষজনক ব্যবহারকারী অভিজ্ঞতার জন্য অত্যন্ত গুরুত্বপূর্ণ। इसी কারণে অনেক কোম্পানি তাদের ওয়েবসাইটে একটি লাইভ চ্যাটবক্স উইজেট প্রদান করে।

এটি কী?

এটি একটি চ্যাটবক্স উইজেট, পাশাপাশি ওয়েবসাইটের জন্য অ্যাডমিন চ্যাট প্যানেল, যা ব্যবহারকারীদের সাথে ডেভেলপার/অ্যাডমিনকে সংযুক্ত করে। এইভাবে, পিয়ারদের মধ্যে একটি ইন্টারেক্টিভ যোগাযোগ স্থাপন করা যায়।

এই প্রজেক্টটি স্টোরেজের জন্য Upstash Redis পাশাপাশি Next.js ব্যবহার করে।

ব্যবহারকারী কথোপকথন শুরু করে

নব-（নির্দিষ্ট) শুরু হওয়া চ্যাটের জন্য একটি নোটিফিকেশন Slack-এ যায়

অ্যাডমিনরা উত্তর দিতে পারে

আপনি ডেমো এখানে দেখতে পারেন।

চ্যাট আইডি কনসোলে দেখানো হয়েছে। সেটি নোট করুন এবং অ্যাডমিন প্যানেল এবং দুটি ইন্টারফেস কীভাবে একে অপরের সাথে ইন্টারঅ্যাক্ট করে তা দেখতে /chat/{id}-এ যান।

১. ডাটাবেস এবং এনভায়রনমেন্ট ভেরিয়েবল তৈরি করুন

ডেটা 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 ইন্টিগ্রেশন পেজে পাওয়া যাবে।

২. প্যাকেজ ইনস্টল করুন

yarn add @upstash/chatbox

৩. 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 হিসেবে পাস করা যেতে পারে

৪. অ্যাডমিন ড্যাশবোর্ড

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

৫. 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-এর মাধ্যমে তা করতে পারেন।