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
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)
