Skip to content

Back-end

Introduction

The back-end integration is the completely secure solution for implementing the SmartWall into your website. It builds on top of the front-end solution to provide an extra layer of security that makes the wall unavoidable. It works for every back-end language since we provide a RESTful API to communicate with SmartWall.

If your back-end programming language is PHP we recommend you use the PHP SDK instead.

How does it work ?

The principal issue with the front-end integration is that if the user blocks scripts before they run, there is no way to hide or lock the article's content.

How to avoid this issue ? Simple, don't send the full article content with your page. Instead you'll send a limited version of the article to the user and the full article content to SmartWall's cache. SmartWall will take care of sending the full article to the user when he or she unlocks the wall.

Upgrade from front-end integration

If you started the integration of SmartWall with the front-end method, you can keep the configuration of the JavaScript SDK and add a new parameter called mode, which value should be backend. After that, you can continue to the next section.

var smartWallSDK = new SmartWallSDK({
  smartwallUid: "your-smartwall-uid",
  apiKey: "your-api-key",
  mode: 'backend'
});

RESTful API

The SmartWall's API will provide you with the endpoints needed for this integration.

Its domain is https://api.smartwall.ai. From now on will assume this domain for all endpoints described.

Caching your article

First thing is to cache your article in SmartWall's API. This will allow SmartWall to send the article content only and just only when the user unlocks the wall some way or another, subscribing, micro-payment, watching an ad, etc.

Caching the article will be done within your article's page back-end code.

Check if article is already cached

Sending the whole article to the API and waiting for the response can take a significant time from your article requests. To avoid this problem, you should send the article only if necessary, so only when it's missing from SmartWall's cache. This endpoint will check if the article is in SmartWall's cache or not.

Endpoint:

GET /v2/articles/{articleUid}/is-cached

URL search params:

  • smartwallUid - UID of the SmartWall configured for your site.
  • md5 - md5 hash of the article content. If hash changed from last time the article was sent, then it will invalidate cache. This allows to update cache if article is updated.
  • apiKey - Key to access the API.

Returns:

200 HTTP code

{
  status: Boolean
}

Send article to SmartWall's cache

This endpoint will write the article content into SmartWall's cache.

Only send the article if it's not already cached. This way you can improve the performance of your page loading.

Endpoint:

POST /v2/articles/

Body:

  • apiKey - Key to access the API.

  • smartwallUid - UID of the SmartWall configured for your site.

  • articleUid - UID you create for this article.

  • content - Article's HTML content.

  • url - Article's URL

Returns:

204 HTTP code

{}

Truncating your article

Once you're sure the article is in SmartWall's cache, you need to truncate the article before rendering it and sending it to the user. The length of the article's preview you want to show is up to you.

How to truncate the article depends on your programming language. There are many resources on the internet on how to truncate strings, probably there are libraries for your programming language.

Include necessary front-end scripts

To work properly the SmartWall requires some JavaScript code. You need to integrate the SmartWall JS SDK, similar to how is done for the front-end integration. The main difference being that you need to add the parameter mode: 'backend'

Example:

<body>
  ...
    <script src="https://sdk.smartwall.ai/?v=2"></script>
    <script>
        var smartWallSDK = new SmartWallSDK({
            smartwallUid: "your-smartwall-uid",
            apiKey: "your-api-key",
            articleUid: "your-article-uid",
            articleSelector: "your-article-css-selector",
            mode: 'backend'
        });
    </script>
</body>

Showing the wall

Right after your truncated article you may want to show the SmartWall for the user to unlock the article. If the front-end JS SDK integration was done correctly the wall will appear at the bottom of the article once the JS SDK is loaded (which should take normally a few milliseconds). So nothing else to do.

However, if you find that the SmartWall takes a lot of time to kick off you may want to show a placeholder wall.

Placeholder wall

To add a placeholder wall to show until SmartWall is loaded, add the next code where you want to show the wall and change "your-wall-uid" to yours. You can customize the content and styling.

<div data-sw-wall="your-wall-uid">
  <!-- You can change the content to your liking -->
  <div style="text-align: center; font-size: 1.2rem; font-weight: 400; margin-top: 1.8rem">
    <p style=" margin-bottom: 1.8rem">Your article is taking more than usual to load.</p>
    <p style=" margin-bottom: 1.8rem">Hang in there...</p>
  </div>
</div>

When the SmartWall is loaded it will overwrite this element and show your SmartWall instead.

Alternative placement of the wall

The wall is placed by default at the bottom of the article, but you may want to place it somewhere else. It could be useful in cases where you don't lock the content of the article and just want to show some promotion or ad wall in the middle of the page.

To do it, you can add a data attribute indicating what SmartWall to place and where. Like in the next example where we are adding the wall in the middle of the article.

<div>
  Some article content
  <div data-sw-wall="your-wall-uid"></div>
  More article content
</div>

Extra options

There are more configuration options that can be pass to the front-end JS SDK.

Custom variables and metrics

Described in audience segmentation section.

Hooks

Described in Hooks section.

Language

Described in Localization section.

User UID

If your users are logged in your site, you can pass the unique ID to smartwall to track them cross-devices.

new SmartWallSDK({
  ...
  userUid: "your-user-uid",
});