STEEM Price Widget for HTML Websites

Hi everyone! This is my first development contribution on Utopian.io, and I'll be introducing a STEEM Price Widget I created here. It's an open-source HTML-based widget that allows you to add a Steem ticker to your website easily.

steem-price-widget-@mooncryption-opensource.png

Usage

To use the widget, simply add this line of code anywhere on your website:

<iframe src="https://mooncryption.github.io/steem-price-widget/widget.html" width="200px" height="150px" frameBorder="0"></iframe>

Right off the bat, you can customize the width and height to make it blend more with your site, however, width must be at least 200px and height must be at least 150px for optimal results.

Even more, you can change more in-depth properties such as the border, background, text, and more using URL Parameters as shown here.

Appearance

Currently, the widget looks like this:

As you can see, it's a blue-bordered rounded rectangle with a repeating/faded STEEM logo as the background. The price of STEEM is shown, centered, in a monospace/code font. The sources, credits, and terms are available at the bottom.

However, it's highly customizable. This means, by tweaking just a few URL Parameters as shown here, you can make it look like any of these:

Additionally, it's backwards-compatible. By adding the code shown above to your website, not only will the widget always work, but it will also automatically update itself when I add new releases. This means you'll always get the most pretty, most efficient, and highest performance widget.

Price Algorithm

The price algorithm is easy to change, but currently I'm relying on what I think is a uniquely accurate algorithm. The algorithm factors in unweighted price queries from three sources:

Bittrex.com - 1st Largest Steem Exchange
Poloniex.com - 2nd Largest Steem Exchange
Coinmarketcap.com - Price Aggregate (factors in unpopular exchanges and more)

The algorithm then outputs an unweighted average of these prices, rounded to the nearest $0.001.

With automatic/live updating, the price shown in the widget is always the most accurate representation. Every few seconds, the widget automatically queries these sources again for the most accurate and recent price, and computes the average price again. Additionally, you can click on the widget to manually force it to check these sources and compute the price again.

Coming Soon

Of course, the widget's an active work in progress and more work is to come soon! Remember that adding the widget to your site right now means that when more updates are pushed out, you'll receive it automatically too!

More URL Parameters! Right now, the border and background of the widget can be easily customized with URL Parameters, but there's more to come. Soon, the background image itself will be available to change, and the fonts of the price and text as well.
Customizable Algorithm If you want to use your own customized algorithm, upcoming versions will allow you to set the weights of different sources like Bittrex, Poloniex, and CoinMarketCap, and even more exchanges.
Minimalism Currently, the sources and credits at the bottom may distract from the actual price, so I plan to hide them in an information panel ("i") button. When you hover over that button, the credits/sources will pop out.
Contributions Appreciated Feel free to make pull requests or commits on Github! Additionally, feel free to give me feedback through https://utopian.io as well. Set the project name to mooncryption/steem-price-widget and write anything you want about it. All feedback is appreciated, and contributions/pull requests are even more gracious.

Conclusions

To learn more about how to use the widget for your website, visit the widget's site here! Thanks to Utopian you can easily add contributions to my project and help us all succeed even more!

Thanks for reading,
— @mooncryption

image sources: first, all
proof of work: widget website includes link to @mooncryption

Open Source Contribution posted via Utopian.io