Giới thiệu Upstash Chatbox: Trò chuyện trực tiếp liền mạch cho trang web của bạn

Giao tiếp tức thì, tương tác là then chốt cho trải nghiệm người dùng thỏa mãn. Đây là lý do nhiều công ty cung cấp widget chatbox trực tiếp trên trang web của họ.

Đây là gì?

Đây là một widget chatbox, cùng với bảng điều khiển chat quản trị cho trang web, kết nối người dùng với nhà phát triển/quản trị. Cách này, giao tiếp tương tác giữa các bên có thể được thiết lập.

Dự án này sử dụng Next.js, cùng với Upstash Redis để lưu trữ.

Người dùng khởi tạo cuộc trò chuyện

Thông báo cho cuộc trò chuyện mới khởi tạo được gửi đến Slack

Quản trị viên có thể trả lời

Bạn có thể xem demo tại đây.

Lưu ý rằng chat id hiển thị trong console. Ghi lại điều đó và truy cập /chat/{id} để xem bảng điều khiển quản trị và cách cả hai giao diện tương tác với nhau.

1. Tạo cơ sở dữ liệu và biến môi trường

Dữ liệu sẽ được giữ tại Upstash Redis.

Tạo cơ sở dữ liệu Redis miễn phí tại Upstash Console

Sao chép file .env.local.example thành .env.local (sẽ bị Git bỏ qua):

cp .env.local.example .env.local

• UPSTASH_REDIS_REST_URL và UPSTASH_REDIS_REST_TOKEN có thể tìm thấy tại trang chi tiết cơ sở dữ liệu trong Upstash Console.
• SLACK_WEBHOOK_URL có thể tìm thấy tại trang tích hợp Slack trong https://api.slack.com/messaging/webhooks

2. Cài đặt gói

yarn add @upstash/chatbox

3. Import CSS và 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 (
        <>       
    );
}

Các tùy chọn có thể truyền dưới dạng React props

4. Bảng điều khiển quản trị

// 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. Tạo API

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

Chúc mừng!

Bây giờ bạn có chatbox riêng cho người dùng! Thưởng thức!

Bạn có thể xem mã nguồn tại đây và gói npm tại đây.

Về dự án này hoặc nói chung, chúng tôi rất trân trọng phản hồi và ý tưởng của bạn. Nếu bạn muốn đưa ra phản hồi hoặc suy nghĩ về dịch vụ của chúng tôi, bạn có thể làm như vậy qua twitter hoặc discord.