Skip to content

Newsletter widget

Introduction

In SmartWall we allow a lot of flexibility to implement whatever widget you can imagine. This is thanks to the HTML block feature. You can find it when setting up an Option set. HTML block allows you to create your custom widget using HTML, CSS and JS. You are free to do whatever you want and ask the SmartWall SDK to unlock using it's unlock method.

A newsletter widget is one example of the possibilities you can implement. It is a widget to sing up users to a newsletter so you can target them in your marketing campaigns.

alt text

How to do it

So let’s see how to implement it using HTML block.

Create a SmartWall

First, you need to setup a SmartWall. You can find an example in the image bellow.

alt text

Create the widget

Second, you need to create an Option Set, you can consider it a “widget”.

alt text

In the Option Set configuration create an HTML block and add your code in the HTML text area. You can use our template if you prefer, it is attached bellow.

alt text

Implement your newsletter script

Remember this is just a template, it doesn’t have the logic you need to send the email to your own newsletter or report to the SmartWall that it was sent. You’ll need to do that with your own JS script. For unlocking in JS you can call a method of the SDK named unlockArticle().

HTML template for newsletter:

<div class="sw-widget-widget sw-widget-font sw-widget-color-text">
  <div class="sw-widget-logo">
    <!-- Change the img src for your logo -->
    <img src="https://smart-wall-assets-prod.s3-eu-west-1.amazonaws.com/swisspay-logo.png">
  </div>
  <!-- Add in onsubmit your logic to sign up the use to the newsletter -->
  <form class="sw-widget-form" onsubmit="return false;">
    <h3 class="sw-widget-head sw-widget-title">
      <span>To continue reading this article sign up to our newsletter</span>
    </h3>
    <input class="sw-widget-input sw-widget-input-style sw-widget-sub-paragraph" type="text" name="email" value=""
      placeholder="Email" required>
    <label class="sw-widget-checkbox-container sw-widget-sub-paragraph">
      <span>I agree to the newspaper</span>
      <span class="sw-widget-link-style">
        <!-- Add the link to your privacy policy in href -->
        <a class="sw-widget-link-style" href="#">privacy policy</a>
      </span>
      <input class="sw-widget-checkbox" name="terms" type="checkbox" checked="checked" required>
      <span class="sw-widget-custom-checkbox sw-widget-checkbox-style"></span>
    </label>
    <button type="submit" class="sw-widget-btn sw-widget-btn-style sw-widget-paragraph">Sign up</button>
  </form>
</div>

CSS template for newsletter (You can add this to Custom CSS input):

/* HERE YOU CAN CUSTOMIZE TEMPLATE WIDGETS STYLE */
.sw-widget-font {
  font-family: 'Source Sans Pro', sans-serif;
}

.sw-widget-color-text {
  color: #333;
}

.sw-widget-title {
  font-size: 24px;
  font-weight: 400;
}

.sw-widget-paragraph {
  font-size: 18px;
  font-weight: 300;
}

.sw-widget-sub-paragraph {
  font-size: 16px;
  font-weight: 400;
}

.sw-widget-notification {
  font-size: 20px;
  font-weight: 400;
}

.sw-widget-btn-style {
  color: #fff;
  background: #333;
  border-radius: 4px;
  box-shadow: none;
  border: none;
}

.sw-widget-btn-style:hover,
.sw-widget-btn-style:focus {
  color: #fff;
  background: rgba(51, 51, 51, 0.9);
  outline: none;
}

.sw-widget-check-btn-style,
.sw-widget-input-style,
.sw-widget-checkbox-style {
  background: transparent;
  border: 1px solid rgba(51, 51, 51, 0.2);
  border-radius: 4px;
}

.sw-widget-check-btn-style:hover,
.sw-widget-check-btn-style:focus {
  background: rgba(51, 51, 51, 0.1);
  outline: none;
}

.sw-widget-link-style {
  color: #333;
  font-size: 16px;
  opacity: 0.8;
  text-decoration: none;
}

