When your users try to access content that is geo-blocked in their location, they will land on the /not_available page.
To brand your Restricted Access page, you can add the following code with your modifications to the Head Code section of the Code Snippets. The Restricted Access page will display your site's logo by default and will be displayed when your users try to access any geo-blocked page on your site.
NOTE: If you wish to customize this further and aren't familiar with basic HTML/CSS, you'll need to hire a developer.
<script>
let detectRestrictedPage = () => {
if (document.location.href.includes('/not_available')) {
let notFoundContainer = document.querySelector('.not-found')
if (notFoundContainer) {
if (!notFoundContainer.classList.value.includes('touched')) {
let markup = 'ADD YOUR OWN TEXT HERE'
let description = document.querySelector('.not-found .description')
let newTitle = 'ADD YOUR TITLE TEXT HERE'
let title = document.querySelector('.title-area')
description.innerText = ''
description.insertAdjacentHTML('afterbegin', markup)
title.innerText = ''
title.insertAdjacentHTML('afterbegin', newTitle)
notFoundContainer.classList.add('touched')
}
}
}
setTimeout(() => detectRestrictedPage(), 500)
}
detectRestrictedPage()
</script>
<style>
.not-found {
margin-top: 13vw !important;
}
.not-found .brand-logo {
max-height: 150px;
}
.not-found .error-image {
background: url(https://s3.amazonaws.com/unode1/assets/9224/Rh74UFFATPqZhVf7bqeJ_geoblocked.png) no-repeat;
width: 400px;
/* Width of new image */
height: 400px;
/* Height of new image */
padding-left: 400px;
/* Equal to width of new image */
}
.not-found .title-area,
.not-found .description {
font-size: 0;
}
.not-found.touched .description {
font-size: 20px;
text-align: center;
max-width: 800px;
}
.not-found .description {
margin-top: 10px;
}
</style>
Last updated on Dec/10/2021
After inserting the sample code, your Restricted Access page will look like this:
