UXWizz
WebsitePricingDemoTwitter (X)
  • Introduction
  • 🛠️ Installation
    • Requirements
      • Limitations
      • Server specs (CPU, RAM)
    • Installation guide
      • Uploading the script
      • Creating a MySQL database
      • Running the installer
    • Install on a new server
      • Ubuntu 20.04 (or higher)
      • DigitalOcean
    • Docker
      • Via Docker Compose
      • Standalone Docker image
    • Adding the tracking code
      • Automatic SPA pageview tracking
      • Add tracker to Next.js App
      • Add tracker to React Router App
    • Optimization tips
      • MySQL/MariaDB
      • Auto-delete old data (cron jobs)
      • Apache
    • Frequently Asked Questions
  • 🔧JavaScript API
    • Tags
    • Events
    • Hooks/callbacks
    • Other API functions
    • Session Recording
      • Ignore specific elements
  • 📖Guides and features
    • Goals (NEW!)
    • Ask AI (NEW!)
    • Basic usage
    • A/B testing
    • Usage tips
    • Dashboard user access level
    • Resetting the admin password
    • Database querying
    • Technical details
      • IP Geolocation
    • Troubleshooting
      • Agency
        • MultiDB
      • Dashboard
        • Refreshing dashboard sub-page leads to 404 error
        • Website iframe not loading (x-frame-options)
        • License says "invalid"
        • Updating Fails
      • Tracking
        • No data is being recorded
        • Can't include tracker via Google Tag Manager
        • The A/B test JS file is missing
      • WordPress
        • Cloudways 403 Forbidden screen on WordPress
        • NGINX 403 Forbidden screen on WordPress
    • Extending the dashboard
    • Support
    • Migrating to a new server
  • 🎓Useful Examples
    • Feedback form (polls)
    • Tracking 404 Pages
    • Tracking UTM parameters
    • Tracking Google Ads GCLID
    • Storing user device types
    • Track video playback
  • 📜About
    • Changelog
    • Personal Data Information
    • Privacy Policy (uxwizz.com)
    • Licenses and pricing
    • [Deprecated] License Subscriptions
Powered by GitBook
On this page
  • Adding custom CSS/JS using a browser extension
  • 1. Making the flags clickable (view IP geolocation info)

Was this helpful?

  1. Guides and features

Extending the dashboard

PreviousNGINX 403 Forbidden screen on WordPressNextSupport

Last updated 1 year ago

Was this helpful?

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

📖
User JavaScript and CSS (for Chrome)