The `@integrate.team/react-chatbot` package provides two main components, `ChatsWebs` and `ChatIcons`, to help you easily integrate a chat interface into your project. You can customize colors, user and bot images, and more.
@integrate.team/react-chatbotThe @integrate.team/react-chatbot package provides two main components, ChatsWebs and ChatIcons, to help you easily integrate a chat interface into your project. You can customize colors, user and bot images, and more.
---
Install the package via npm:
npm install @integrate.team/react-chatbot
To use the components in your project, import them as follows:
import { ChatsWebs, ChatIcons } from '@integrate.team/react-chatbot';
This package includes two main components:
ChatsWebs: A component for displaying the chatbot in full-screen format.
ChatIcons: A component for displaying the chatbot icon in a popup format.
These components can be configured by passing the following props:
| Prop | Description |
| ----------------------- | ------------------------------------- |
| handleSubmit | Function to handle message submission |
| jwt | User authentication token (JWT) |
| URL_DOMAINS | An object containing various URLs related to the chatbot: ROOT_URL as the web path, SOCKET_URL as the domain of the chatbot server, and FEEDBACK_URL as the domain for calling the API to send feedback. |
| imgUrl | Image URL (icon for the chatbot) |
| imgUser | Avatar for the user |
| imgChatbot | Avatar for the chatbot |
| chatTextUserColor | Color for user message text |
| chatTextBotColor | Color for bot message text |
Hereβs an example of how to use these components:
import React from 'react';
import { ChatsWebs, ChatIcons } from '@integrate.team/react-chatbot';
function App() {
const handleSubmit = (message) => {
console.log("Message sent: ", message);
};
const URL_DOMAINS = {
ROOT_URL: "https://example.com",
SOCKET_URL: "https://your-chatbot-server.com",
FEEDBACK_URL: "https://example.com/feedback",
}
return (
export default App;
src
βββ components
β βββ ChatsWebs.jsx
β βββ ChatIcons.jsx
βββ globals.css
βββ index.js
If you have any questions or suggestions, please open an issue or submit a pull request.