Skip to content

Repository files navigation

window.nostr.js

a small <script> you can drop in any page that already uses NIP-07 and make it also work with NIP-46 automatically when the user doesn't have an extension installed.

It adds a small floating button on the side of the window that users can use to create Nostr accuonts or connect to their NIP-46 bunkers.

How to use it

Include <script src="https://cdn.jsdelivr.net/npm/window.nostr.js/dist/window.nostr.min.js"></script> in your HTML and proceed to use window.nostr normally.

Customization

The script supports optional data-* attributes on the <script> tag to personalize the design:

<script src="https://cdn.jsdelivr.net/npm/window.nostr.js/dist/window.nostr.min.js"
  data-accent="green"
  data-position="bottom"
  data-compact-mode
  data-relays='["wss://bucket.coracle.social","wss://relay.nsec.app"]'
  data-app-name='example app
  data-app-image='https://example.com/logo.png'
  data-pomegranate-central-url="https://auth.njump.me"
  data-pomegranate-operators='["https://po.f7z.io","https://po.njump.me","https://po.nostrver.se","https://po.coracle.social","https://po.jumble.social"]'
  data-pomegranate-threshold="2"
></script>
Attribute Description
data-accent Accent color: cyan (default), green, purple, red, orange, neutral, stone
data-position Widget position: bottom (default is top)
data-start-hidden Hide minimized widget until user connects (for pages with custom login buttons)
data-compact-mode Show minimized widget in compact form
data-dof Disable automatic overflow fix on mobile
data-relays JSON array of relay URLs for QR code login
data-app-name Name of the current page that is sent to bunker signers, defaults to the page hostname
data-app-image Logo of the current app that is sent to bunker signers, defaults to the page favicon
data-app-url Defaults to the current URL (cleaned), if specified must belong to the current domain
data-pomegranate-central-url Pomegranate central auth URL
data-pomegranate-operators JSON array of pomegranate operator URLs
data-pomegranate-threshold Pomegranate threshold (number of operators needed)

Bookmarklet

If a website has opted to not include this, but you like it, you can still use it on the website. Just add this to your browser bookmarks and click on it to load the widget on any website:

javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('src','https://cdn.jsdelivr.net/npm/window.nostr.js/dist/window.nostr.min.js');document.body.appendChild(e)})())

Demo videos

ef9d1de166731e45a542405d2f721d802f063ea32946e2c955b3182625994900.mp4
2b5ad2df2a40b1f4315f7ae8a141ae6424058eb30a4cc92362c0a3d3dd13731d.mp4

About

drop-in <script> that adds seamless NIP-46 support to apps that rely on window.nostr

Topics

Resources

Stars

45 stars

Watchers

3 watching

Forks

Releases

Used by

Contributors

Languages