Skip to content

Custom widgets

Introduction

In addition to the predefined widgets you can select from the SmartWall's Dashboard, you can also create your own custom widgets and customize them as much as you like.

For this purpose we provide the HTML widget, where you can add HTML, CSS and JS code.

alt text

SmartWall styles

In your custom HTML widget you may want to reuse some of the default styles of SmartWall and later customize them using the "Custom CSS" option.

You could use this template in codepen.io to start building your custom widget there and then copy it into the SmartWall Dashboard when is ready.

Here a list of CSS classes you can add to your HTML elements to give them the default SmartWall look:

sw-widget

sw-widget-form

sw-widget-head

sw-widget-tittle

sw-widget-paragraph

sw-widget-subparagraph

sw-widget-btn

sw-widget-input

SmartWall features

We also provide a way for your HTML code to work with SmartWall functions like unlocking the wall, login, logout, etc.

Generics

data-sw-btn="unlock"

Add this attribute to a <button> element to make it unlock the wall at a click and track the event unlock-btn-click.

data-sw-btn="promotion-discover"

Add this attribute to a <button> or <a> element to track the event discover-promotion-btn-click.

Single Sign-on

These attributes are for creating a custom single sign-on widget.

data-sw-widget="sso"

Wrap your widget HTML code inside an element containing this attribute to tell the SmartWall to load SSO features. It's necessary for the rest of attributes to work.

data-sw-widget="sso-no-logged"

An element with this attribute will only show when the user is not authenticated.

data-sw-widget="sso-subscribed"

An element with this attribute will only show when the user is authenticated and has an active subscription.

data-sw-widget="sso-no-subscribed"

An element with this attribute will only show when the user is authenticated but doesn't have an active subscription.

data-sw-btn="sso-sign-in"

Add this attribute to a <button> element to make it redirect the user to the login page and track the event login-btn-click.

data-sw-btn="sso-sign-out"

Add this attribute to a <button> element to make it logout the user to the login page and track the event logout-btn-click.

data-sw-info="sso-username"

Add this attribute to an element to make it display the username when the user is authenticated.

data-sw-btn="subscribe-offer"

Add this attribute to a <button> or <a> element to track the event subscribe-offer-btn-click.

data-sw-btn="sso-custom-sign-out"

Add this attribute to a <button> or <a> in your website to create a logout button outside the wall. If the SmartWall detects it, it will hide the wall when the user is authenticated and has a subscription.