# NFT Embed
Embed an NFT widget with marketplace functionality and wallet connection out of the box
Hey, there! 👋
> *Are you looking for an all-in-one solution to transact, display or promote NFTs?*
>
> *Do you want to learn what the fuss is all about?*
Well, look no further!
{% embed url="" %}
Sell NFTs From Your Website in 5 Minutes (Free & No Code NFT Embed Solution)
{% endembed %}
Facilitate the transaction of NFTs with any webpage on the internet!
# What is NFT Embed?
Our widget allows you to display and even list your NFTs on any website that supports iFrame.
> [Drop in any ERC-721 or ERC-1155 token address and ID, copy the embed text, and paste into WordPress, Webflow, Shopify, etc. and voila!](https://twitter.com/illestrater_/status/1552293965746999297)
>
> [*You can now promote sales on your own website with no need to code anything*](https://twitter.com/illestrater_/status/1552293965746999297)*.*\
> \
> [Tim Kang - illestrater](https://twitter.com/illestrater_)
So as an artist, news publication, or independent blogger, you can start taking advantage of the benefits of Web3 quickly and with style! 🧑🎨
{% hint style="success" %}
The official url is: [**nftembed.org**](https://nftembed.org)
{% endhint %}
NFT Embed is brought to you by:
* Provided by: [Graviton](https://www.graviton.xyz/)
* Powered by: [Universe](https://universe.xyz)
* Created by: [Tim Kang— illestrater](https://twitter.com/illestrater_)
* Designed by: [Dima Dutka](https://twitter.com/dimadutka)
* Contributors: Universe & Graviton team + [Limechain](https://twitter.com/LimeChainHQ)
# How to use NFT Embed
First, navigate to the official URL [**here**](https://nftembed.org)!
To embed a single NFT, enter the NFT contract address and then the tokenID of the specific NFT you have in mind.
Alternatively, to embed an entire collection, simply click the `collection` toggle on the [NFT Embed page](https://www.nftembed.org/collection/0xb932a70A57673d89f4acfFBE830E8ed7f75Fb9e0/), enter the collection address you want to feature, and you're good to go!
{% hint style="info" %}
* NFTs with multiple editions have tokenIDs — It's unique to an NFT (ERC-721)
* Other than owned addresses, we deploy and interact with smart contracts on blockchains, known as contract addresses.
{% endhint %}
Optionally, you can add a '**Finders fee address**' and a percentage. This address will earn a portion of the sale. However, it won't circumnavigate the creator! All parties will get what they're entitled to.
You don't need to worry about NFT Embed being used to avoid paying creators their fair share. 💜
There are a few toggles:
* **Marketplace**
* Enabling the marketplace toggle allows you to turn the embed from a display to a potential sale! With the help of the Universe protocol, you can embed NFTs that anyone can purchase.
* **Vertical Card Layout**
* Enabling the vertical card layout allows you to make a more compacted embed that you navigate via scroll. The alternative is the default style, a horizontal card layout, which makes NFTs display laterally!
* **Custom Style**
* Enabling the custom style allows you to alter the CSS to compliment your website and/or branding with the embed; for those who want a fluid, eye-popping design.
# Embed Features
* [Custom Styling](/custom-styling/using-custom-styles-css): Match the aesthetic of any webpage
* [Marketplace](/details/features/marketplace): From a display to a potential sale
* [Finders fee](/details/features/finders-fee): Earn rewards from every sale
* [Auctions](/details/features/auctions): Host auctions within your widget
* [React SDK](/details/features/react-sdk): Build your own components with our APIs
* [Full Marketplace](/details/features/collections): Create curated marketplaces with little code
# FAQs
Have a question about NFT Embed?
Below are the most frequently asked questions. 🙂
Do all NFTs automatically work with the embed?
Most NFTs should work with NFT embed, granted they follow ERC standards/EVM compatible, and our infrastructure supports it.
However, it may take a little while for recently minted NFTs to appear in some rare cases. And this is because it likely needs to propagate around distributed file systems and may take time to appear.
Do I need to be a coder to use NFT embed?
Not really! You do have to be motivated and willing to push a few buttons.
The most important button is ‘**Copy,**’ and it’s as simple as one-left-click.
*Clicking the **Copy** button pastes the embed code to your clipboard.* 🧰
NFT Embed was designed to be as straightforward as possible so that anyone, even non-coders, can take advantage of the power of NFTs.
Does NFT Embed cost money?
Nope. NFT Embed is entirely free to use!
Sales conducted through an embedded NFT get powered by the [**Universe XYZ**](https://universe.xyz) protocol— namely, the marketplace contracts.
*The **UniverseDAO** earns a small (0.3%) fee. And although the tool is free, NFTs and network fees typically are not.*
Does the embed use CSS or HTML?
The NFT Embed can get plugged into any website, dev platform or framework that supports iFrame.
Notable support includes;
* [Shopify](/details/implementations/shopify)
* [Squarespace](/details/implementations/squarespace)
* [Webflow](/details/implementations/webflow)
* WordPress sites
Our NFT embed allows you to instantly alter the CSS— *creating a custom style*. And all dominant web browsers support HTML and CSS rendering. As a result, you'll find that a diverse and complex array of styling options exist for you to use. ([**Learn more**](/custom-styling/using-custom-styles-css))
URL auto embeds and a [**React SDK framework**](/details/features/react-sdk) is in our sights, allowing faster manipulation and more options for embedding NFTs.
How do finders fee work?
Offers or listings accepted through your embedded NFT can payout a finders fee that can be defined using the configuration. \
\
This enables joint marketing efforts through publications and websites to promote a sale!
To learn more about finders fees, [***click here***](/details/features/finders-fee)!
How do I display NFTs with the embed widget?
It's as straightforward as entering the contract address and tokenID; if you want to display individual NFTs.
Toggle the settings you'd like to see reflected in the embed. For example, either converting from a simple display to a mini-marketplace. You can customize the embed's styling to vibe alongside your website's aesthetic. 🧘
You can always check a quick preview of the NFT. The embed will get presented in a '**full view**' fashion. First, click on the link between the **quotes** on the embed widget.
For more information about URLs and NFT Embed, [***click here***](/custom-styling/code-examples#example-of-url-without-custom-styling-no-css).
How do I customize the embed?
The embed widget supports CSS and therefore is highly customizable. It may seem daunting. However, we've made the embed concise and easy to navigate.
Here are some resources to inspire and help you learn about CSS and HTML. In addition, they should assist you in understanding how to customize the embed for yourself.
* [Hey Design: Intro to design systems](https://heydesign.systems/)
* [Josh Comeau CSS Tutorials](https://www.joshwcomeau.com/tutorials/css/)
* [CSS Layout](https://csslayout.io/)
* [My Color Space](https://mycolor.space/)
* [CSS Gradient](https://cssgradient.io/)
* [CSS Design Awards](https://cssdesignawards.com/)
You can also [***click here***](/custom-styling/using-custom-styles-css) to learn some quick tips and ideas for customizing the NFT embed to your specifications!
How do I set royalties for collections?
NFT sales using NFTEmbed reference the '[**Royalty Registry**](https://royaltyregistry.xyz/lookup)' contracts. Even if a contract already has royalties set, you should use our tool to ensure royalties get enforced with the Universe XYZ contracts.
We developed a tool to set royalties for collections that you own quickly— when royalties are not getting reflected through NFTEmbed.
[**Click here**](https://royalties.nftembed.org/) to use our tool to specify a collection's royalties.
You'll be required to connect a digital wallet, own a collection, have an address you want the royalties to go to and then pay a small transaction fee to set the percentage.
*For a complete walkthrough,* [***click here***](https://docs.nftembed.org/details/features/marketplace/collection-royalties#how-to-set-royalties)*.*
How do I use NFT Embed to sell NFTs?
Make sure to toggle "**Marketplace**" to allow the Universe protocol to facilitate the exchange of NFTs.
*Universe XYZ takes a minor (0.3**%**) finder's fee for streamlining transactions.* ✨
How reliable is the widget?
Currently, all of the NFT's metadata uses OpenSea's API. This widget will properly load as long as OpenSea's data is online. We are actively working towards transitioning to our own in-house data service.
What is the difference between a display and marketplace functionality?
With NFT Embed, you can activate marketplace capabilities for the NFTs you choose to display.
Select the '**Marketplace**' toggle to enable additional functions such as; offers and direct purchases.
If you don't select the marketplace setting, your NFTs will get displayed like a gallery. Turn an ordinary picture into an option to buy!
To learn more about the marketplace setting, [***click here***](/details/features/marketplace)!
What is wETH?
wETH is a type of cryptocurrency developed for the Ethereum blockchain.
"Wrapped ETH" means that each wETH token gets backed by one ETH token.
wETH conforms to the ERC-20 standard while ETH does not; this is because ether was developed and released before the advent of the standards that tokens need to conform to— therefore, the value of each wETH coin will never go below the value of one ETH coin.
ETH is traded or 'wrapped' directly for wETH, and to receive plain ETH; you'll need to trade it back or 'unwrap' the wrapped ETH. ()
Technically, you are not 'wrapping' anything; instead, you are trading ETH for wETH at a 1:1 ratio. This parity gets enforced by a smart contract and is therefore immutable.\
\
[**Click here**](https://weth.io/) to learn more about wETH.
What types of NFTs get displayed?
Currently, we support ERC-721, aka unique NFTs or 1/1's. (Ethereum Mainnet)
In the future, we'll offer additional standards and networks as we scale our services.
# Using Custom Styles (CSS)
Custom styles allow you to adjust borders, colours, the radius of corners, background and content sizing. To enable CSS select the last toggle that says '**Custom Style**' on the left-hand side of the NFT Embed.
Anytime the CSS gets adjusted on the page, it will automatically refresh to show you the new changes.
### Embed Components
The Embed Code is broken down into three components.
{% tabs %}
{% tab title="1️⃣ General" %}
The variables here will reflect across the main body of the embed.
{% endtab %}
{% tab title="2️⃣ Metadata" %}
You'll see the changes on the embed after clicking the "ℹ️" button near the top right corner of the embed.
{% endtab %}
{% tab title="3️⃣ Asset" %}
Adjusting the variables changes how the NFT content gets displayed to people visiting your website.
{% endtab %}
{% endtabs %}
# Fonts and Colors
# Fonts
The fonts of a website represent the readable text. The sizing gets determined by traditional values, such as 12px or your discretion.
### Size
The default size for the NFT Embed is 12px. The custom styling will reflect that value.
```javascript
"fontSize": "12px",
```
# Colors
The `color` property is used to set the color of fonts, backgrounds and other components.
Colors are specified by either:
* Standard color name: "red"
* HEX value: "#ff0000"
* RGB value: "rgb(255,0,0)"
### Background Color
To adjust the background color of elements, utilize “**backgroundColor**”
```jsx
"backgroundColor": "black", // the color of an elements background
```
### Font Color
To adjust the color of text and other elements, utilize “**color**”
```jsx
},
"metadata": { // metadata properties box = MPB
"backgroundColor": "black",
"fontSize": "12px",
"color": "white",
"margin": "0.2rem",
```
### Gradients
To harness unique color designs/transitions, you can use gradients. Like the greenish-blue transition on the embed, they can get adjusted with the “**background**” variable.
They can also get incorporated wherever a color variable is present
{% hint style="info" %}
**how linear gradients work:** linear-gradient(direction, color-stop1, color-stop2, ...)
{% endhint %}
```jsx
"background": "linear-gradient(170deg, #bceb00 15.57%, #00eaea 84.88%)",
```
### Code Presets
*copy + paste within the brackets* (...)
#### Colors
* Any standard color of the rainbow will reflect
* red, blue, green, purple, yellow, orange,
* You may also use additional colors by appending the color with either light or dark
* dark red light red etc.
* `darkred` or `lightyellow`
#### Gradient Directions
* 180deg, #bceb00 15.57%, #00eaea 84.88% = **vertical**
* 360deg #bceb00 15.57%, #00eaea 84.88% = **flipped vertical**
* to right, #bceb00 15.57%, #00eaea 84.88% = **right facing**
* to left, #bceb00 15.57%, #00eaea 84.88% = **left facing**
* to right, rgba(255,0,0,0), rgba(255,0,0,1) = **gradient with transparency**
{% hint style="warning" %}
**Important:** High contrast is critical for people who have imperfect vision.\
\
Some tools have the ability to measure and monitor contrast!
{% endhint %}
# Spacing and Orientation
# Padding
The majority of these settings should get left as default. However, if you feel confident, feel free to adjust and change the parameters.
When you adjust “**padding**” the space around content and borders will change.
   
When unspecified, padding is applied equally around elements. The padding property has four values.
* top padding
* right padding
* bottom padding
* left padding
```jsx
"padding": "0.3rem", // a single value means space is equal
```
### Other values:
```javascript
// Use these variables for creating padding around elements
// You can use all of them or the desired side
"padding-top": "5px", // Create padding above elements
"padding-bottom": "5px", // Create padding below elements
"padding-right": "5px", // Create padding to the right of elements
"padding-left": "5px", // Create padding to the left of elements
```
```javascript
"padding": "0.5em", // a single value means space is equal
```
```javascript
"padding": "10% 0",
```
```javascript
"padding": "10px 5px 10px", // top , sides , bottom
```
```javascript
"padding": "10px 5px 10px 5px", // top , right , bottom , left (Clockwise)
```
{% hint style="success" %}
Values can be used individually.
{% endhint %}
```javascript
"padding": "0", // no padding around the element
```
# Margins
The majority of these settings should get left as default. However, if you feel confident, feel free to adjust and change the parameters.
Adjusting “**margins**” will change the space around elements.
   
When unspecified, margin is applied equally around elements. The margin property has four values.
* top margin
* right margin
* bottom margin
* left margin
```jsx
"margin": "0.2rem", // a single value means space is equal
```
### Other values:
```javascript
// Use these variables for creating space around elements
// You can use all of them or the desired side
"margin-top": "5px", // Create margin above elements
"margin-bottom": "5px", // Create margin below elements
"margin-right": "5px", // Create margin to the right of elements
"margin-left": "5px", // Create margin to the left of elements
```
```javascript
"margin": "0.5em", // a single value means space is equal
```
```javascript
"margin": "10% 0",
```
```javascript
"margin": "10px 5px 10px", // top , sides , bottom
```
```javascript
"margin": "5px 10px 5px 10px", // top, right, bottom, left (Clockwise)
```
{% hint style="success" %}
Values can be used individually.
{% endhint %}
```javascript
"margin": "0", // no margins around the element
```
# Alignments
The majority of these settings should get left as default. However, if you feel confident, feel free to adjust and change the parameters.
Adjusting alignment changes the location of content like text. Here are some examples of how text alignment changes using “**textAlign**” and a direction.
| Text Direction | Text Direction | Text Direction |
| -------------- | :------------: | -------------: |
| "left" | "center" | "right" |
{% code title="basic nft embed url" %}
```jsx
```
{% endcode %}
#### 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.* 🧰
{% code title="nft embed + custom css" %}
```javascript
```
{% endcode %}
# Full Code with Comments
Below you'll find a breakdown of a handful of lines of code that get used when making the NFT embed look so beautiful! Of course, the code explained below is a mere fraction of what goes on behind the scenes. These powerful lines empower our users to host NFTs how and when they want.
{% code title="custom css for nft embed" %}
```javascript
{
"general": {
"color": "black",
"background": "linear-gradient(170deg, #bceb00 15.57%, #00eaea 84.88%)", // the linear color change in the background of the embed
"borderRadius": "20px",
"height": "100%"
},
"metadata": { // metadata properties box = MPB
"backgroundColor": "black", // the color of the MPB
"fontSize": "12px", // the size of the font in the MPB
"color": "white", // the secondary font for the MPB
"margin": "0.2rem", // space around MPB borders
"padding": "0.3rem", // space between MPB content and borders
"textAlign": "center", // the font location inside the MPB
"border": "1px solid white", // the border around the MPB
"borderRadius": "10px" // the radius of the box corners around the MPB
"asset": {
"borderRadius": "10px", // the radius of the box corners of the NFT
"padding":"10px", // space between NFT content and embed borders
"border": "10px solid pink" // border around NFT
}
}
```
{% endcode %}
# Tips for Customization
NFT Embeds full potential gets realized when custom styling is toggled "on." Custom CSS will ensure you match your website's branding and aesthetic.
To enable CSS select the last toggle that says '**Custom Style**' on the left-hand side of the NFT Embed.
### Color Tips
Make sure to consider contrasting colors. High contrast is best for web pages.
{% hint style="info" %}
Here is a contrast tool: [**Contrast Checker**](https://coolors.co/contrast-checker/f3fc03-451137)
{% endhint %}
The tool above will quickly allow you to identify highly effective contrasting colors.
### What colors work?
* Any standard color of the rainbow will reflect
* red, blue, green, purple, yellow, orange,
* You may also use additional colors by appending the color with either light or dark
* dark red light red etc.
* `darkred` or `lightyellow`
### Layout Tips
You can enable "Responsive Width" to remove the guesswork from screen widths. Some people may view the NFT Embed through different sizes of devices; commonly, the width is the most affected view.
# Features
# Auctions
Coming Soon!
# Collections
Integrate an NFT collection widget with marketplace functionality & wallet connection out of the box. As an artist, news publication, independent blogger, anybody can start supporting Web3 with ease.
With NFTEmbed, as long as you have the contract address of an NFT, you can display an entire collection on any website with marketplace functionality!
You no longer need to show a link to Opensea or another marketplace like SuperRare; you can quickly display NFTs from SuperRare, Opensea, Rarible or any marketplace that supports NFTs— directly from your website. 🤝
 
The critical difference between Single NFT and Collection is simple— an ability to turn any page into a complete marketplace without code!
For example, instead of single NFTs for direct sales, you can allow users to search for an NFT of their preference.
When you enable '**User Profile**' NFTEmbed will include a '**My NFTs**' tab, which allows users to view the NFTs they already own— **from that collection.**
### URL Schema
{% code title="Code: Embed widget" overflow="wrap" lineNumbers="true" %}
```html
```
{% endcode %}
# Finders Fee
The NFT Embed has an optional purpose: facilitating a finders fee through an embedded NFT.
### Fee Breakdown
Here is a breakdown of a typical fee split:
* **Collection Royalty**
* These fees get collected by the collection creator.
* Must be set by the owner.
* [**Use this tool**](https://royalties.nftembed.org) to ensure royalties are set for collections.
* **Universe Fee**
* These fees get collected by the exchange contracts and transferred to UniverseDAO.
* The current fee is 0.3%.
* **Finders Fee**
* Optional fees for facilitating the NFT sale through the embed.
* This is similar to an affiliate sale or vendor fees.
* Must be set via the NFT Embed page, [***here***](https://nftembed.org).
* **Seller Earnings**
* After subtracting the above fees, the remainder gets transferred to the seller/owner.
{% code title="Code: Sale split fees" %}
```java
saleSplitFee=25 // 25% sale split percentage: Finders earnings
saleSplitFee=10 // 10% sale split percentage: Finders earnings
saleSplitFee=5 // 5% sale split percentage: Finders earnings
```
{% endcode %}
1. Protocol Earnings — DAO Fee
2. Finders Earnings — Royalty Split
3. Seller Earnings — NFT Price
# Marketplace
With NFT Embed, with one switch, you can quickly turn any web page into a potential sale!
NFT Embed uses the Universe XYZ protocol to streamline transactions. By enabling the 'Marketplace' toggle, you get the ability to turn the embed into a potential sale! The marketplace toggle gives users the power to purchase embedded NFTs in various ways.
The protocol takes a minor (0.3%) fee for facilitating transactions on the Ethereum blockchain.
With NFT Embed, you can directly list NFTs with the protocol, embed NFTs already for sale, and make direct purchases and offers!
{% code title="Code: Marketplace toggle" overflow="wrap" %}
```java
showMarket=true // marketplace toggle enabled
showMarket=false // marketplace toggle disabled
```
{% endcode %}
First, you need to connect your wallet:
Before purchasing any NFT, there will be an 'approval' fee. This transaction allows your address to interact with the Universe exchange contracts and the NFT contract.
After approving the smart contract, you're interacting with; you'll get prompted with an authentication signature.
This signature gets used whenever you list an NFT, purchase directly or place an offer. The values of the transaction are included in your signature and reflected in the order book.
### Listing NFTs
To list NFTs, you'll establish the amount you're willing to sell for and an optional finders fee— set via the embed —will be included in the sale.
1. Get the token address : The specific address of the NFT contract
2. Get the token ID : The specific token you want to list from the contract
{% hint style="info" %}
Token ID = a unique number assigned to an NFT
Example; The token below is from the Lobby Lobster contract and the *token ID is **5987***
{% endhint %}
 
{% hint style="success" %}
You don't need to add a finders fee if you're the creator.
{% endhint %}
Additionally, some people may opt to use the finders fee for a spare address or to reward someone else.
#### Listing Process
1. Fill in the details for the NFT on [NFTEmbed.org](https://nftembed.org)
2. Connect your wallet
3. Select '**List**'
4. Set your price
5. Approve the token: Mandatory or else the smart contract cannot exchange the NFT
6. Select '**List**' then accept the validation signature
{% hint style="warning" %}
To **list** an NFT with the embed you must be the owner of the token!
{% endhint %}
 
### Buy Now
To buy NFTs with the NFT Embed, they must get listed on the Universe XYZ protocol.
From there, you can purchase listed NFTs with ease! The fees will get deducted from the sale total.
### Offers
To make offers on NFTs that get embedded in webpages, you'll need to use wETH. ([**What is wETH?**](/intro/faqs#what-is-weth))
wETH is used to create orders for set amounts. The owner of an NFT can see your offer and has the choice to accept.
After offers are accepted, wETH gets transferred to the seller, and at the same time, the NFT gets transferred to a new owner— the successful bidder.
  
### Checkout
Navigating through checkout will give you a few different modals; you'll be sure to notice the purchase processing and the complete transaction screen.
{% hint style="info" %}
During your purchase, a screen will be keeping track of the transaction.
{% endhint %}
After your transaction confirms, you should see a modal informing you that your purchase was successful!
You can quickly view your transactions on the blockchain during this process by clicking "**Transaction ID.**"
 
Here is the typical structure of a transaction— in order of precedence.
1. NFT Cost
2. Collection Fee
3. Exchange Fee — goes to UniverseDAO
4. Royalty Share — Finders Fee or Affiliate Sale
{% hint style="success" %}
**Note**: All funds are split and transferred to their respective parties within a single transaction.\
\
*You'll need to verify further via* [***Etherscan***](https://etherscan.io/) *or another block explorer.*
{% endhint %}
# Collection Royalties
### What are Royalties?
People who create works of art, music, stories or anything else creative— own the intellectual property of said work.
Traditionally, an entity operating between creators and collectors receives a fee for facilitating value exchange. However, with NFT Embed, anyone can encourage or make a direct sale! People don't need an extensive system to help them promote the deal. Instead, they can take any NFT compatible with NFT Embed and pop any verified creation on a webpage!
Easily create websites for NFTs and then embed any creation you want! Whether yours, a friend or a famous work. (Like a [**Beeple**](https://opensea.io/beeple) or [**Ethos by Aeforia!**](https://nftembed.org/embed/nft?saleSplitAddress=\&saleSplitFee=10\&showMarket=true\&tokenAddress=0xb932a70a57673d89f4acffbe830e8ed7f75fb9e0\&tokenId=17440))
{% hint style="info" %}
If you own it, you'll earn a sale; if you love it, you can make a commission!
{% endhint %}
The key here, if you're a collection owner, you can quickly establish an effective method for exchanging your work directly with collectors and no more using confusing networks with agents and numerous fees.
### Setting Royalties
NFT sales using NFTEmbed reference utilize [EIP-2981: NFT Royalty Standard](https://eips.ethereum.org/EIPS/eip-2981).
{% hint style="info" %}
What is EIP-2981?\
\
A standardized way to retrieve royalty payment information for non-fungible tokens (NFTs) to enable universal support for royalty payments across all NFT marketplaces and ecosystem participants.
{% endhint %}
Even if a contract already has royalties set, you should use our tool to ensure royalties get enforced with the Universe XYZ contracts.
We developed a tool to set royalties for collections that you own quickly— when royalties are not getting reflected through NFTEmbed.
{% hint style="success" %}
[**Royalty Registry Contract**](https://etherscan.io/address/0x2A9647901684caaeC6f026eEc0b1355195313cB5)
{% endhint %}
You'll be required to connect a digital wallet, own a collection, have an address you want the royalties to go to and then pay a small transaction fee to set the percentage.
To navigate to the tool, [**click here**](https://royalties.nftembed.org).
### How to Set Royalties
Firstly, make sure you are the owner of a collection contract before you can adjust or set the royalties.
1. Connect your wallet to: [**royalties.nftembed.org**](https://royalties.nftembed.org)
2. Get the contract address for the collection\ 
3. Select an address that will receive the royalties
4. Choose a percentage (Max 20%)
5. Click '**Set the royalty**'\
6. Confirm the transaction in your wallet!
7. Wait for on-chain confirmation
8. Congratulations! You've set collection royalties 🚀
# React SDK
Coming Soon!
# Implementations
# SquareSpace
If you’re familiar with [Squarespace](https://www.squarespace.com/), you can find details on how to embed the NFT on a custom site made with Squarespace!
### Squarespace Steps
1. Open your Squarespace project
2. Find an NFT you'd like to embed on the webpage
3. The code you need for your webpage is on the left sidebar of [nftembed.org](http://nftembed.org)
4. Select Copy, then the embed gets copied to your clipboard
5. Navigate to the HTML/Block editor of Squarespace
* **Tip:** Enable custom styling to match the aesthetic of your project!
6. Voila, enjoy an NFT marketplace on any webpage!
[***Click here for a demo video!***](https://youtu.be/iX36AicWRsc)
# WebFlow
If you're familiar with [Webflow](https://webflow.com/), here are some steps to embed an NFT on a site you've created.
### WebFlow Steps
1. Open your WebFlow workspace
2. Find an NFT you’d like to embed on a webpage
3. The code you need for your webpage is on the left sidebar of [nftembed.org](http://nftembed.org)
4. Select Copy, then the embed gets copied to your clipboard
5. Navigate to the HTML/Block editor of WebFlow
* **Tip:** Enable custom styling to match the aesthetic of your project
6. Voila, enjoy an NFT marketplace on any webpage!
Here are some screencaps from Webflow to help you navigate:
[***Click here for a demo video!***](https://youtu.be/iX36AicWRsc)
# Shopify
You can also use [Shopify](https://www.shopify.ca/) to embed NFTs into your e-commerce website fast. If you have an idea of how Shopify works, follow the steps below and take advantage of NFT Embed.
### Shopify Steps
1. Open your Shopify site
2. Find an NFT you'd like to embed on the webpage
3. The code you need for your webpage is on the left sidebar of [nftembed.org](http://nftembed.org)
4. Select Copy, then the embed gets copied to your clipboard
5. Navigate to the HTML/Block editor of Shopify
* **Tip:** Enable custom styling to match the aesthetic of your project!
6. Voila, enjoy an NFT marketplace on any webpage!
[***Click here for a demo video!***](https://youtu.be/iX36AicWRsc)
# Tools
Here are some resources to inspire and help you learn about CSS and HTML. In addition, they should assist you in understanding how to customize the embed for yourself.
### Design Tools
* [Hey Design: Intro to design systems](https://heydesign.systems/)
* [Josh Comeau CSS Tutorials](https://www.joshwcomeau.com/tutorials/css/)
* [CSS Layout](https://csslayout.io/)
* [My Color Space](https://mycolor.space/)
* [CSS Gradient](https://cssgradient.io/)
* [CSS Design Awards](https://cssdesignawards.com/)
# Support
Need a hand navigating NFTEmbed?
We have a private Discord server set up to help you with any troubles you may have. 🦾
Reach our technical support team [**here**](https://discord.gg/Wff4FPtnpY).
# Contact Us
Are you looking to venture into the vast Metaverse?
We are here to assist you if you have an NFT project or something elaborate in mind!
Please, [*reach out to the agency*](https://www.graviton.xyz/agency) for further details! 🚀