Custom Mint Button Iframe

​

Overview

​

Pre-requisites

• You must have a Kingdomly mint project deployed.
• The mint group must be set up and active.

​

Iframes zip

​

Quick Implementation

​

For React.js Projects

​

Files Included

• iframe.txt - Your iframe embed code with auto-populated mint slug
• InitializeIframe.js - Customization script that applies your styling
• README.md - This instruction file

​

Step 1: Add Script to Public Folder

1. Copy the InitializeIframe.js file to your project’s public folder
2. The file should be accessible at /InitializeIframe.js from your website root

​

Step 2: Add useEffect Hook

useEffect(() => {
    // Load and execute the customization script
    const script = document.createElement('script')
    script.src = '/InitializeIframe.js'
    script.async = true
    document.body.appendChild(script)

    return () => {
      // Cleanup on unmount
      document.body.removeChild(script)
    }
  }, [])

​

Step 3: Add the Iframe

1. Copy the content from iframe.txt
2. Paste it into your React component where you want the mint embed to appear

​

For HTML Websites

​

Step 1: Add the Iframe to Your Website

1. Copy the content from iframe.txt
2. Paste it into your HTML where you want the mint embed to appear

​

Step 2: Include the Customization Script

1. Copy the content from InitializeIframe.js
2. Add it to your webpage either:
   • Option A: Include it in a <script> tag at the bottom of your HTML page
   • Option B: Save it as a separate .js file and include it with <script src="InitializeIframe.js"></script>

​

Modifying Customizations

​

Responsive Design

​

Troubleshooting

1. Check browser console for error messages
2. Ensure the iframe ID is exactly kingdomly-mint-iframe
3. Verify the script is loaded after the iframe
4. Make sure both iframe and script are on the same page

1. Check that the mint slug is correct
2. Ensure your website allows iframe embedding
3. Verify the mint is published and accessible

​

Mobile Compatibility

​

You’re All Set!