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

<body>
  ...
  <script>
    var smartWallSDK = new SmartWallSDK({
      smartwallUid: "your-smartwall-uid",
      apiKey: "your-api-key",
      articleUid: "your-article-uid",
      articleSelector: "your-article-css-selector",
    });
  </script>
</body>

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 identifier 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 convenient. Instead of passing 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:

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

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

Preview Max Height

(only front-end)

It determines the maximum height in pixels of the article's preview content while it's locked by the wall.

Example:

previewMaxHeight: 300;

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.

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