Skip to content

Latest commit

 

History

History
154 lines (119 loc) · 4.97 KB

README.md

File metadata and controls

154 lines (119 loc) · 4.97 KB
Raw

ChatBox Widget for Next.js 14 Apps (App Router)

Create a ChatBox Widget (like Intercom live chat) for your Next.js app. Nothing to maintain, it is completely serverless. When your website's visitor starts a session, the chat link is sent to your Slack channel via a webhook. All chats are stored in a MongoDB database.

Here the steps:

1. Create MongoDB Database

We will use MongoDB to keep the data as well as messaging.

Create a free MongoDB database at MongoDB Atlas Also, create a App in App Services and cpy your APP ID.

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

cp .env.local.example .env.local
  • MONGODB_URL can be found when you Connect to Cluster in MongoDB Atlas.
  • MONGODB_DB is the name of the database you created in MongoDB Atlas.
  • MONGODB_COLLECTION is the name of the collection you created in MongoDB Atlas.
  • SLACK_WEBHOOK_URL can be found at the Slack integration page in https://api.slack.com/messaging/webhooks

2. Install Package

yarn add @drivly/chatbox

3. Import CSS and Widget

// app/layout.tsx

import '@drivly/chatbox/style.css'
import dynamic from 'next/dynamic'
import ChatBox from '@drivly/chatbox'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang='en'>
      <body>
        <main>
          {children}
          <ChatBox />
        </main>
      </body>
    </html>
  )
}

The options can be passed as React props

key type default
autoMessage? string
customIcon? React.ReactElement
description? string Ask us anything, or share your feedback.
showOnInitial? boolean false
siteUrl? string https://browse.driv.ly
themeColor? string #2d00c6
textColor? string #fff
title? string Hi 👋
track? (_eventType: string, _customAttributes: object, _overrides?: object) => void
user? ChatUser authenticated chat user
userLocation? string Miami, Fl 
export type ChatUser = {
  name: string
  firstName: string
  image: string
  email: string
  userId: string
}

4. Admin Dashboard

// app/chat/[id]/page.tsx

import dynamic from 'next/dynamic'
const ChatBoxAdmin = dynamic(() => import('@drivly/chatbox/admin'), {
  ssr: false,
})

const AdminPage = async ({ params }: { params: { id: string } }) => {
  return (
    <div>
      <ChatBoxAdmin params={params} />
    </div>
  )
}

export default AdminPage

The options can be passed as React props

key type default
className? string
params object id: Chat ID.
themeColor? string #2d00c6
textColor? string #fff
user? ChatUser authenticated admin user

5. Create API

// app/api/chatbox/[...chatbox]/route.ts

import createChatApi from '@drivly/chatbox/api'

const chatApi = createChatApi({
  db: process.env.MONGODB_DB,
  collection: process.env.MONGODB_COLLECTION,
  webhooks: [process.env.SLACK_WEBHOOK_URL!],
})

export { chatApi as GET, chatApi as POST }

The options for the API are:

type ChatApiOptions = {
  db?: string
  collection?: string
  webhooks: string[]
}

interface IChatCollection {
  _id: ObjectId
  chatId: string
  chatData: ChatMessage[]
}

type ChatMessage = {
  content: string
  createdAt: number
  name: string
  picture?: string
  email: string
  location: string
  userId?: string
}