·3 min read

Announcing Upstash Chatbox

Burak YılmazBurak YılmazSite Reliability Engineer @Upstash

Instant, interactive communication is crucial for satisfactory user experience. This is why many companies provide a live chatbox widget on their websites.

What it is

This is a chatbox widget, alongside with admin chat panel for websites, connecting users with developers/admins. This way, an interactive communication between peers can be established.

This project uses Next.js, alongside Upstash Redis for storage.

User initiates conversation

customer-widget

A notification for the newly initiated chat goes to Slack

slack_notification

Admins can reply

admin_pannel

You can see the demo here.

Notice that chat id is shown in the console. Note that and go to /chat/{id} to see the admin panel and how both interfaces interact with each other.

1. Create Database and Environment Variables

The data will be kept at Upstash Redis.

Create a free Redis database at Upstash Console

Copy the .env.local.example file to .env.local (which will be ignored by Git):

cp .env.local.example .env.local
cp .env.local.example .env.local
  • UPSTASH_REDIS_REST_URL and UPSTASH_REDIS_REST_TOKEN can be found at the database details page in Upstash Console.
  • SLACK_WEBHOOK_URL can be found at the Slack integration page in https://api.slack.com/messaging/webhooks

2. Install Package

yarn add @upstash/chatbox
yarn add @upstash/chatbox

3. Import CSS and 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} />
    </>
  );
}
// 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} />
    </>
  );
}

The options can be passed as 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 />;
}
// 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. Create API

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

Congratulations!

Now you have your own chatbox for users! Enjoy!

You can see the source code here and npm package here.

About this project or in general, we highly appreciate your feedbacks and ideas. If you want to give any feedback or thoughts on our services, you can do so via twitter or discord.