TUTORIAL: How to Create Your Own Cryptocurrency Dashboard for Monitoring Prices [Coingecko Edition]

afterglow (59)in #tutorial • 6 years ago (edited)

This tutorial will use the coingecko.com "Price Ticker Widget". I'm only going to show on how to embed it in your website or any HTML document.

We will put a 30 seconds refresh rate into it so that it will auto update every 30 seconds.

Step 1

If you don't own a website you can create a HTML document by opening Notepad then choose "File -> Save As"

Name it as dashboard.html, choose "All files", choose "UTF-8" for universal text encoding compatibility and click "Save". DO NOT CLOSE IT.

Step 2

Type the following inside your HTML document that you just saved. The one with the numeral "30" will make your widgets to refresh every 30 seconds.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="30">
    <title></title>
</head>
<body>

</body>
</html>

Step 3

Go to https://www.coingecko.com/en/coins/steem-dollars/tools#panel click "EMBDED THIS PRICE WIDGET ON YOUR WEBSITE!" to generate and copy the widget that you want to embed.

Step 4

Choose "Select coin" if you want to change the coin. Select "Currency display for price" if you want to change the price type to be displayed. Copy the code genereted (I RECOMMEND THAT YOU USE THE SECOND CODE)

Step 5

Paste the code in between the body tags.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="30">
    <title></title>
</head>
<body>
PASTE THE CODE HERE
</body>
</html>

It should look like the one below now. Save it, then try to run it by double clicking the file itself.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="30">
    <title></title>
</head>
<body>
<a href="https://www.coingecko.com/en/price_charts/steem-dollars/php" target="_blank"><img alt="steem-dollars price" src="https://www.coingecko.com/en/widget_component/ticker/steem-dollars/php.jpg"></a>
</body>
</html>