Skip to content

Introduction

The JavaScript SDK is the most simple way to implement the SmartWall into your website. It is fine for a first version but we do recommend to implement a backend version further in your development process.

Add the SDK in your HTML file

To be able to use the SmartWall JavaScript SDK you must add the script located at the following URL https://sdk.smartwall.ai/?v=1 into your website. To do so here is an example of how to do it:

<html>
    <head>
        ...
        <script src="https://sdk.smartwall.ai/?v=1"></script>
    </head>
    <body>
        ...
    </body>
</html>

Once the script has been included we can initialize the SmartWall on your website.

Paywall behavior: The SmartWall acts as a paywall and unlocks the content itself

Once your SmartWall is properly set up in the dashboard you just need to provide your smartwall ID to use it.

new SmartWallSDK({
    smartWallId: 'your-smartwall-id'
});

Multi-languages

The SmartWall user interface handles multiple languages. When initializing the SmartWall you can specify the language you want the SmartWall to be displayed with. Currently available languages are:

  • English en
  • French fr
  • German de
  • Italian it
  • Spanish es
  • Portuguese pt
  • Japanese ja

If you want to use a language not yet implemented, please contact us and we will add it for you.

new SmartWallSDK({
    smartWallId: 'your-smartwall-id',
    language: 'fr'
});

Payment method behavior:

You can use the SmartWall as a payment method only. It means the SmartWall will not block the content for you and will send a token to a callback URL of your choice (configured via the dashboard). You can add a userId and an articleId parameter when initializing the SmartWall. These parameters will be used in the token to identify the article to unlock for each user.

The token you will receive is a JSON Web Token signed with the secret encrypted key that you can find on your dashboard.

new SmartWallSDK({
    smartWallId: 'your-smartwall-id',
    userId: 123456,
    articleId: 123456
});

The token will be send as a GET parameter called token and will look like this eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiIxMjM0NTYiLCJhcnRpY2xlSWQiOiIxMjM0NTYiLCJ0eXBlIjoidmlkZW8iLCJpYXQiOjE1MDEyNDQyOTksImV4cCI6MTUwMTI0NDM1OSwiaXNzIjoiU3dpc3NQYXkifQ.ehWNyCZ-qwxjRTOUfbWz4wH2FWKHKElmdeBHuG0y0Hc

Once decoded with base64 it will contain information like the following.

{
  "userId": "123456",
  "articleId": "123456",
  "numberArticle": 1,
  "type": "video",
  "iat": 1501244299,
  "exp": 1501244359,
  "iss": "SwissPay"
}

If the signature is valid and the token has not expired you can grant the access to the user.

Call back after Initialization

You can use a JavaScript callback called after the initialization. A variable is passed containing information about the status of the SmartWall. The variable contains the following information:

{
    "accessGranted": true, // true or false
    "type": 'payment', // 'payment' or 'video'
    "articleId": 'your article ID', // string or integer
}
new SmartWallSDK({
    smartWallId: 'your-smartwall-id',
    initComplete: function(data) {
        console.log('initComplete data =>', data);
    }
});

Call back after an article has been unlocked

You can use a JavaScript callback called after an article is unlocked. A variable is passed containing the articleWrapper

new SmartWallSDK({
    smartWallId: 'your-smartwall-id',
    articleUnlocked: function(articleWrapper) {
        console.log('article unlocked. see content in =>', articleWrapper);
    }
});

(Payment method) Override callback after an unlock (video or payment)

When you use the SmartWall as a payment method, the SmartWall will call your callback URL after a successful unlock. If you want to change the behavior of that call you can change it line in the following example:

new SmartWallSDK({
    smartWallId: 'your-smartwall-id',
    onCallback: function(token, callbackUrl) {
        console.log('token', token); // this will output the callback token
        console.log('callbackUrl', callbackUrl);  // this will output the callback URL
    }
});

Optimize the protection

By using the FrontEnd SDK you might experience slower initialization. To optimize content obfuscation you can use the option protectAreaSelector to define the area the SmartWall should hide until the load is completed.

To have the 100% secure and optimized solution, we highly recommend to use the backend SDK.

new SmartWallSDK({
    smartWallId: 'your-smartwall-id',
    protectAreaSelector: '#protect-area-selector',
});

Place SmartWall elements manually

You can place the SmartWall elements manually on your webpage. The SmartWall is made of 3 sections:

  • The Wall Where users can pick an option (watch video or pay)
  • The video player Hidden by default unless you decide to watch the video

By default the SmartWall will use the article selector specified by you in the dashboard. Otherwise you can use these three options: smartWallAreaSelector, smartWallAreaSelector, videoAreaSelector. And specify for each of them a CSS selector. SmartWall elements will be appended to the area.

Because the elements are defined separately and the SmartWall won’t have the default behaviour you can use two callback functions called onVideoShow and onVideoHide. This will allow you for example to hide The Wall while the video is playing and show it back when the video stopped.

new SmartWallSDK({
    smartWallId: 'your-smartwall-id',
    smartWallAreaSelector: '#smartwall-area-selector',
    videoAreaSelector: '#video-area-selector',
    onVideoShow: function() {
        console.log('on video show was called');
    },
    onVideoHide: function() {
        console.log('on video hide was called');
    }
});

Multiple SmartWall on the same page

In case you have multiple article on the same page. Or if you load a new article each time you scroll down on your website you will need to display multiple SmartWall on the same page.

To do so each element will need a separate CSS class or ID. See the following code as an example:

new SmartWallSDK({
    smartWallId: 'your-smartwall-id',
    multiple: true,
    selectorCSS: '#article .article-1'
});

Custom Metrics

You can send your own metrics and value to the SmartWall system. You will be able to use them to sort your audience and optimize your results. In order to send metrics you need to use the following code:

new SmartWallMetric({
    name: 'name-of-your-metric',
    value: 10 // optional, by default the value is set to 1
});

Custom Variables

Unlike the custom metrics, custom variables are not time based. They are set during the initialization of the SmartWall with a fixed value. You will be able to use it to sort your audience and optimize your results. In order to use it use the following code:

new SmartWallSDK({
    smartWallId: 'your-smartwall-id',
    customVariables: { // custom variables can be of type: boolean, string and integer
        whatever: true,
        something: 123,
        anything: 'whatever'
    }
});