Hi there, just like me you are probably fascinated about Web 3 and wondering if you can integrate it into your own Wix or Editor X website! There has been no way of doing this… until now!
I have found a way that you can mint NFT’s and create drops, create your own Marketplace, and your own custom Tokens!)
Follow along the steps below to get started with Web 3 and Wix!
An example of this can be found working at: https://spicemedia.co/vault
Step 1 - Create a Wallet
In order to use Web 3 within your site, you will need to own a Web 3 Wallet, this can be through Meta Mask , WalletConnect or Coinbase Wallet at the time of writing this.
I recommend if your looking to test this and see what it can do, you use a test network. Meta Mask or Coinbase wallets can do this. *PLEASE NOTE: Not all wallets can use test networks, for example, Rainbow. If you would like to set up a test network on your wallet you can learn in Step 1 (A) .
*PLEASE ALSO NOTE: This tutorial requires that you have tokens in your wallet. If you are using a Test Network, more will be explained in Step 1 (A) .
Step 1 (A) - Set up Test Network
(Test Network means that you can get free ETH or MATIC to test Web 3 services)
Once you have created your wallet, you will want to create a Custom Network (If you can’t already see the test network that you want to use).
To connect your Wallet to the new network head to: https://chainlist.org/ . Once there select the network you want to add to your wallet and they will do this automatically.
Once connected, you can get free ETH (Rinkeby Test Network) or MATIC (Mumbai Test Network) by heading to either: https://faucet.rinkeby.io/ or https://faucet.polygon.technology/ .
Step 2 - Connect to thirdweb
Currently, at the time of writing this, there is only 1 way (that I know of) to connect your Wix or Editor X site to the blockchain, and that is using an external platform called thirdweb .
To get started visit https://thirdweb.com/start & connect your wallet that you created in Step 1.
When connecting to thirdweb please select the Network that you would like to use for your Web 3 Integration in your wallet. For this tutorial, I will be using the Polygon Test Network called “Mumbai”. I recommend if this is your first time using thirdweb or Web 3 to use a test network. For more info on how to set up a Test Network visit Step 1.
Once connected you will need to create your “Project”. You can treat a project as a place where you will create Web 3 modules and a project stores all of them. For this tutorial, I will be calling it my website page “The Vault”. You can name this anything and you will also need to add a description.
After this, you will need to sign a few things through your wallet, this will take some time but please be patient.
(You will be asked to send some tokens to verify your accounts and start the process, this is why I recommend using a Test Network as you don’t need to pay any “REAL” Tokens or spend money).
Once all connected you can move on to the next step.
Step 3 - Connect your site to thirdweb
Head to your Wix or Editor X site editor and turn on Dev Mode.
Once turned on, go to “Site Structure” and then to “Public & Backend”
Hover over " NPM " and click the + .
Search for: @3rdweb/sdk and install .
Once installed, head to the next step.
Step 4 - Create and set up your Web 3 Module
In this tutorial, I will be creating an “NFT Drop”. (This allows users to mint an NFT that you have created inside of thirdweb). If you are looking to create a different module, then select the other option, follow the process and proceed to the next step.
Creating an NFT Drop Collection.
Head to your Project on thirdweb and click “Add Module”.
Select Release Drop.
In this tutorial, we are creating a one-of-one NFT. So select NFT Drop.
On this page customise your NFT Drop. An NFT Drop is the Collection . NOT the individual NFT (You will do this later).
Under Configure, create a Symbol that you will use to connect your website to this specific NFT. Don’t worry you can find this code again after saving it.
After saving, you will be prompted to authorize 2 transactions in your wallet. If you are using a test network remember you don’t pay REAL Tokens, instead you are using your Test Tokens.
After this confirm your permissions and then save.
Creating an NFT.
Once on your Drop page, add to your drop by creating an NFT.
After saving, you will be prompted to authorize 1 transaction in your wallet. If you are using a test network remember you don’t pay REAL Tokens, instead you are using your Test Tokens.
Setting Permissions.
After saving, you will be prompted to authorize 2 transactions in your wallet. If you are using a test network remember you don’t pay REAL Tokens, instead, you are using your Test Tokens.
Think about your settings wisely as each time you save you will need to approve a new transaction to the blockchain.
Once you have done your permissions you can move on to the next step!
Step 5 - Connect your Web 3 Module to your site
You’ve arrived at the final step! Here we will be connecting the Module you just created to your Wix or Editor X site.
Installing the code
Head over to the “Code” tab on your module. Now click “Copy code”.
Go to your Wix or Editor X site and open your Page’s Code. Once open, paste the code into the window.
Once you have done this go back to thirdweb and copy/paste all the other JavaScript Code into your Wix or Editor X site.
Installing the Embed
Head over to the Embed tab and copy the code.
Drag and drop the iFrame component to your site. Then click on the component and edit the code. Once in the window, paste your code.
Depending on how big your iFrame is, depends on what you need to edit in the code.
For Example: by default, the embed code is 600x600 Pixels.
<iframe
src="*REDACTED*"
width="600px"
height="600px"
style="max-width:100%;"
frameborder="0"
/>
If I want my frame to be 500x500 Pixels, I need to change the width and height to the size I want in the code.
Once you have done that and have successfully followed correctly then you have integrated Web3 into your Wix or Editor X site! You can finally publish to the public!
Please note that it may take a few hours for it to fully be functional.
If this tutorial has helped you, make sure to like this so that others can find it.
If you liked some of the art in this tutorial and want to follow my journey you can head over to my Twitter: @LiamJamesMedia
Let me know if you have any questions down below or if it’s a private matter you can message me on Twitter.
Thanks!