1 | <img style="border-radius: 8px" src="assets/embedable-nfts.png" />
|
2 |
|
3 | <br /><br />
|
4 |
|
5 | # Embeddable NFTs
|
6 |
|
7 | Easily embed OpenSea listings in your website!
|
8 |
|
9 | ### Component inputs
|
10 |
|
11 | `tokenAddress`\*- The token's contract address.
|
12 |
|
13 | `tokenId`\* - The token Id of the asset.
|
14 |
|
15 | `horizontal` - If this is present, the card will be rendered horizontally.
|
16 | mode on mobile (breakpoint is at 600px). In `manual` mode the card will be unaffected.
|
17 |
|
18 | `orientationMode` - If `auto` the card will switch to vertical
|
19 |
|
20 | `width` - The width of the embeddable. Ex. values `100%` `250px`. Default: `388px`
|
21 |
|
22 | `height` - The height of the embeddable. Ex. values `40vh` `300px`. Default: `560px`
|
23 |
|
24 | `network` - The name of the network the asset is on `mainnet` or `testnet`. Default: `mainnet`.
|
25 |
|
26 | `referrerAddress` - The address of the referrer. Check out the [SDK docs](https://github.com/ProjectOpenSea/opensea-js#affiliate-program) to learn more about the Affiliate program.
|
27 |
|
28 | \*Required inputs
|
29 |
|
30 | ### Usage
|
31 |
|
32 | Add this to your `<head>` tag:
|
33 |
|
34 | ```
|
35 | <script src="https://unpkg.com/embeddable-nfts/dist/nft-card.min.js"></script>
|
36 | ```
|
37 |
|
38 | Then add this into your code:
|
39 |
|
40 | ```
|
41 | <nft-card
|
42 | tokenAddress="0x5caebd3b32e210e85ce3e9d51638b9c445481567"
|
43 | tokenId="2242579050293992223"
|
44 | network="mainnet"
|
45 | referrerAddress="YOUR_ADDRESS_HERE"
|
46 | >
|
47 | </nft-card>
|
48 | ```
|
49 |
|
50 | ### Development
|
51 |
|
52 | For developers looking to contribute or modify the code, or view the example use the following commands:
|
53 |
|
54 | ```bash
|
55 | git clone https://github.com/ProjectOpenSea/embeddable_nfts.git
|
56 | cd embeddable_nfts
|
57 | yarn install
|
58 | yarn run dev:demo
|
59 | ```
|
60 |
|
61 | #### Development server
|
62 |
|
63 | This project uses webpack for building and running a development server. Once the server starts, any changes made will trigger a rebuild after which those changes should be reflected in your browser.
|