TokenMint Blog

Connecting Your ICO Contract With a Website Using Web3

Web3 Integration

This tutorial will guide you through the process of connecting your deployed crowdsale contract with the webpage on your website using Web3 Javascript library. Once your Ethereum contracts are connected with your website, you are one step closer to creating a successful ICO. The only thing left is to invite your investors to your landing page so they can invest in your token from their browsers in just a few clicks. Getting traffic to your website and marketing is out of scope of this tutorial.

This tutorial assumes you have deployed Increasing Price Crowdsale using our ICO Generator tool. If you want to deploy a different kind of crowdsale contract, check out our Crowdsales page for more options.

Example Sales Page

We have deployed a sample crowdsale contract to the Ropsten testnet to showcase how to interact with it. You will need MetaMask or any other Web3 Ethereum wallet to interact with it. We have also deployed the Example Sales Page which interacts with the crowdsale contract. We have included functions for fetching data from the contract such as token balance, and current price of token, as well as functions that change the contract state such as buy tokens, withdraw tokens, and claim refund. All the elements that we explain further in this tutorial are included in the page.

Example Sales Page

As you can see, the page is a bare html file without any css styling. This is because you'd want to integrate your own sales page on your website, which should have a styling on it's own. Our page only showcases functionality.

Example page uses web3 library, which is located in the same folder. We have inluded both files in the zip file, which can be downloaded here. You can start integrating web3 in your own html template from the Example page, or keep reading this tutorial to understand how it works.

Setting Up Page

Before calling contract's functions, make sure you import "web3.min.js" to your page. After that you'll need to instantiate the contract instance so that you can call contract methods. Take a look at the code bellow:

We imported web3 library, created some variables for later use, instantiated web3 object using Metamask injected object, instantiated javascript represented contract object, and grabbed ethereum account from web3. Make sure you paste the ABI string from example page.

Check Web3 Wallet Connection

Next, you might want to check if investor is using Web3 browser, and inform him of his next steps if necessary. We'll create a function in the head that will check if Web3 object is present, and show a note to investor:

Get Account Info

Since we have investor's account, we can now get some info like ETH balance, token balance, etc.:

Note that function getAccountInfo() is called when body of the page is loaded. We also added a button Update All which calls getAccountInfo when user clicks on it and updates text on page on demand.

Buy Tokens

Investor can buy tokens in two ways:

  • - by directly sending ETH to crowdsale contract address: 0xCa7532c24aA2B2C1389AC8B1B6018e0eE0c8e9c4, or
  • - by calling buyTokens() function on the crowdsale contract.

Sending ETH directly doesn't require Web3 wallet, any wallet can do that. Make sure that you mention this option to your investors and list contract's address on your sales page. Also note that since sending ETH as a normal transaction to the contract does invoke contract's functions, 21000 gas might not be enough. You might need to tell them to increase gas limit (not gas price).

Here's how to call buyTokens() function of the crowdsale contract:

Investor will first specify in the input field how much ETH he wants to invest, and then click Buy Tokens button. Function buyTokens() will call buyTokens(..) function on the crowsdale contract with account and value as arguments. As soon as transaction id is available, the function will display it to investor.

Withdraw Tokens

Since Increasing Price Crowdsale is post-delivery, meaning that tokens and ETH are delivered after successful crowdsale ending, investors must invoke withdrawFunds(..) method on the crowdsale contract to finally receive their tokens to their address. Before calling withdrawTokens function their tokens are locked in crowdsale contract. Here's a code snippet:

Claim Refund

If crowdsale fails (ends before the goal is reached), investors are entitled to claim refund and get their ETH back. They can do so by calling claimRefund(..) method of the crowdsale contract. Here's a code snipped:

Congratulations! You have now connected your website with the Ethereum crowdsale contract, and your ICO is ready to accept investments.

Share This Post

What's Next

If you've completed this tutorial, we recommend you follow up with these tutorials:

Web 3.0-enabled Ethereum Wallets and Browsers
Increasing Price Crowdsale Explained

Connect With Us

Thank you for reading this far! You can:
- follow us on Twitter
- subscribe to our channel on Youtube

Contact us

We are Merkle Blue DOO, a blockchain startup.

Vardarska 1c/54, 21000 Novi Sad, Serbia

Phone: (+381 64 321 2640)