Skip to main content

Verse Frame

Verse Frame is a JavaScript library that lets you embed Verse collections, artworks, and primary market sales directly into your website using iFrames.

What You Can Embed​

  • Collection pages — Full collection view with active sales, edition grids, and marketplace activity
  • Artwork pages — Individual artwork with sale UI, edition details, and purchase flow
  • Edition pages — Specific edition view with ownership and market data
  • Purchase flows — Complete buying experience including payment and minting

How It Works​

  1. You add the Verse Frame script (from the verse-embedded npm package) to your page
  2. Place <div> elements with verse-* attributes where you want content
  3. Initialize VerseEmbed — it finds the divs and creates iFrames
  4. The iFrames render Verse content with full interactivity
  5. Height auto-adjusts via postMessage communication

Quick Example​

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/verse-embedded@1.1.4/dist/verse-embedded.js"></script>
</head>
<body>
  <!-- This div will become a Verse collection embed -->
  <div verse-series-slug="fields-by-erik-swahn"></div>

  <script>
    const verseEmbed = new VerseEmbed({
      baseUrl: "https://iframe.verse.works"
    });
    verseEmbed.initialize();
  </script>
</body>
</html>

When to Use Frame vs. Elements​

FeatureVerse FrameVerse Elements
Integration effortMinimal (add script + div)Moderate (penpal setup)
UI customizationCSS overrides onlyBuild your own UI
Purchase flowBuilt-inBuild your own
Data accessDisplay onlyProgrammatic access
Best forEmbedding full pagesCustom integrations

Debugging​

For development and debugging, point the baseUrl to the sandbox iframe origin:

const verseEmbed = new VerseEmbed({
  baseUrl: "https://iframe.demo.verse.works"
});
verseEmbed.initialize();

If your integration also queries the GraphQL API, use the sandbox endpoint https://demo.verse.works/query.

See the Sandbox Environment guide for test accounts and Stripe test cards.

Requirements​

  • HTTPS required in production — Verse iFrames will not load on HTTP pages
  • Origin allowlist — Production (iframe.verse.works) requires your domain to be allowlisted by the Verse team (localhost:3000 is allowlisted by default). The sandbox (iframe.demo.verse.works) has no allowlisting requirement.

Next Steps​