Upstashチャットボックスの発表：Next.jsサイトにライブチャットを簡単導入

リアルタイムでインタラクティブなコミュニケーションは、優れたユーザー体験を実現するうえで不可欠です。だからこそ、多くの企業が自社のWebサイトにライブチャットウィジェットを設置しています。

Upstashチャットボックスとは

これはWebサイト向けのチャットボックスウィジェットと管理用チャットパネルをセットにしたツールで、ユーザーと開発者・管理者をつなぎます。これにより、双方向のインタラクティブなコミュニケーションを簡単に実現できます。

本プロジェクトはNext.jsで構築されており、データの保存にはUpstash Redisを使用しています。

ユーザーが会話を開始

新規チャットの通知がSlackに届く

管理者が返信できる

デモはこちらからご覧いただけます。

コンソールに表示されるチャット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 () {
  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からお寄せいただけます。