Extending the dashboard

Search…

Sometimes you might want to add or remove information from your dashboard, or automate specific tasks. 
Currently the dashboard extensibility is not a priority, so there are no tools or callbacks provided.
Adding custom CSS/JS using a browser extension
You can use a browser extension such as User JavaScript and CSS (for Chrome) to automatically executed custom JavaScript on your dashboard.
Examples:
1. Making the flags clickable (view IP geolocation info)
Let's assume you want to make it so that when you click the country flag next to an user IP (in the visitors list) it opens a new tab with the geolocation information of that IP.
One basic solution would be: 
Every 2 seconds, find all IP td  elements in the table
Get the IP from the value of the td 
Make onclick handler of the flag icon open a new tab to a geolocation of that IP.
This will only work if IP hashing and IP censoring are disabled in the settings, otherwise there is no way to know the IP of the user.
For your userTrack dashboard URL, add this code in the extension 
function makeFlagsClickable() {
    const IPchips = document.querySelectorAll('.MuiTableRow-root td:nth-child(3)');
    for(node of IPchips) {
        const IP = node.getAttribute('value');
        const a = node.querySelector('a');
        const flag = a.previousSibling;
        flag.style.cursor = 'pointer'
        flag.style.outline = '2px dashed lightblue';
        const geoIPURL = 'https://whatismyipaddress.com/ip/' + IP;
        flag.title = geoIPURL;
        flag.onclick = function() {
            window.open(geoIPURL, '_blank').focus();
        }
    }
}
setInterval(makeFlagsClickable, 2000);
So it will look like:
​

The A/B test JS file is missing

Next - Guides

Support

Last modified 9mo ago

Copy link

Outline

Adding custom CSS/JS using a browser extension

1. Making the flags clickable (view IP geolocation info)