Brand the Restricted Access Page

Customize the default page that users see when they try to access geo-blocked content

Updated over a week ago

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.

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 title = document.querySelector('.title-area')
description.innerText = ''
description.insertAdjacentHTML('afterbegin', markup)
title.innerText = ''
title.insertAdjacentHTML('afterbegin', newTitle)
setTimeout(() => detectRestrictedPage(), 500)
.not-found {
margin-top: 13vw !important;

.not-found .brand-logo {
max-height: 150px;

.not-found .error-image {
background: url( 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;

Last updated on Dec/10/2021

After inserting the sample code, your Restricted Access page will look like this:

Did this answer your question?