Nostr Web Chat Plugin Demo

This repository contains a lightweight demo that shows how to embed a Nostr chat widget into your own website. The goal is to let visitors start a conversation with no setup – simply paste the snippet below into your site.

Quick‑Start

1. Clone the repository

   git clone https://github.com/btcforplebs/nostr-web-chat-plugin.git
   

2. Start the demo server (NPM) (works on macOS, Linux, Windows – Node 18+ is required)

   cd nostr-web-chat-plugin
   npm install
   npm run dev
   

   The server will start the demo at http://localhost:4000.

   Website Embed (Node.js)

3. Start the demo server (Python) (works on macOS, Linux, Windows – Node 18+ is required)

    python3 -m http.server 8000
   

   The server will start the demo at http://localhost:4000.

4. copy chat.JS to your web project

   /src/chat.js move to website /src folder

5. Copy the widget snippet – add this to the place in your HTML where you want the chat box to appear:

   <!-- Add the chat widget node-->
        <script type="module" src="../src/chat.js"></script>
   
   <!-- Add chat widget container -->
         <div id="chat-widget-root"></div>
   

6. Update the CSteam npub – this will be the npub where you will receive messages

   sudo nano /chat.js
   

   Put your Npub (hex format)

   csPubkey: 'PUBKEY_TO_RECEICE_MESSAGES' // Replace with actual pubkey
   

7. Open your page in any browser. The chat widget should load automatically and allow users to send/receive messages via nostr with ephemrial keys stored in the users cashe.

How It Works

• The demo runs a lightweight Vite development server that bundles the widget.
• No additional build steps are required for using the widget – just drop the JS and HTML snippet - update the CSteam npub (hex format) and start receiving nostr messages through your website.

Common Issues

Issue	Fix
Browser blocks mixed‑content (HTTP vs HTTPS)	Serve your page over HTTPS or host the widget on HTTP only while in dev.
Relay is unreachable	Ensure the relay URL is correct and that it supports WebSocket connections.
Styling conflict	The widget uses scoped CSS; if you override global styles that affect form elements, the widget may break.

Contributing

Feel free to open issues or pull requests. If you add a new relay or feature, remember to update the example snippet accordingly.

License

MIT LICENSE. See LICENSE for details.