trouve-widget

v1.0.103

Published

10 months ago

A completely standalone embeddable chat widget

0High
0Medium
0Low

trouve

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:

<!-- Add this to your HTML -->
<script src="https://cdn.jsdelivr.net/npm/trouve-widget@latest/dist/widget.js"></script>

Via npm

If you prefer to install the widget via npm:

npm install trouve-widget

Then import it in your JavaScript:

import TrouveWidget from 'trouve-widget';

Usage

Basic Usage

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');

Custom 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.

Example

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>

Error Handling

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);
    }
};

Development

Building the widget

npm run build

This will create a production-ready widget in the dist directory.

Testing locally

You can test the widget locally by running:

node server.js

Then open your browser to http://localhost:3000

License

MIT