How to restrict access to certain content on site

How it works

You can hide content on your site from different groups of users if the site has unique content that is provided by subscription, you want to attract more user attention to the game or make your site more secure. Access restriction is configured in one of the following ways:

How to get it

Prerequisites

  1. Open your project in Publisher Account.
  2. Click Site Builder in the side menu.
  3. Click Open Site Builder in the site pane.

  1. In the Header block, add the Login component and select the login project that you use to store user data from the drop-down list.

Restricting access with custom HTML code

You may use an existing solution or add your own code.

Using an existing solution

  1. In the Builder, click Add block and choose Custom code.

  1. Insert the following code to the block:

Copy
Full screen
Small screen
<script>
  (function () {
    var blockArray = [
      {
        blockName: '.block--packs',
        blockNumber: 0
      },
      {
        blockName: '.block--description',
        blockNumber: 0
      }
    ];

    function checkAuth(authToken) {
      function handleBlock(hide) {
        setTimeout(function () {
          blockArray.map(function (block) {
            return document.querySelectorAll(block.blockName)[block.blockNumber];
          })
            .forEach(function (element) {
              if (element) {
                element.style.display = hide ? 'none' : 'block';
              }
            });
        }, 0);
      }

      var token = /xsolla_login_token_sb=(.*);?/.exec(document.cookie);
      token = token && token[1] || authToken;
      if (!token) {
        handleBlock(true);
        return;
      }
      var info = JSON.parse(atob(token.slice(token.indexOf('.') + 1, token.lastIndexOf('.'))));
      var isAuth = Date.now() / 1000 < info.exp;
      if (!isAuth) {
        handleBlock(true);
        return;
      }
      handleBlock(false);
    }

    checkAuth();
    window.addEventListener('sb_xsolla_login_success', function (e) {
      checkAuth(e.detail);
    });
  })();
</script>

  1. In the blockArray array, modify the following parameters for each block you want to hide from users:
    • blockName — the name of the CSS class of the block. Possible options are:
      • .block--header (the Header block)
      • .block--hero (the Call-to-action block)
      • .block--html (the Custom code block)
      • .block--packs (the Packs block)
      • .block--description (the Description block)
      • .block--gallery (the Gallery block)
      • .block--requirements (the System requirements block)
      • .block--faq (the FAQs block)
      • .block--embed (the Social media widgets block)
      • .block--news (the News block)
      • .block--footer (the Footer block)
    • blockNumber — the sequence number of the block. Minimum value is 0.
  2. Click Preview to see your changes.

Watch the tutorial video for this instruction:


Adding your own code

  1. In the Builder, click Add block and choose Custom code.

  1. Insert your own code to the block.

Restricting access by using subscriptions to content

To restrict access to a block using a subscription:

  1. Set up one or more subscription plans.
  2. Click Site Builder in the side menu.
  3. Click Open Site Builder in the site pane.
  4. Go to the settings of the block you want to restrict access to.
  5. In the Who can see this block field, select one or more subscriber groups. After the changes are published, the block will be hidden for nonauthorized users, as well as for authorized users who have not purchased a subscription to the selected plans.

Note
The restriction can be set for all blocks, except for the Header, Footer, Promo Slider and Custom Code.

  1. Check how the hidden blocks are displayed with the restriction settings. Click the Preview button and select a subscriber group from the drop-down list on the top menu.

An example of a hidden block that is available to one group of subscribers

An example of a hidden block that is available to multiple subscriber groups

Was this article helpful?
Thank you!
Is there anything we can improve? Message
We’re sorry to hear that
Please explain why this article wasn’t helpful to you. Message
Thank you for your feedback!
We’ll review your message and use it to help us improve your experience.
Rate this page
Rate this page
Is there anything we can improve?

Don’t want to answer

Thank you for your feedback!

Useful links

Last updated: July 20, 2021

Found a typo or other text error? Select the text and press Ctrl+Enter.

Report a problem
We always review our content. Your feedback helps us improve it.
Provide an email so we can follow up
Thank you for your feedback!