panda-chat-widget
v1.0.0
Published
A modern, highly customizable chat widget that can be integrated into any web platform. It is available in three formats: **Standalone HTML/JS**, **React (JSX)**, and **React (TypeScript/TSX)**.
Readme
Chatbox Widget Documentation
A modern, highly customizable chat widget that can be integrated into any web platform. It is available in three formats: Standalone HTML/JS, React (JSX), and React (TypeScript/TSX).
1. Standalone HTML/JavaScript Integration
Ideal for static websites, PHP, or CMS platforms like WordPress.
Installation
- Copy
chatbox-pop.jsandchatbox-pop.cssfrom thepublic/plane_HTML/folder to your project. - Include the CSS and JavaScript in your HTML file:
<!DOCTYPE html>
<html>
<head>
<!-- 1. Include Stylesheet -->
<link rel="stylesheet" href="chatbox-pop.css">
</head>
<body>
<!-- 2. Widget Container -->
<div id="chatboxpop"></div>
<!-- 3. Configuration (Optional) -->
<script>
window.CHAT_WIDGET_CONFIG = {
title: "Support Chat",
subtitle: "Online",
welcomeMessage: "Hi! How can we help?",
theme: {
primary: "#4f46e5",
headerText: "#ffffff"
}
};
</script>
<!-- 4. Include Script -->
<script src="chatbox-pop.js"></script>
</body>
</html>2. React (JSX) Integration
Use this in standard React projects.
Installation
- Move
ChatWidget.jsxandchatbox-pop.cssinto yoursrc/components/directory. - Ensure
axiosis installed:npm install axios.
Usage
import ChatWidget from './components/ChatWidget';
function App() {
const config = {
title: 'Customer Support',
welcomeMessage: 'How can we assist you today?',
theme: {
primary: '#4f46e5',
userBubble: '#4f46e5'
}
};
return (
<div>
<h1>My Website</h1>
<ChatWidget config={config} />
</div>
);
}3. React (TSX) Integration
Best for TypeScript-based React projects for full type safety.
Installation
- Move
ChatWidget.tsxandchatbox-pop.cssinto yoursrc/components/directory. - Install dependencies:
npm install axios.
Usage
import ChatWidget from './components/ChatWidget';
const config = {
title: 'Support',
theme: {
primary: '#0ea5e9'
}
};
const App = () => {
return (
<div className="app">
<ChatWidget config={config} />
</div>
);
};4. Configuration Options
The widget accepts a config object (or window.CHAT_WIDGET_CONFIG for HTML) with the following properties:
| Property | Type | Description |
| :--- | :--- | :--- |
| title | string | The main header title (e.g., "Support"). |
| subtitle | string | The text below the title (e.g., "Online"). |
| welcomeMessage| string | The first message shown by the bot. |
| theme | object | Detailed styling options (see below). |
Theme Customization
You can control every aspect of the design via the theme object:
theme: {
primary: '#4f46e5', // Background of header/launcher
headerText: '#ffffff', // Text color in header
bg: '#ffffff', // Main window background
userBubble: '#4f46e5', // User message bubble color
userText: '#ffffff', // User message text color
botBubble: '#f3f4f6', // Bot message bubble color
botText: '#1f2937', // Bot message text color
statusOnline: '#10b981' // Color of the "Online" dot
}5. API Integration
By default, the widget works in Simulated Mode (automatic random replies).
To connect a live API:
- Open the widget file (
ChatWidget.tsx,ChatWidget.jsx, orchatbox-pop.js). - Search for the
// FUTURE API INTEGRATIONcomment. - Uncomment the
axios(orfetch) block and replace the placeholder URL with your backend endpoint.
React Example (Axios):
const response = await axios.post('your-api-url', {
message: userMessage,
sessionId: 'unique-id'
});
const botReply = response.data.reply;6. Project Structure
public/plane_HTML/: Standalone version (JS/CSS/HTML).src/ChatWidget.tsx/ChatWidget.jsx: React component versions.src/chatbox-pop.css: Shared styling for the React widget.