To do this, your users are going to need to be using a web3-enabled browser, so either an installable one like Parity or Mist, or they could use a browser extension like MetaMask.
Also, while I could teach you how to use the web3 API directly, instead I’m going to teach you how to use a new convenience library for talking to Ethereum smart contracts called EthJS.
Your website will need to wait for the ready event, and then check for a global web3 object. That looks like this:
Copied loosely from the MetaMask Developer Guide.
In your app setup, you’re going to use a few different ethjs modules, and you’ll initialize them with the global web3 object’s currentProvider property, which is how it talks to the blockchain anyway.
Once you’ve instantiated a contract instance, you can use it to create references to live contracts on the network. To do this, you need two things:
The contract address.
The contract ABI.
Usually if you published a contract, you know how to get the ABI, and if you’re connecting to someone else’s contract, they should make the ABI available, although sometimes you can find ABIs matched to contracts on block explorers like Etherscan.
Let’s assume you have your ABI and address available, and see how we’ll create a contract object now. In this example I’ll use an ABI that includes only the transfer(to, value) method from the Token standard:
Note if this transaction were to send ether also, you’d add value: '10000' to the options hash that includes the from field. The value is in the unit of wei, which is 1x10^-18 Ether. An easy way to convert is like this:
A strange part of this for a normal web developer is that the transaction response does not mean the transaction is now complete, it just means it’s been transmitted to the network. It still needs to be mined, and in Ethereum, that takes around 14 seconds on average (block time, view stats on EthStats.net).
That’s it! (I know, it was a lot) I hope this was enough to show you how to interact with a smart contract over the Ethereum block chain. Once you’re used to it, it’s pretty great, because it’s a sort of global API that has permissions baked in, so while you have to do a couple funny things like wait for transactions to be mined, you don’t have to do obnoxious things like manage user accounts and passwords, or manage a backend server yourself!
Please add any questions you have here, we made MetaMask to enable the easy creation of web interfaces for smart contracts, so that’s really what we’re here for. Show us what you’ve got!