All Categories
General thirdweb Issues
How to Use NFT Drop template as Embed to your Website

How to Use NFT Drop template as Embed to your Website

In this support article you’ll learn how to use NFT Drop template to embed it to your website.

Description

In this support article you’ll learn how to use NFT Drop template to embed it to your website.

Deploy the Template

To deploy the NFT Drop template you have to follow the guide from here.

Build your Embed Code

  1. Get the URL of your deployed template.
  1. Use the URL to replace the example URL in the following code:
      2. <div class="iframe-container" style="width: 600px; height: 900px; padding: 20px; box-sizing: border-box; position: relative;">
    <iframe src="<TEMPLATE_URL_HERE>" allowfullscreen style="width: 100%; height: 100%; border: none; border-radius: 25px;"></iframe>
</div>
  1. You can modify the CSS inline styling or build your own styling by saving it as CSS file and place it somewhere. If satisfied proceed to the last step.
  1. Paste the code to your website to display it, please remember to modify the styling width and height according to your preference.

Demo

Here’s an example demo of the template as embed to HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: white;
        }
    </style>
</head>
<body>
    <div class="iframe-container" style="width: 600px; height: 900px; padding: 20px; box-sizing: border-box; position: relative;">
        <iframe src="https://nft-minting-page.up.railway.app/" allowfullscreen style="width: 100%; height: 100%; border: none; border-radius: 25px;"></iframe>
    </div>
</body>
</html>

Save it as index.html file and then preview it from your browser and you’ll see how it works. It should look like this.

Notion image

Additional Tips

  • If you’re unsure how to style your iframe would recommend to learn it from here.
  • To make your iframe responsive check out this tutorial here.

Can’t get this working? If you've followed the above and still have issues, contact our support team for help.

Did this answer your question?
😞
😐
🤩
How to get all tokenIDs in an NFT contract How to resolve ENS address