Skip to content

Javascript

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.

SDK v1 will be deprecated in the coming months, we suggest that you update your integration to SDK v2. More in Upgrading to v2.

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'
});

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 behavior 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'
    }
});

Hook after Initialization

You can use a JavaScript hook 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);

    }

});

Hook after an article has been unlocked

You can use a JavaScript hook 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);

    }

});