Console

·

3 min read

Announcing Upstash Chatbox

Burak Yılmaz

Site Reliability Engineer @Upstash

What it is
User initiates conversation
A notification for the newly initiated chat goes to Slack
Admins can reply
1. Create Database and Environment Variables
2. Install Package
3. Import CSS and Widget
4. Admin Dashboard
5. Create API
Congratulations!

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
  • 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

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

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

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;

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.



© 2022 Upstash, Inc. Based in California.

* Redis is a trademark of Redis Labs Ltd. Any rights therein are reserved to Redis Ltd. Any use by Upstash is for referential purposes only and does not indicate any sponsorship, endorsement or affiliation between Redis and Upstash.

** Cloudflare, the Cloudflare logo, and Cloudflare Workers are trademarks and/or registered trademarks of Cloudflare, Inc. in the United States and other jurisdictions.