Brand the Restricted Access Page | Help

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.

You can access code snippets by going to Website > Clicking on Advanced under the editor side panel:

And then scrolling down to Customizations and click on Head code:

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:

Brand the 404 Page