{"id":13629967,"url":"https://github.com/artgenexyz/webflow-nft-components","last_synced_at":"2025-04-09T12:05:14.065Z","repository":{"id":37019626,"uuid":"426024608","full_name":"artgenexyz/webflow-nft-components","owner":"artgenexyz","description":"Connect web3 to Webflow without coding skills","archived":false,"fork":false,"pushed_at":"2024-03-01T03:04:49.000Z","size":1680,"stargazers_count":143,"open_issues_count":22,"forks_count":104,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-04-10T05:23:12.759Z","etag":null,"topics":["ethereum","nft","nocode","web3","webflow"],"latest_commit_sha":null,"homepage":"https://buildship.xyz","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/artgenexyz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2021-11-08T23:19:07.000Z","updated_at":"2024-03-05T15:18:39.000Z","dependencies_parsed_at":"2024-03-01T04:24:02.110Z","dependency_job_id":"a73bc072-af5d-4409-a3a2-eef673fd6972","html_url":"https://github.com/artgenexyz/webflow-nft-components","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artgenexyz%2Fwebflow-nft-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artgenexyz%2Fwebflow-nft-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artgenexyz%2Fwebflow-nft-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artgenexyz%2Fwebflow-nft-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/artgenexyz","download_url":"https://codeload.github.com/artgenexyz/webflow-nft-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248036063,"owners_count":21037092,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ethereum","nft","nocode","web3","webflow"],"created_at":"2024-08-01T22:01:25.900Z","updated_at":"2025-04-09T12:05:14.047Z","avatar_url":"https://github.com/artgenexyz.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Mint button for Webflow/Wix/Wordpress\n\n\u003cimg src=\"public/images/screenshot.png\" width=\"300\" /\u003e\n\nAdd a mint button to your website without coding skills required.\n\n## ⚡ Quick start \n\nUse our new app to set up your button embed:  \nhttps://embed.buildship.xyz\n\n### Features\n👉 No-code mint button for Webflow, Wix, WordPress with instructions  \n👉 Supports custom contract methods (mint, maxSupply, etc.)   \n👉 Supports non-verified contracts  \n👉 Pay to remove watermark  \n👉 Supports other chains (Polygon, Optimism, Arbitrum, etc.)  \n👉 Easy to use\n\n## Video guide\n[![Mint button video guide](https://img.youtube.com/vi/4MMylTzzwAg/sddefault.jpg)](http://www.youtube.com/watch?v=4MMylTzzwAg)\n\n## Text guide\n\nThis widget allows minting NFTs on your website. \n\nTo start, you need an Ethereum NFT contract. [Create it via Buildship app](https://app.buildship.xyz), or test with an [example contract](https://github.com/buildship-dev/webflow-nft-components#example-for-testing).\n\n**ERC721Community** contract by [buildship.xyz](https://buildship.xyz) is used by **400+** NFT drops with **5M$+** primary sales earned for creators.\nIt uses ERC721A, allowing for **50-100% lower** minting gas fees, costs **~10-20$ in gas to deploy**, bullet-proof security and extensions like allow lists, mint passes, etc.\n[Create your contract now](https://app.buildship.xyz)\n\n## How to use it with Webflow?\n\n\u003e ⚡ Instructions for Wix/Wordpress/HTML \u0026 easy setup are available on [embed.buildship.xyz](https://embed.buildship.xyz)\n\n1. Open Webflow website editor\n2. Create a new [Embedded HTML code](https://university.webflow.com/lesson/custom-code-embed) block (at least **Basic** site plan required)\n3. Copy \u0026 paste this code in Webflow Embed block\n```html\n\u003cscript\u003e\n   CONTRACT_ADDRESS = \"YOUR CONTRACT ADDRESS HERE\"\n   IS_TESTNET = false\n   // if your contract is NOT VERIFIED on Etherscan\n   // put here: CONTRACT_ABI = [{...}]\n   // don't do anything if unsure\n\u003c/script\u003e\n\u003cscript src=\"https://nftcomponents.vercel.app/static/js/main.js\"\u003e\u003c/script\u003e\n\u003clink href=\"https://nftcomponents.vercel.app/static/css/main.css\" rel=\"stylesheet\"\u003e\n```\n4. If you **have your Ethereum NFT contract**  \n   ✅ Insert your contract address in `CONTRACT_ADDRESS` field  \n   ✅ Set `IS_TESTNET` to `false` or `true` depending on which network is the contract on: `Ethereum Mainnet` or `Goerli Testnet`  \n   ✅ Make sure it fits requirements from [Custom smart contract requirements](#custom-smart-contract-requirements)  \n\nIf you **don't have a contract**, [create it via Buildship app](https://app.buildship.xyz)\n\n\u003e Your contract should be [verified](https://etherscan.io/verifyContract) on [Etherscan](https://etherscan.io). Otherwise you have to add `CONTRACT_ABI = [{...}]` line in the above code, with your full contract ABI inserted. If you have an error saying your ABI is too long, [click here](https://github.com/buildship-dev/webflow-nft-components/issues/22#issuecomment-1042708174).\n\n6. Create a button with ID `mint-button` on your Webflow site\n\n\u003c!-- \u003cimg src=\"public/images/webflow-id.png\" width=\"200\" /\u003e --\u003e\n\nOn the left side, press Add and find Button\n\n\u003cimg width=\"200\" alt=\"image\" src=\"https://user-images.githubusercontent.com/1909384/166176197-2b95b351-fcd8-409a-9db6-27fbf240d816.png\"\u003e\n\nSelect your button, then on the right side, set Button id to `mint-button`\n\n\u003cimg width=\"200\" alt=\"image\" src=\"https://user-images.githubusercontent.com/1909384/166176251-c0c5f981-2cab-40ac-b7d8-5a5d7c297987.png\"\u003e\n\nIf you can't set an ID, you can set a button URL as `mint-button` or `https://\u003cyour-website-url\u003e/#mint-button`\n\n7. You're done 🎉\n\n### Custom smart contract requirements\n\nIf you are using mint widget with a contract not deployed via [https://app.buildship.xyz](https://app.buildship.xyz), it has to be:\n- verified on Etherscan\n- public `price` method outputting price in wei. It could be named `price`, `cost` or `getPrice`\n- public `mint` method accepting `nTokens` as parameter. Alternative names: `mint`, `mintNFT` or `publicMint`\n- public `maxSupply` method outputting collection size\n- public `totalSupply` method outputting total number of minted NFTs\n\nIf your contract doesn't fit the requirements, you can fork this repo and open a PR. Vercel will automatically deploy and build your PR and you'll be able to use the changed version.\n\nHere's the code that handles this: [src/mint/web3.js](src/mint/web3.js)\n\n\n### Example for testing\n```html\n\u003cscript\u003e\n   CONTRACT_ADDRESS = \"0xb1db0dbad7a14370872a7e5327c8ad7c9951a661\"\n   IS_TESTNET = true\n\u003c/script\u003e\n\u003cscript src=\"https://nftcomponents.vercel.app/static/js/main.js\"\u003e\u003c/script\u003e\n\u003clink href=\"https://nftcomponents.vercel.app/static/css/main.css\" rel=\"stylesheet\"\u003e\n```\n\n## FAQ\n\n### I'm confused / it's not working, can you help me?\nYes, absolutely! You can [contact us in Discord](http://buildship.xyz/), or open a [GitHub issue](https://github.com/buildship-dev/webflow-nft-components/issues/new)\n\n### How to add \"Connect wallet\" button?\nMint button will ask to connect wallet, so it's not necessary to add a \"Connect wallet\" button.\n\nIf you still want to do it, create a Webflow button with ID `connect`.\n\n### How to add a custom minted counter?\nJust create two text elements and assign them:\n- `minted-counter` ID to display minted number\n- `total-counter` ID to display collection size\n\n### How to use this with Polygon, Binance, or other Ethereum-based networks?\nIt's easy! Set `NETWORK_ID` instead of `IS_TESTNET` in the code snippet\n\n```html\n\u003cscript\u003e\n   CONTRACT_ADDRESS = \"YOUR CONTRACT ADDRESS HERE\"\n   NETWORK_ID = 1\n   // remove IS_TESTNET line\n   ...\n\u003c/script\u003e\n\u003cscript ...\u003e\n\u003clink ...\u003e\n```\n\nSome of the network IDs you might use:\n- Ethereum Mainnet: `NETWORK_ID = 1`\n- Ethereum Goerli Testnet: `NETWORK_ID = 5`\n- Polygon: `NETWORK_ID = 137`\n- Binance: `NETWORK_ID = 56`\n- For other IDs visit [Chainlist](https://chainlist.org)\n\n### How to style minting dialog?\n[See the example here](https://github.com/buildship-dev/webflow-nft-components/wiki/Mint-button-widget#how-to-style-minting-dialog)\n\n### How to hide minted counter from the dialog?\nYou need to set `DEFAULTS.hideCounter` to `true`\n```html\n\u003cscript\u003e\n   CONTRACT_ADDRESS = \"YOUR CONTRACT ADDRESS HERE\"\n   NETWORK_ID = 1\n   DEFAULTS = {\n       hideCounter: true\n   }\n   ...\n\u003c/script\u003e\n\u003cscript ...\u003e\n\u003clink ...\u003e\n```\n\n### What's all available customization?\nHere's a list of all available parameters for customization. If you need help with this, message us in Discord\n```html\n\u003cscript\u003e\n   CONTRACT_ADDRESS = \"YOUR CONTRACT ADDRESS HERE\"\n   CONTRACT_ABI = []                   // needed for non-verified contracts only\n   NETWORK_ID = 4                      // defaults to 1: Ethereum network\n   IS_TESTNET = true                   // true defaults to 5: Goerli network\n   MAX_PER_MINT = 5                    // max value of NFT quantity slider in the modal, default is 20\n   DEFAULTS = {\n      labels: {\n          walletConnected: \"Wallet connected\", // label for wallet connected button\n      },\n      hideCounter: false,              // hide minted counter from the dialog. Default: true\n      contractMethods: {\n         mint: \"myCustomMintMethod\"    // defaults to \"mint\" or \"publicMint\"\n      },\n      publicMint: {\n          price: 0.1                    // defaults to none, fetched automatically from smart-contract\n      }\n   }\n   STYLES = {\n      theme: \"light\",\n      backgroundColor: \"#ffffff\",\n      primaryColor: \"#2986CC\",\n      primaryTextColor: \"#1f1f1f\",\n      secondaryTextColor: \"#9e9e9e\",\n      buttonTextColor: \"#ffffff\",\n      corners: \"rounded\"\n   }\n\u003c/script\u003e\n```\n\n### Do you collect any data?\nAnonymous data collected using Amplitude, so we can know how many users the widget has. The only thing we collect is website URL.\nIf you want to opt out, set \n\n```html\n\u003cscript\u003e\n...\nDEFAULTS = { \n   analyticsOptOut: true\n}\n...\n\u003c/script\u003e\n```\n\n### Can I add my own custom analytics?\n\nCheck out this guide: https://github.com/buildship-dev/webflow-nft-components/wiki/Custom-Analytics\n\n### Free Template\n\nIf that instruction was too complicated, check out our [free clonable NFT website templates for Webflow](https://webflow.com/theshadeth)\n\n\n## Roadmap\n- [x] Fix issues with WalletConnect on mobile\n- [x] Support for Coinbase Wallet\n- [x] Guide for Wix\n- [x] Guide for Wordpress\n- [ ] Guide for Squarespace\n- [ ] Native support for Ledger\n- [ ] Support for Magic Wallet\n- [ ] Support for gasless mints\n- [x] Support for buying with credit card: MoonPay / CrossMint\n- [ ] Migrate to RainbowKit or ConnectKit\n- [ ] Migrate to ethers.js\n- [ ] Refactor code\n- [ ] \"Disconnect wallet\"\n- [ ] View wallet's NFTs via rainbow.me\n- [ ] Support for token-gating\n\n## Contributing\nFork the repo and clone it\n```\ngit clone https://github.com/buildship-dev/webflow-nft-components.git\n```\n\nInstall dependencies with `yarn` (`node v14+` required)\n```\nyarn install\n```\n\nStart server on `localhost:3000`\n```\nyarn start\n```\n\nPush changes, open a PR in our repo, and you'll be able to test your changes immediately on `nftcomponents-git-your-branch-name.vercel.app`.\n\nLeave a message in our [Discord](http://discord.gg/dRg2tGqfhE) to discuss \u0026 review your PR faster!\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartgenexyz%2Fwebflow-nft-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fartgenexyz%2Fwebflow-nft-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartgenexyz%2Fwebflow-nft-components/lists"}