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/your-username/nostr-web-chat-plugin.git
   

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

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

   The server will start at http://localhost:5173.

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

   <div id="nostr-chat"></div>
   <script type="module" src="https://cdn.jsdelivr.net/npm/@nostrweb/chat-plugin@1.0.0/lib/index.js"></script>
   <script>
     const chat = new NostrChat({ target: '#nostr-chat', relay: 'wss://nostr.oxal.org' });
   </script>
   

   • #nostr-chat is the DOM element that will contain the widget.
   • Replace relay with your preferred Nostr relay if you wish.

4. Open your page in any browser. The chat widget should load automatically and allow users to send/receive messages.

How It Works

• The demo runs a lightweight Vite development server that bundles the widget.
• The widget itself is distributed via CDN in the example snippet.
• No additional build steps are required for using the widget – just drop the HTML snippet in.

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.