trouve-widget
TypeScript icon, indicating that this package has built-in type declarations

1.0.103 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i trouve-widget

Weekly Downloads

9

Version

1.0.103

License

none

Unpacked Size

6.79 MB

Total Files

338

Last publish

Collaborators

  • trouve