home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Redis

แนะนำ Upstash Chatbox: Live Chat Widget สำหรับเว็บไซต์ของคุณ

การสื่อสารแบบ Real-time และ Interactive มีความสำคัญต่อ User Experience ที่พึงพอใจ นี่คือเหตุผลที่บริษัทหลายแห่งติดตั้ง Live Chatbox Widget บนเว็บไซต์

คืออะไร?

นี่คือ Chatbox Widget พร้อม Admin Chat Panel สำหรับเว็บไซต์ เชื่อมต่อ Users กับ Developers/Admins ทำให้การสื่อสาร Interactive ระหว่าง Peers สามารถสร้างขึ้นได้

โปรเจกต์นี้ใช้ Next.js ร่วมกับ Upstash Redis สำหรับ Storage

User เริ่มต้นการสนทนา

แนะนำ Upstash Chatbox: Live Chat Widget สำหรับเว็บไซต์ของคุณ

Notification สำหรับ Chat ใหม่ส่งไป Slack

แนะนำ Upstash Chatbox: Live Chat Widget สำหรับเว็บไซต์ของคุณ

Admins ตอบกลับได้

แนะนำ Upstash Chatbox: Live Chat Widget สำหรับเว็บไซต์ของคุณ

ดู Demo ได้ ที่นี่

สังเกตว่า Chat ID แสดงใน Console ให้จดไว้และไปที่ /chat/{id} เพื่อดู Admin Panel และการโต้ตอบของทั้งสอง Interface

1. สร้าง Database และ Environment Variables

ข้อมูลจะเก็บที่ Upstash Redis

สร้าง Redis Database ฟรีที่ Upstash Console

คัดลอก .env.local.example เป็น .env.local (Git จะ Ignore):

cp .env.local.example .env.local
  • UPSTASH_REDIS_REST_URL และ UPSTASH_REDIS_REST_TOKEN หาได้ที่หน้ารายละเอียด Database ใน Upstash Console
  • SLACK_WEBHOOK_URL หาได้ที่หน้า Slack Integration ใน https://api.slack.com/messaging/webhooks

2. ติดตั้ง Package

yarn add @upstash/chatbox

3. Import CSS และ Widget

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

Options ส่งผ่าน React Props ได้

KeyTypeDefault
themeColor?string#2d00c6
textColor?string#fff
title?stringHi 👋
description?stringAsk us anything, or share your feedback.
showOnInitial?booleanfalse
customIcon?React.ReactElement

4. Admin Dashboard

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

ยินดีด้วย!

ตอนนี้คุณมี Chatbox ของตัวเองสำหรับ Users แล้ว Enjoy!

ดู Source Code ได้ ที่นี่ และ NPM Package ที่นี่

เกี่ยวกับโปรเจกต์นี้หรือทั่วไป เรายินดีรับ Feedback และ Ideas หากต้องการให้ Feedback หรือความคิดเห็นเกี่ยวกับบริการของเรา ทำได้ทาง Twitter หรือ Discord