Skip to content

Geolocation

On this page:

Loading...

Customize content based on the location of the visitor.

CloudCannon Hosting automatically injects the viewers country code into the HTML elements class as it is served.

You can enable geolocation in Site Settings / Routing.

Screenshot of Routing Interface

If a viewer is from New Zealand, the class country-nz is added to look like this:

index.html
<html class="country-nz">

Use CSS to show and hide elements:

styles.css
.new-zealand-content {
  display: none;
}

.country-nz .new-zealand-content {
  display: block;
}

Run custom JavaScript based on country code:

script.js
var htmlElement = document.documentElement,
  countryClass = htmlElement.className.match(/\bcountry\-([a-z0-9]{2})\b/);

if (countryClass) {
  console.log(countryClass[1]); // logs your country code - check your console
} else {
  console.log("No country found :(");
}

Here are the country code supported:

On this page:

Loading...

Don’t miss the latest
CloudCannon news freshly delivered to your inbox