Upstash Chatbox 공개: 웹사이트에 실시간 채팅 위젯을 손쉽게 추가하는 방법

즉각적이고 상호작용 가능한 소통은 만족스러운 사용자 경험을 위해 매우 중요합니다. 그래서 많은 기업이 자사 웹사이트에 라이브 채팅 위젯을 배포하고 있습니다.

Upstash Chatbox란?

Upstash Chatbox는 웹사이트 방문자와 개발자·관리자를 연결해 주는 채팅 위젯과 관리자용 채팅 패널을 함께 제공하는 도구입니다. 이를 통해 사용자와 운영자 간의 실시간 양방향 소통 채널을 손쉽게 구축할 수 있습니다.

이 프로젝트는 Next.js를 기반으로 하며, 데이터 저장에는 Upstash Redis를 사용합니다.

사용자가 대화 시작하기

새로 시작된 채팅 알림이 Slack으로 전송됩니다

관리자가 답변할 수 있습니다

데모는 여기에서 확인할 수 있습니다.

콘솔에 채팅 ID가 출력되는 것을 확인하세요. 해당 ID를 메모한 뒤 /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 (
    <>
      <ChatBoxWidget />
      <Component {...pageProps} />
    </>
  );
}

위젯 옵션은 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 Page() {
  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 패키지는 여기에서 확인할 수 있습니다.

이 프로젝트뿐 아니라 전반적인 서비스에 대한 피드백과 아이디어를 보내주시면 큰 도움이 됩니다. 의견을 나누고 싶으시다면 Twitter 또는 Discord를 통해 알려주세요.