Skip to content



The front-end integration is the most simple way to implement the SmartWall into your website. Its only disadvantage is that it has no protection against script blockers. Still it can be a valid option for most use cases.

For a completly secured solution you can always upgrade to back-end integration. You'll keep your SmartWall configuration the same after the upgrade.

We provide a JavaScript SDK that will handle everything for you.

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 into your website. We recommend to load the script in the head of the page so it can lock the article's content as soon as possible. Although if you plan to upgrade to back-end integration, you can load the script at the bottom of the body of the page with no drawbacks.

To do so here is an example of how to do it:

    <script src=""></script>

Initialize SmartWall SDK

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

  <script src=""></script>
    new SmartWallSDK({
      smartwallUid: "your-smartwall-uid",
      apiKey: "your-api-key",
      articleUid: "your-article-id",
      articleSelector: "your-article-css-selector",


  • smartwallUid is the UID of the SmartWall created in your account.

  • apiKye is key provided to you in the Dashboard.

  • articleUid is an unique indetifier of the article shown.

  • articleSelector is a CSS selector of the article to be locked by the wall.

That's all! The SDK will take it from here and show your SmartWall as you configured it on the Dashboard.

Alternative initialization

There's another way to initialize the SDK that you may find more convinient. Instead of passing articleUid and articleSelector to the constructor, you can add a data attribute to your article's wrapper element like:

<div data-sw-article="your-article-uid"> article's content... </div>

So the initialization of the SDK will look like:

new SmartWallSDK({
  smartwallUid: "your-smartwall-uid",
  apiKey: "your-api-key",

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.

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.

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

Registered users

SmartWall works for anonymous users, and this is great to attract new users to your site, but in some cases this could limit the posibilities of SmartWall. For example, anonymous users can't keep access to an article cross-devices, or users can lose access if they wipe cookies.

However, there's a solution. If your users can log-in in your site you could pass the user's ID to SmartWall. Just add it to the SmartWall SDK constructor as userUid. It has to be unique per SmartWall.

new SmartWallSDK({
  userUid: "your-user-uid",

Extra options

There are more configuration options that can be pass to the SDK.


The SmartWall user interface handles multiple languages. It will detect the user's browser language and show it in that language if available. However, you may want to always show the same language. To do that add the language code to the SDK.

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.


language: "fr";

Preview Max Height

(only front-end) It determines the maximun height in pixels of the article's preview content while it's locked by the wall.


previewMaxHeight: 300;

Custom Variables

The SmartWall has an advanced audience segmentation tiik where you can set up rules to segmentate your audience. With custom variables, you can create custom rules based on their value. Pass the custom variables to the SDK and configure rules based on them in the Dashboard.


customVariables: {
    var1: 1,
    var2: false,
    var3: 'ch'

Custom Metrics

You can send your own metrics to the SmartWall system. You will be able to use them to sort your audience in the audience segmentation tool of the Dashboard.

To send metrics call the SDK function sendCustomMetric. Example:

var swSdk = new SmartWallSDK({
  // ... Your sdk options
var metricName = "your-metric-name";
var value = 1;
swSdk.sendCustomMetric(metricName, value);


You can configure hooks in the SDK to run your code in response to SmartWall's events.


You can pass a function that will run after the SmartWall is loaded and displayed with your configuration.


onReady: function () {
  console.log('onReady hook');


You can pass a function that will run after the SmartWall is unlocked by the user.


onUnlock: function () {
  console.log('onUnlock hook');


You can pass a function that will run when the user starts a micro-payment in the SmartWall.


onPaymentStart: function (paymentData, error) {
  console.log('onPaymentStart hook', paymentData);