75 lines
2.6 KiB
Markdown
75 lines
2.6 KiB
Markdown
# 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**
|
||
```bash
|
||
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)
|
||
```bash
|
||
cd nostr-web-chat-plugin
|
||
npm install
|
||
npm run dev
|
||
```
|
||
The server will start the demo at [http://localhost:4000](http://localhost:4000/demo).
|
||
|
||
## Website Embed (Node.js)
|
||
|
||
|
||
2. **Start the demo server (Python)** (works on macOS, Linux, Windows – Node 18+ is required)
|
||
```bash
|
||
python3 -m http.server 8000
|
||
```
|
||
|
||
The server will start the demo at [http://localhost:4000](http://localhost:4000/demo).
|
||
|
||
|
||
1. **copy chat.JS to your web project**
|
||
|
||
/src/chat.js move to website /src folder
|
||
|
||
2. **Copy the widget snippet** – add this to the place in your HTML where you want the chat box to appear:
|
||
|
||
```html
|
||
<!-- Add the chat widget node-->
|
||
<script type="module" src="../src/chat.js"></script>
|
||
|
||
<!-- Add chat widget container -->
|
||
<div id="chat-widget-root"></div>
|
||
```
|
||
2. **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
|
||
```
|
||
|
||
4. **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](LICENSE) for details.
|