# Code Snippets

<details>

<summary>Conditionally Change CSS Variable</summary>

```javascript
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

    }

});
```

</details>

<details>

<summary>Conditionally Change Text Content</summary>

```javascript
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;

  }

});
```

</details>

<details>

<summary>Change App Download Link Based on OS</summary>

```javascript
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;

  }

});
```

</details>

<details>

<summary>Populate List of Provinces/States Based on Chosen Country</summary>

```javascript
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;

    }

  });

});
```

</details>

<details>

<summary>Wait for Cookiebot Consent to Run Geoflow</summary>

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

Visit the [Cookiebot Developer Resources](https://www.cookiebot.com/en/developer/) for more information on using the CookiebotCallback\_OnAccept callback to run Geoflow manually.

</details>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers.getgeoflow.com/geoflow-docs/advanced/code-snippets.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.