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:
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.localMONGODB_URLcan be found when you Connect to Cluster in MongoDB Atlas.MONGODB_DBis the name of the database you created in MongoDB Atlas.MONGODB_COLLECTIONis the name of the collection you created in MongoDB Atlas.SLACK_WEBHOOK_URLcan be found at the Slack integration page in https://api.slack.com/messaging/webhooks
yarn add @drivly/chatbox// 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
}// 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 AdminPageThe 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 |
// 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
}