Extending the dashboard

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 UXWizz 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: