How to integrate a Mint Button on your Website

Integrate a Mint Button on your Website, so that your customers can mint NFTs directly on your Website.

Mint Button (Version 0.1.2)

We provide a simple to use Mint Button.

Every Smart Contract you deploy has an address like "0x1a45f3a7ddbA0595e6CcA93785736f3842b63FBb". Also every smart contract will deployed to a Chain, also called Network, which has a specific ID. You can find all Ethereum based chains on chainlist.org.

  • Ethereum Mainnet = 1

  • Ethereum Rinkeby Testnet = 4

  • Polygon Mainnet = 137

  • Polygon Mumbai Testnet = 80001

When you want to integrate a Mint Button on your website, you need the smart contract address and chainId. NFT Brush provides you the correct address and chainId when you create the mint button.

1. Download Mint Button Javascript File

mint-element-0.1.2.js

2. Upload JS File on your website and itegrate it

Upload the Javascript file to your website.

3. Include HTML Code

Place following HTML Code on the website.

<-- Copy this code to your website -->
<mint-element chain-id="CHAIN_ID" contract-address="SMART_CONTRACT_ADDRESS">
<script src="your-path-to/mint-element-0.1.2.js"></script>

Make sure to have CHAIN_ID with your chainId and SMART_CONTRACT_ADDRESS with your Smart Contract Adress.

Examples

Basic Example

Here is a basic example on how to integrate the mint button to your website: (link to codesandbox.io)

Edit Style

You can edit the style of the Mint Button. (link to codesandbox.io)

Events

The Mint Button fires following events:

  • init - After Mint Button was initialized. After this you can change the text for example

  • mint-successful - After a mint of a NFT was successful

  • mint-error - When minting ends in an error

Here is an example. (link to codesandbox.io)

Custom Text

You can change the text of the Mint Button, if you want to translate the text to another language. (link to codesandbox.io)

const defaultText = {
  // HTML possible
  paused: "Minting is paused",
  mintButton: "Mint",
  connectWallet: "Connect Wallet",
  installMetamask: "Install Metamask",
  noWalletFound: "No wallet found. Please install metamask.",
  switchNetwork: "Switch Network",
  mintingSucessfulTitle: "🎉 Your NFT has been minted  🎉",
  // HTML possible
  mintingSuccessfulDescription: "View your NFT on OpenSea.",
  mintingSuccessfulViewOnOpensea: "Open NFT on OpenSea",
  mintingFailureTitle: "Minting failure",
  // HTML possible
  mintingFailureDescription: "We could not mint your NFT.",
  // HTML possible
  soldOut: "Sold Out",
};

Debug

You can view the different states with the debug attribute. (link to codesandbox.io)