LogoLogo
NFTEmbedGravitonHelp
  • 🖼️NFT Embed
  • Intro
    • 🤔What is NFT Embed?
    • 🔢How to use NFT Embed
    • 🎛️Embed Features
    • ❓FAQs
  • Custom Styling
    • Using Custom Styles (CSS)
    • Fonts and Colors
      • Fonts
      • Colors
    • Spacing and Orientation
      • Padding
      • Margins
      • Alignments
    • Code Examples
      • Full Code with Comments
    • Tips for Customization
  • Details
    • ⚙️Features
      • 🧑‍⚖️Auctions
      • 🧑‍🎨Collections
      • 🤝Finders Fee
      • 🏪Marketplace
        • Collection Royalties
      • ⚛️React SDK
    • 🧰Implementations
      • 🔳SquareSpace
      • 🔡WebFlow
      • 🛍️Shopify
  • Resources
    • 🛠️Tools
    • 🙋Support
  • 📩Contact Us
  • 🧲Graviton
  • 🎨NFT Embed
Powered by GitBook
On this page
  • Embed URL Breakdown
  • Example of URL without Custom Styling (no/CSS)

Was this helpful?

  1. Custom Styling

Code Examples

PreviousAlignmentsNextFull Code with Comments

Last updated 2 years ago

Was this helpful?

Embed URL Breakdown

Here is how to identify the sections of the NFT Embed's URL.

  • tokenAddress= NFT smart contract address

  • tokenId= A unique number assigned to an NFT / Edition

  • saleSplitAddress= Optional Address for splitting payout from sale

  • saleSplitFee= Percentage of the sale split with another address

Example of URL without Custom Styling (no/CSS)

Your embed URL should look like the example below.

The embed will look different depending on the toggles you selected. 🧰

basic nft embed url
<https://nftembed.org/embed/nft?
saleSplitAddress=&
saleSplitFee=10&
showMarket=true&
tokenAddress=0xb932a70a57673d89f4acffbe830e8ed7f75fb9e0&
tokenId=17440>

Example of URL with Custom Styling (with/CSS)

If you select the custom styling, a unique string gets incorporated with the URL within the quotes.

The embed will look different depending on the selected toggles and the CSS variables. 🧰

nft embed + custom css
<https://nftembed.org/embed/nft?
saleSplitAddress=&
saleSplitFee=10&
showMarket=true&
style=eyAiZ2VuZXJhbCI6IHsgImNvbG9yIjogImJsYWNrIiwgImJhY2tncm91bmQiOiAibGluZWFyLWdyYWRpZW50KDE3MGRlZywgI2JjZWIwMCAxNS41NyUsICMwMGVhZWEgODQuODglKSIsICJib3JkZXJSYWRpdXMiOiAiMjBweCIsICJoZWlnaHQiOiAiMTAwJSIgfSwgIm1ldGFkYXRhIjogeyAiYmFja2dyb3VuZENvbG9yIjogImJsYWNrIiwgImZvbnRTaXplIjogIjEycHgiLCAiY29sb3IiOiAid2hpdGUiLCAibWFyZ2luIjogIjAuMnJlbSIsICJwYWRkaW5nIjogIjAuM3JlbSIsICJ0ZXh0QWxpZ24iOiAiY2VudGVyIiwgImJvcmRlciI6ICIxcHggc29saWQgd2hpdGUiLCAiYm9yZGVyUmFkaXVzIjogIjEwcHgiIH0sICJhc3NldCI6IHsgImJvcmRlclJhZGl1cyI6ICI3cHgiLCAicGFkZGluZyI6IjI1cHgiLCAiYm9yZGVyIjogIjFweCBzb2xpZCBibGFjayIgfSB9&
tokenAddress=0xb932a70a57673d89f4acffbe830e8ed7f75fb9e0&
tokenId=17440>