Code Snippets

Expand upon Geoflow's standard offerings with a little JavaScript.

Conditionally Change CSS Variable

const root = document.documentElement;

const CSSvariable = 'primary-color';

window.addEventListener('geoflowReady', function () {

    const visitorCountry = geoflow.countryName;

    // If the Visitor's Country Name Cannot Be Detected, Stop the Script
    
    if (!visitorCountry){

    console.error('Unable to detect the visitor\'s country name.');
    return;
      
    }

    if (visitorCountry === 'United States') { // If Visitor is from the US

        root.style.setProperty(`--${CSSvariable}`, '#1e88e5'); // Set the Primary Color to Blue

    } else if (visitorCountry === 'Canada') { // If Visitor is from Canada

        root.style.setProperty(`--${CSSvariable}`, '#f44336'); // Set the Primary Color to Red

    }

});

Conditionally Change Text Content

window.addEventListener('geoflowReady', function () {

  // Get the Country Name of the Visitor
  const visitorCountry = geoflow.countryName;

  // If the Visitor's Country Name Cannot Be Detected, Stop the Script
  if (!visitorCountry){

    console.error('Unable to detect the visitor\'s country name.');
    return;
      
  }

  // Add the ID for the Element You Want to Change the Text Content of
  const personalizedGreeting = document.getElementById('personalized-greeting');

  // Conditionally Change the Text Content of the Element
  switch (visitorCountry) {

    case 'Australia': // If the Visitor is in Australia
      personalizedGreeting.textContent = `G'Day Mate!`;
      break;
      
    case 'New Zealand': // If the Visitor is in New Zealand
      personalizedGreeting.textContent = `Kia ora!`;
      break;
      
    case 'Canada': // If the Visitor is in Canada
      personalizedGreeting.textContent = `How's It Goin', Eh?`;
      break;

    case 'United Kingdom': // If the Visitor is in the UK
      personalizedGreeting.textContent = `Fancy a Cuppa?`;
      break;

    default: // If the Visitor is in Any Other Country, Do Nothing
      break;

  }

});

Change App Download Link Based on OS

window.addEventListener('geoflowReady', function () {

  // Get the Operating System of the Visitor
  let visitorOS = geoflow.OS;

  // If the Visitor's OS Cannot Be Detected, Stop the Script
  if (!visitorOS){

    console.error('Unable to detect the visitor\'s operating system.');
    return;
  
  }

  // Add the ID for the Link You Want to Change
  const downloadAppLink = document.getElementById('download-app-link');

  // Create a Regular Expression for Mac OS
  const macOSRegex = /(Mac OS|Mac OS X|MacPPC|MacIntel|Mac_PowerPC|Macintosh)/i; // Use 'i' flag for Case-Insensitivity
  visitorOS = macOSRegex.test(visitorOS) ? 'Mac OS' : visitorOS; // If the Visitor's OS Matches the Regular Expression, Change the OS Name to 'Mac OS'

  // Conditionally Change the Link
  switch (visitorOS) {
      
    case 'iOS': // If the Visitor is on iOS
      downloadAppLink.href = `https://example.com`;
      break;

    case 'Mac OS': // If the Visitor is on Mac OS
      downloadAppLink.href = `https://example.com`;
      break;

    case 'Android': // If the Visitor is on Android
      downloadAppLink.href = `https://example.com`;
      break;

    case 'Windows': // If the Visitor is on Windows
      downloadAppLink.href = `https://example.com`;
      break;

    default: // If the Visitor is on Any Other OS, Do Nothing
      break;

  }

});

Populate List of Provinces/States Based on Chosen Country

document.addEventListener('DOMContentLoaded', function () {

  // Add the ID for Your <select> Element Where A Country Is Chosen
  const chooseCountrySelect = document.getElementById('choose-country');

  chooseCountrySelect.addEventListener('change', function () {
    
    // Get the Chosen Country
    const chosenCountry = chooseCountrySelect.options[chooseCountrySelect.selectedIndex].value;

    switch (chosenCountry) {

      case 'australia':
        geoflow.select('#choose-state', 'au-states-and-territories', 'Choose Your State/Territory');
        break;

      case 'canada':
        geoflow.select('#choose-state', 'ca-provinces-and-territories', 'Choose Your Province/Territory');
        break;

      case 'united-states':
        geoflow.select('#choose-state', 'us-states', 'Choose Your State');
        break;

      default:
        break;

    }

  });

});

Wait for Cookiebot Consent to Run Geoflow

function CookiebotCallback_OnAccept() { geoflow.run(); }

Visit the Cookiebot Developer Resources for more information on using the CookiebotCallback_OnAccept callback to run Geoflow manually.