Skip to content

Front-end

Introduction

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 https://sdk.smartwall.ai/?v=2 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:

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

Initialize SmartWall SDK

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

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

Where:

  • 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.

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

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.

Language

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.

Example:

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.

Example:

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.

Example:

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

Hooks

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

onReady

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

Params:

  • context { access: boolean, isMobile: boolean, error: any }

Example:

// You can setup the hook in the constructor
var swSdk = new SmartWallSDK({
  // ... Your other sdk params
  onReady: function (context) {
    // ... Your hook code
  }
});

// Or you can set it up with the "on" function
swSdk.on('ready', function(context) {
  // ... Your hook code
})

onUnlock

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

Example:

// You can setup the hook in the constructor
var swSdk = new SmartWallSDK({
  // ... Your other sdk params
  onUnlock: function () {
    // ... Your hook code
  }
});

// Or you can set it up with the "on" function
swSdk.on('unlock', function() {
  // ... Your hook code
})

onPaymentStart

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

Example:

// You can setup the hook in the constructor
var swSdk = new SmartWallSDK({
  // ... Your other sdk params
  onPaymentStart: function (data, error) {
    // ... Your hook code
  }
});

// Or you can set it up with the "on" function
swSdk.on('paymentStart', function(data, error) {
  // ... Your hook code
})

onError

You can pass a function that will run when there's any error on the smartwall.

Params:

  • error

Example:

// You can setup the hook in the constructor
var swSdk = new SmartWallSDK({
  // ... Your other sdk params
  onError: function (error) {
    // ... Your hook code
  }
});

// Or you can set it up with the "on" function
swSdk.on('error', function(error) {
  // ... Your hook code
})

onSubscribed

You can pass a function that will run when the user subscription is detected.

Params:

  • userInfo {name: string, locale: string, access: boolean}

Example:

// You can setup the hook in the constructor
var swSdk = new SmartWallSDK({
  // ... Your other sdk params
  onSubscribed: function (userInfo) {
    // ... Your hook code
  }
});

// Or you can set it up with the "on" function
swSdk.on('subscribed', function(userInfo) {
  // ... Your hook code
})

customUnlock

You can pass a function that will overwrite the unlocking behaviour of the smartwall. This way you can have full control on how the article is unlocked. A token is passed to the hook, you can use it to validate that the unlocking petition is coming from smartwall.

Params:

  • token string

Example:

// You can setup the hook in the constructor
var swSdk = new SmartWallSDK({
  // ... Your other sdk params
  onCustomUnlock: function (token) {
    // ... Your hook code
  }
});

// Or you can set it up with the "on" function
swSdk.on('customUnlock', function(token) {
  // ... Your hook code
})