Documentation » Simple Miner UI

Overview

This page explains how to display and customize the Coinhive Miner User Interface on your page.

The Simple Miner UI is loaded as an IFrame into a <div> element on your page. You can control the display size of the miner, as well as the colors and branding.

Please disable Adblock!
Demo of the Simple Miner UI in banner format, showing a custom color scheme

Embedding

To embed the Coinhive Miner UI, you have to load the simple-ui.min.js anywhere on your page and create a <div> with the coinhive-miner class where you want to show the miner.

Be sure to replace YOUR_SITE_KEY with your public site key. You can find your public site key in your Settings.

The text in this <div> (Loading...) will be replaced by the Miner UI itself once it's loaded. You can customize it if you want.

Note that the Miner UI is loaded from a different domain (authedmine.com) that disables the autostart on first use to avoid adblockers. See our AuthedMine documentation for the details.

<script src="https://authedmine.com/lib/simple-ui.min.js" async></script>
<div class="coinhive-miner" 
	style="width: 256px; height: 310px"
	data-key="YOUR_SITE_KEY">
	<em>Loading...</em>
</div>

Customizing

You can specify the display size of the Miner UI in the style attribute. The Miner UI works well in a lof of different sizes. It may hide some elements if there's not enough room to show them, but it will always remain functional.

For instance, it may be a good idea to replace one of your ad banners with the Miner UI. Common banner formats supported by the Miner UI are: 300×250, 160×600, 336×280, 728×90 etc.

To further customize the look and behavior of the Miner UI, you can specify various options as data- attributes with the div element. Only the data-key attribute is mandatory. All other attributes are optional.

Please disable Adblock!

If the user has already configured the number of threads and throttle to use, the miner will remember their choices. The data-threads and data-throttle attributes only provide a default for the first start of the miner.

data-key Your public Site-Key. See Settings » Sites.
data-user Optional. The user name to which the hashes will be credited to. Just leave this empty if you are unsure.
data-autostart Optional. Whether to automatically start mining (true|false). The default is false. The miner will only autostart on subsequent page loads after the user has initially started the miner once himself. See our AuthedMine documentation for the details.
data-whitelabel Optional. Whether to hide the Powered by Coinhive text (true|false). The default is false.
data-background Optional. The background color for the UI as 3 or 6 digit HEX color code. E.g.: #000000 for black, #ff0000 for red. Try htmlcolorcodes.com to find the right colors.
data-text Optional. The text color for the UI as 3 or 6 digit HEX color code. E.g.: #000000 for black or #ff0000 for red. Try htmlcolorcodes.com to find the right colors.
data-action Optional. The action color for the UI as 3 or 6 digit HEX color code. E.g.: #000000 for black or #ff0000 for red. Try htmlcolorcodes.com to find the right colors.
data-graph Optional. The graph color for the UI as 3 or 6 digit HEX color code. E.g.: #000000 for black or #ff0000 for red. Try htmlcolorcodes.com to find the right colors.
data-threads Optional. The number of threads the miner should start with.
data-throttle Optional. The throttle value the miner should start with. See miner.setThrottle() for a detailed explanation.

Full example with green color scheme

<script src="https://authedmine.com/lib/simple-ui.min.js" async></script>
<div class="coinhive-miner" 
	style="width: 256px; height: 310px"
	data-key="YOUR_SITE_KEY"
	data-autostart="true"
	data-whitelabel="false"
	data-background="#000000"
	data-text="#eeeeee"
	data-action="#00ff00"
	data-graph="#555555"
	data-threads="4"
	data-throttle="0.1">
	<em>Loading...</em>
</div>

Advanced Usage – Event Listeners

All events from the JavaScript API are forwarded to the Simple Miner UI. Since the simple-ui.min.js is loaded asynchronously, you have to wait until it's loaded to install your event listeners. Use the global onCoinHiveSimpleUIReady function to do so.

Example

<script>
	var onCoinHiveSimpleUIReady = function() {
		CoinHive.Miner.on('authed', function(params) {
			console.log('Simple UI has authed with the pool');
		});
		CoinHive.Miner.on('job', function(params) {
			console.log('New job received from pool');
		});
	}
</script>
<script src="https://authedmine.com/lib/simple-ui.min.js" async></script>
<div class="coinhive-miner" 
	style="width: 256px; height: 310px"
	data-key="YOUR_SITE_KEY">
	<em>Loading...</em>
</div>