UXWizz (formerly userTrack)
Search…
📖
Guides
🔧
JavaScript API
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
tdelements in the table - Get the IP from the
valueof thetd - Make
onclickhandler 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
1
function makeFlagsClickable() {
2
const IPchips = document.querySelectorAll('.MuiTableRow-root td:nth-child(3)');
3
for(node of IPchips) {
4
const IP = node.getAttribute('value');
5
const a = node.querySelector('a');
6
const flag = a.previousSibling;
7
flag.style.cursor = 'pointer'
8
flag.style.outline = '2px dashed lightblue';
9
const geoIPURL = 'https://whatismyipaddress.com/ip/' + IP;
10
flag.title = geoIPURL;
11
flag.onclick = function() {
12
window.open(geoIPURL, '_blank').focus();
13
}
14
}
15
}
16
setInterval(makeFlagsClickable, 2000);
Copied!
So it will look like:
Last modified 1mo ago