nostr-zap-view

View any nostr zaps from anywhere, supporting npub, nprofile, note, and nevent identifiers.

Usage

Readme

Zap any user and view the zap

Zap any note and view the zap

Button design example

Show code 

<div>
  <div style="display: inline-flex; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
    <button style="
        background: #4B5563;
        border: none;
        border-right: 1px solid rgba(255, 255, 255, 0.15);
        color: #FFFFFF;
        padding: 8px 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        letter-spacing: 1px;
        min-width: 60px;
        height: 32px;
        -webkit-tap-highlight-color: transparent;
      " data-npub="npub1..." 
      data-note-id="note1..." 
      data-relays="wss://relay.nostr.band,wss://relay.damus.io,wss://nos.lol,wss://nostr.bitcoiner.social,wss://relay.nostr.wirednet.jp,wss://yabu.me">
      Zap
    </button>
    <button style="
        background: #4B5563;
        border: none;
        border-left: 1px solid rgba(255, 255, 255, 0.15);
        color: #FFFFFF;
        padding: 8px 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        letter-spacing: 1px;
        min-width: 60px;
        height: 32px;
        -webkit-tap-highlight-color: transparent;
      " data-title="" 
      data-nzv-id="nevent1..." 
      data-zap-color-mode="true" 
      data-relay-urls="wss://relay.nostr.band,wss://relay.damus.io,wss://nos.lol,wss://nostr.bitcoiner.social,wss://relay.nostr.wirednet.jp,wss://yabu.me">
      View
    </button>
  </div>
</div>
Show code 

<button style="
    background: #4b5563;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 6px;
    color: #ffffff;
    padding: 0 10px;
    gap: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 1px;
    min-width: 60px;
    height: 32px;
    -webkit-tap-highlight-color: transparent
  " data-npub="npub1..."
  data-note-id="note1..."
  data-relays="wss://relay.nostr.band,wss://relay.damus.io,wss://nos.lol,wss://nostr.bitcoiner.social,wss://relay.nostr.wirednet.jp,wss://yabu.me">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    height="22px"
    viewBox="0 -960 960 960"
    width="22px"
    fill="#e8eaed">
      <path d="m422-232 207-248H469l29-227-185 267h139l-30 208ZM320-80l40-280H160l360-520h80l-40 320h240L400-80h-80Zm151-390Z"/>
  </svg>
  Sponsor
</button>
Show code 

<button style="
    background: #4b5563;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 6px;
    color: #ffffff;
    padding: 0 10px;
    gap: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 1px;
    min-width: 60px;
    height: 32px;
    -webkit-tap-highlight-color: transparent
  " data-title=""
  data-nzv-id="nevent1..."
  data-zap-color-mode="true"
  data-relay-urls="wss://relay.nostr.band,wss://relay.damus.io,wss://nos.lol,wss://nostr.bitcoiner.social,wss://relay.nostr.wirednet.jp,wss://yabu.me">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    height="24px"
    viewBox="0 -960 960 960"
    width="24px"
    fill="#e8eaed">
      <path d="M320-280q17 0 28.5-11.5T360-320q0-17-11.5-28.5T320-360q-17 0-28.5 11.5T280-320q0 17 11.5 28.5T320-280Zm0-160q17 0 28.5-11.5T360-480q0-17-11.5-28.5T320-520q-17 0-28.5 11.5T280-480q0 17 11.5 28.5T320-440Zm0-160q17 0 28.5-11.5T360-640q0-17-11.5-28.5T320-680q-17 0-28.5 11.5T280-640q0 17 11.5 28.5T320-600Zm120 320h240v-80H440v80Zm0-160h240v-80H440v80Zm0-160h240v-80H440v80ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z"/>
  </svg>
  View Sponsors
</button>

Add this script tag right before the bottom closing body tag.

Show code 


<script src="https://cdn.jsdelivr.net/npm/nostr-zap@1.1"></script>
<script src="https://cdn.jsdelivr.net/npm/nostr-zap-view@1"></script>

Related Repository

SamSamskies / nostr-zap: github