# Trouve Widget
A completely standalone, embeddable chat widget for any website.
## Features
- Fully standalone - includes all dependencies (React and ReactDOM)
- Easy to integrate with a single script tag
- Customizable appearance
- Works with any website, regardless of framework
- No dependencies on Next.js or any other framework
- Improved tooltip functionality that appears when the chat is closed
- Enhanced image display in messages
## Installation
### Via CDN
The simplest way to add the Trouve Widget to your website is by using the CDN version:
```html
```
### Via npm
If you prefer to install the widget via npm:
```bash
npm install trouve-widget
```
Then import it in your JavaScript:
```javascript
import TrouveWidget from 'trouve-widget';
```
## Usage
### Basic Usage
Add a container element to your HTML:
```html
```
Then initialize the widget:
```javascript
// Initialize the widget
TrouveWidget.loadWidget('#chat-widget-container');
```
### Custom Container
You can specify a custom container selector:
```javascript
// Use a custom container
TrouveWidget.loadWidget('#my-custom-container');
```
If the specified container doesn't exist, the widget will create one automatically.
## Example
Here's a complete example of integrating the widget:
```html
My Website with Trouve Widget
Welcome to My Website
```
## Error Handling
For better error handling, you can add more robust checks:
```javascript
window.onload = function() {
try {
// Check if the widget is loaded
if (!window.TrouveWidget) {
throw new Error("TrouveWidget not found. Make sure the script is loaded correctly.");
}
// Initialize the widget
TrouveWidget.loadWidget('#chat-widget-container');
} catch (error) {
console.error("Error initializing widget:", error);
}
};
```
## Development
### Building the widget
```bash
npm run build
```
This will create a production-ready widget in the `dist` directory.
### Testing locally
You can test the widget locally by running:
```bash
node server.js
```
Then open your browser to http://localhost:3000
## License
MIT