Skip to content

PHP

Introduction

If your back-end programming langue is PHP the PHP SDK is the most efficient way to secure the access to your articles through the SmartWall.

Add the SDK in your PHP code

The PHP SDK is available through composer for download on packagist. To install the package, use the following command:

    composer require smartwall/sw-php-sdk @stable

You can then add the SmartWall PHP SDK Library into your code using the namespace like this:

<?php
    use SmartWall\SDK\SmartWallSDK;
?>

Set up your SmartWall

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

Initialization

Once your SmartWall is properly set up in the dashboard you can instantiate a SmartWallSDK object passing the parameters as presented in the Dashboard. The exception being 'your-article-uid', this is defined by you and it should be an alphanumeric unique identifier of the article in your site.

<?php
    $smartwallSdk = new SmartWallSDK('your-smartwall-uid', 'your-api-key', 'your-article-uid');
?>

Initialize article

Right after instantiating SmartWallSDK the next step is initializing the article with the article content you want to protect.

It is necessary to do this step so the SmartWall will be able to retrieve it later in its full extension when the article is unlocked. It also provides an easy way to get a preview version of an article's content when using the function getCutContent

To initialize the article:

<?php
    $article = $smartwallSdk->initArticle($articleContent);
?>

You can use the $article object's function getCutContent to display a trimmed version of the article's content instead of the full article.

    $article->getCutContent();

If you need to truncate the article by a specific amount of characters you can also pass the exact number of characters. By default the amount of characters is 500. 

    $article->getCutContent(350);

Include necessary front-end scripts

To work properly the SmartWall requires some JavaScript code. You need to integrate the SmartWall JS SDK, similar to how is done for the front-end integration. The main difference being that you need to add the parameter mode: 'backend'

Example:

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

Showing the wall

Right after your truncated article you may want to show the SmartWall for the user to unlock the article. If the front-end JS SDK integration was done correctly the wall will appear once the SDK is loaded (which should take normally a few milliseconds). So nothing else to do.

However, if you find that the SmartWall takes a lot of time to kick off you may want to show a placeholder wall.

Placeholder wall

To add a placeholder wall to show until SmartWall is loaded, add the next code where you want to show the wall and change "your-wall-uid" to yours. You can customize the content and styling.

<div data-sw-wall="your-wall-uid">
  <!-- You can change the content to your liking -->
  <div style="text-align: center; font-size: 1.2rem; font-weight: 400; margin-top: 1.8rem">
    <p style=" margin-bottom: 1.8rem">Your article is taking more than usual to load.</p>
    <p style=" margin-bottom: 1.8rem">Hang in there...</p>
  </div>
</div>

When the SmartWall is loaded it will overwrite this element and show your SmartWall instead.

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 front-end JS SDK.

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.

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