Coinhive
Simple Miner UI
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.
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.
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>