.sw-widget-link-style:hover,
.sw-widget-link-style:focus {
  opacity: 1;
  text-decoration: underline;
  outline: none;
}

/* END TEMPLATE WIDGETS STYLE COSTUMIZED */

/* TEMPLATE GENERAL STRUCTURE */
.sw-widget-widget {
  width: auto;
  padding: 30px;
  background: #fff;
  border: 1px solid rgba(51, 51, 51, 0.1);
}

/* content company brand */
.sw-widget-logo {
  margin: 1rem 20px;
}

.sw-widget-logo img {
  max-height: 120px;
  max-width: 200px;
  display: block;
  margin: auto;
}

/* widget main title */
.sw-widget-head {
  margin: 2rem 0px;
  text-align: center;
}

/* widget content (form, survey ) */
.sw-widget-form {
  max-width: 600px;
  margin: 10px auto 20px;
}

/* alternative bottom options for user */
.sw-widget-footer {
  text-align: center;
  margin: 2rem 0px;
}

.sw-widget-footer .sw-widget-link {
  display: inline-block;
  margin: 0.8rem 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}

/* END TEMPLATE GENERAL STRUCTURE */

/* COMPONENTS STYLE */
/* input, button, checkbutton and checkbox */
.sw-widget-input,
.sw-widget-btn,
.sw-widget-check-btn {
  width: 100%;
  display: block;
  overflow: hidden;
  padding: 15px 10px;
  margin: 1rem auto;
  width: -webkit-fill-available;
  width: -moz-available;
  cursor: pointer;
}

.sw-widget-input,
.sw-widget-check-btn {
  text-align: left;
  opacity: 0.6;
}

.sw-widget-check-btn {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.sw-widget-btn {
  text-align: center;
}

/* buttons and check buttons with ripple animation on :active selector */
.sw-widget-btn,
.sw-widget-inline-btn,
.sw-widget-check-btn {
  position: relative;
  cursor: pointer;
}

.sw-widget-btn:before,
.sw-widget-check-btn:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 0;
  padding-top: 0;
  border-radius: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.sw-widget-btn:before {
  background-color: rgba(250, 250, 250, 0.1);
}

.sw-widget-check-btn:before {
  background-color: rgba(51, 51, 51, 0.1);
}

.sw-widget-btn:active:before,
.sw-widget-check-btn:active:before {
  width: 120%;
  padding-top: 120%;
  transition: width .2s ease-out, padding-top .2s ease-out;
}

/* Customize the label (the checkbox-container) */
.sw-widget-checkbox-container {
  display: block;
  position: relative;
  padding-left: 32px;
  margin-bottom: 2rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.sw-widget-checkbox {
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0;
  visibility: none;
  width: 20px;
  height: 20px;
}

/* Create custom checkbox */
.sw-widget-custom-checkbox {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
}

/* On mouse-over, add a grey background color */
.sw-widget-custom-checkbox:hover {
  background-color: rgba(51, 51, 51, 0.1);
}

/* When the checkbox is checked, add a dark grey color background */
input:checked~.sw-widget-custom-checkbox {
  background-color: #333;
}

/* Create the check indicator (hidden when not checked) */
.sw-widget-custom-checkbox:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the check indicator style when checked */
.sw-widget-checkbox-container input:checked~.sw-widget-custom-checkbox:after {
  display: block;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* END COMPONENTS STYLE */

Persisting the unlock

If you want to unlock all articles after the user has sign up to the newsletter you can do the following.

You have to setup a variable at some point containing the information that describe if the registration was completed or not. Then pass this variable as Custom variable when instantiating the SmartWall SDK as explained here. You should persist this variable in a Cookie, so you can retrieve it in every article and pass it as custom variable to the SDK.

Then you can create audience segmentation rules based on the variable. For the case of a newsletter widget one example of rules to achieve the desirable outcome is shown in the following image.

alt text