আপস্ট্যাশ চ্যাটবক্স ঘোষণা করা হচ্ছে

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

এটি কি

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

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

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

নতুন শুরু হওয়া চ্যাটের জন্য একটি বিজ্ঞপ্তি স্ল্যাকে যায়

প্রশাসকরা উত্তর দিতে পারেন

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

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

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

ডেটা Upstash Redis এ রাখা হবে।

Upstash Console

.env.local.example কপি করুন .env.local এ ফাইল করুন (যা গিট দ্বারা উপেক্ষা করা হবে):

cp .env.local.example .env.local

• UPSTASH_REDIS_REST_URL এবং UPSTASH_REDIS_REST_TOKEN আপস্ট্যাশ কনসোলে ডেটাবেস বিশদ পৃষ্ঠায় পাওয়া যাবে।
• SLACK_WEBHOOK_URL https://api.slack.com/messaging/webhooks
-এ স্ল্যাক ইন্টিগ্রেশন পেজে পাওয়া যাবে

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

yarn add @upstash/chatbox

3. সিএসএস এবং উইজেট আমদানি করুন

// 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. 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 প্যাকেজ এখানে দেখতে পারেন।

এই প্রকল্প সম্পর্কে বা সাধারণভাবে, আমরা আপনার প্রতিক্রিয়া এবং ধারণাগুলির প্রশংসা করি। আপনি যদি আমাদের পরিষেবাগুলিতে কোনও প্রতিক্রিয়া বা চিন্তাভাবনা দিতে চান তবে আপনি টুইটার বা বিরোধের মাধ্যমে তা করতে পারেন৷