A customizable live chat widget for Next.js applications that can integrate with any backend API.
To install the package, run:
npm install next-live-chat-widget
# or
yarn add next-live-chat-widgetImport and use the LiveChatWidget in your Next.js application:
import { useEffect } from "react";
import LiveChatWidget from "next-live-chat-widget";
export default function MyApp({ Component, pageProps }) {
useEffect(() => {
// Initialize the chat widget
const chatWidget = new LiveChatWidget({
apiUrl: "https://your-api-url.com", // Replace with your backend URL
initialMessage: "How can I help you today?",
});
chatWidget.init();
// Clean up on unmount
return () => {
// No explicit cleanup needed - the widget will remain on the page
};
}, []);
return <Component {...pageProps} />;
}The LiveChatWidget constructor accepts an options object with the following properties:
| Option | Type | Default | Description |
|---|---|---|---|
apiUrl |
string | "http://localhost:8000" |
URL of your chat backend API |
apiKey |
string | undefined |
Optional API key for authentication |
collectionName |
string | undefined |
The indexed vector collection name |
containerId |
string | "live-chat-container" |
ID for the chat container element |
position |
string | "bottom-right" |
Position of the chat widget ("bottom-right" or "bottom-left") |
initialMessage |
string | "Hi there! How can I help you today?" |
Initial message from the assistant |
title |
string | "Live Chat" |
Title shown in the chat header |
theme |
object | See below | Styling options for the widget |
You can customize the appearance of the chat widget by providing a theme object:
const chatWidget = new LiveChatWidget({
theme: {
primaryColor: "#4f46e5", // Main color (button, headers)
secondaryColor: "#e5e7eb", // Secondary elements (borders)
textColor: "#111827", // Regular text color
assistantBgColor: "#f3f4f6", // Background for assistant messages
userBgColor: "#4f46e5", // Background for user messages
userTextColor: "#ffffff", // Text color for user messages
},
});The chat widget sends requests to your backend API at ${apiUrl}/api/chat with a POST request containing:
{
"messages": [
{ "role": "user", "content": "User's message" },
{ "role": "assistant", "content": "Previous response" },
...
]
}Your API should respond with:
{
"content": "Assistant's response",
"sources": [
{ "title": "Source Title", "url": "https://source-url.com" },
...
]
}The sources field is optional and will be displayed as links below the message if provided.
MIT