Console

The Console allows directly adding HTML code into both your website's <head> and <body> tags.

The code added in the console is injected and run during the website's loading. This injection will work on most browsers, but there may be some limitations for this method using old crawlers and browsers.

As an example, adding the following code into the <head> and <body> sections of the console tab will find a Google font and apply it to all text on the exchange.

Meta Tags

Cloud exchanges have an SEO section. Adding custom SEO-specific code there is recommended over the process outlined here. This is because Cloud SEO is added statically during the exchange build process and is embedded in the website.

For On-Premise operators, SEO tags can be added in the head section.

For a more in-depth description of header tags, W3Schools has good explanations of what can be added:

Styles

HTML can be used to alter the specific styles on the page as well, using both the head and body.

<head>

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster">

<body>

 <style>
 
* {
  font-family: "Lobster", sans-serif;
}

</style>

And here we can compare the two fonts:

Before

After

More Complex Injections

Above is a fairly simple (but still useful) snippet of code. This could of course be extended to any form of style editing that you desire. For example the following piece of code:

<script>
function open(url) {
	const a = document.createElement('a');
	a.style = 'display: none';
	a.href = url;
	a.target = '_blank';
	a.rel = 'noopener noreferrer';

	document.body.appendChild(a);
	a.click();
	document.body.removeChild(a);
};

function addItem(id) {
var menu = document.getElementsByClassName('app-menu-bar')[0];
if (id && menu) {
var item = document.createElement('div');
item.id = id;
item.onclick = function () { open('https://etherscan.io/'); };
item.classList.add('app-menu-bar-content', 'd-flex');
var content = document.createElement('div');
content.innerHTML = 'EtherScan';
content.classList.add('app-menu-bar-content-item', 'd-flex');
item.appendChild(content);
menu.appendChild(item);
}
}

function checkMenuItem(id) {
    if (id) {
        if (!document.getElementById(id)) {
            addItem(id)
        }
    }
}

checkMenuItem('etherscan');

setInterval(function() {
    checkMenuItem('etherscan')
}, 1000);
</script>

Will add a direct link in the header to EtherScan.

PreviousOperator Controls (Visuals)NextPlugins

Last updated 2 years ago