A customizable React chat component for integrating chat functionality into your applications as a global chat widget. This component is exclusively for use within TabTree family products powered by TabTree Software Solutions.
PLEASE NOTE: This widget can only be used in TabTree family products powered by TabTree Software Solutions. Use in any other applications is prohibited by the license terms.
npm install @tabtree/workchatAdd the Workchat component to your main application layout to make it globally accessible throughout your app. The component will appear as a chat button in the bottom right corner of the screen that users can click to open the chat interface.
import { Workchat } from '@tabtree/workchat';
import '@tabtree/workchat/dist/index.css';
function App() {
return (
<>
{/* Your main application components */}
<div className="app-container">
<main>
{/* Your application content */}
</main>
</div>
{/* Add Workchat component at the bottom level */}
<Workchat
color="#1a2c5b"
noOfChat={1}
senderContainerColor="#008293"
senderTextColor="#fff"
receiverContainerColor="#000"
receiverTextColor="#fff"
sendButtonColor="#008293"
chatWidth="300px"
chatHeight="400px"
cognitoUserId="id"
email="mail"
/>
</>
);
}
export default App;| Prop | Type | Description | Default | Required |
|---|---|---|---|---|
cognitoUserId |
string | AWS Cognito user ID for authentication | N/A | YES |
email |
string | User's email address | N/A | YES |
color |
string | Main theme color for the chat component | "#1a2c5b" |
No |
noOfChat |
number | Number of chat instances to display | 1 |
No |
senderContainerColor |
string | Background color of the sender's message bubbles | "#008293" |
No |
senderTextColor |
string | Text color of the sender's messages | "#fff" |
No |
receiverContainerColor |
string | Background color of the receiver's message bubbles | "#000" |
No |
receiverTextColor |
string | Text color of the receiver's messages | "#fff" |
No |
sendButtonColor |
string | Color of the send button | "#008293" |
No |
chatWidth |
string | Width of the chat component when expanded | "300px" |
No |
chatHeight |
string | Height of the chat component when expanded | "400px" |
No |
The Workchat component is designed to be added at the bottom of your application layout to provide a persistent chat experience across all pages. When implemented:
- A chat button will appear in the bottom-right corner of the viewport
- Users can click the button to expand the chat interface
- The chat stays in place as users navigate through different parts of your application
- The interface can be collapsed when not in use
This implementation follows common patterns for customer support or team collaboration widgets, allowing users to access chat functionality without disrupting their current workflow.
You can customize the appearance of the chat component by adjusting the props. The component supports custom colors for different elements, as well as sizing options.
<Workchat
color="#0047AB" // Royal blue for theme color
noOfChat={1}
senderContainerColor="#4682B4" // Steel blue for sender messages
senderTextColor="#FFFFFF" // White text for sender
receiverContainerColor="#2F4F4F" // Dark slate gray for receiver
receiverTextColor="#F0F8FF" // Alice blue text for receiver
sendButtonColor="#1E90FF" // Dodger blue for send button
chatWidth="350px" // Wider chat window
chatHeight="500px" // Taller chat window
cognitoUserId="user123"
email="user@example.com"
/>For applications with multiple routes or pages, add the Workchat component to your root layout component to ensure it persists across all routes:
// In your App.js or root layout component
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Workchat } from '@tabtree/workchat';
import '@tabtree/workchat/dist/index.css';
import Home from './pages/Home';
import Profile from './pages/Profile';
function App() {
return (
<BrowserRouter>
<div className="app-container">
<header className="app-header">
<div className="logo">AM Chat</div>
<nav>
<a href="/">Home</a>
<a href="/profile">Profile</a>
</nav>
</header>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/profile" element={<Profile />} />
</Routes>
</div>
{/* Workchat component added outside of route structure */}
<Workchat
color="#1a2c5b"
noOfChat={1}
senderContainerColor="#008293"
senderTextColor="#fff"
receiverContainerColor="#000"
receiverTextColor="#fff"
sendButtonColor="#008293"
chatWidth="300px"
chatHeight="400px"
cognitoUserId="id"
email="mail"
/>
</BrowserRouter>
);
}
export default App;
## Authentication
**REQUIRED PARAMETERS**
The following parameters are mandatory for the component to function:
- `cognitoUserId`: The user's Cognito ID - **REQUIRED**
- `email`: The user's email address - **REQUIRED**
These credentials are essential for the chat functionality and must be provided in every implementation. The component will not work without valid credentials.
```jsx
// Example of required authentication parameters
<Workchat
cognitoUserId="id" // REQUIRED - Must be a valid Cognito User ID
email="mail" // REQUIRED - Must be a valid email address
// Other optional styling parameters
/>The authentication is handled through AWS Cognito and is configured specifically for TabTree applications. The authentication parameters must correspond to valid TabTree user accounts.
The chat widget is designed to be minimally intrusive when not in use. When collapsed, it appears as a small button in the bottom-right corner of the viewport, similar to the screenshot provided. This ensures it doesn't interfere with the main content of your application while remaining easily accessible to users.
Proprietary - TabTree Software Solutions
This component is licensed exclusively for use within TabTree family products. Any use outside of authorized TabTree applications is strictly prohibited. This component may not be modified, redistributed, or used in any application not explicitly authorized by TabTree Software Solutions.
For issues or feature requests, please contact TabTree Software Solutions support. Internal TabTree teams can file issues through the company's internal issue tracking system.