A completely standalone, embeddable chat widget for any website.
- 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
The simplest way to add the Trouve Widget to your website is by using the CDN version:
<!-- Add this to your HTML -->
<script src="https://cdn.jsdelivr.net/npm/trouve-widget@latest/dist/widget.js"></script>
If you prefer to install the widget via npm:
npm install trouve-widget
Then import it in your JavaScript:
import TrouveWidget from 'trouve-widget';
Add a container element to your HTML:
<div id="chat-widget-container"></div>
Then initialize the widget:
// Initialize the widget
TrouveWidget.loadWidget('#chat-widget-container');
You can specify a custom container selector:
// Use a custom container
TrouveWidget.loadWidget('#my-custom-container');
If the specified container doesn't exist, the widget will create one automatically.
Here's a complete example of integrating the widget:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website with Trouve Widget</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<!-- Widget container -->
<div id="chat-widget-container"></div>
<!-- Load the widget script -->
<script src="https://cdn.jsdelivr.net/npm/trouve-widget@latest/dist/widget.js"></script>
<!-- Initialize the widget -->
<script>
window.onload = function() {
try {
// Initialize the widget
TrouveWidget.loadWidget('#chat-widget-container');
} catch (error) {
console.error("Error initializing widget:", error);
}
};
</script>
</body>
</html>
For better error handling, you can add more robust checks:
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);
}
};
npm run build
This will create a production-ready widget in the dist
directory.
You can test the widget locally by running:
node server.js
Then open your browser to http://localhost:3000
MIT