Sign in


Sign up


Scoring system

by Michal Szymanski,

Step 1 - Template, BrandFlow script & Live Server

As always, I've prepared a simple HTML mockup which we'll use for the learning purpose of this lesson.

Of course, if you prefer, you can work directly on your production website. It's completely up to you.

If you want to use the prepared template, click the button below and unzip the downloaded package. Then open the project in the code editor and live server.

Download template Live preview

Important: This time our project contains many pages so to do not place BrandFlow script manually on each page, we'll add it dynamically.

Open the file ScoringSystem\html\_brandflow-script.html and paste the BrandFlow script there. It will be automatically loaded to each page in the ScoringSystem project.

Step 2 - contept of the Scoring

We all know this annoying schema. You enter some new website and before you can do anything else you are hit by huge pop-up:

"What the hell?" - you think.

You haven't yet read anything on this website. You don't know if you will like it. You are not even sure what this website is about.

There is no relation between you and the website - but nevertheless, it wants your personal data.

"No way, go to hell. Goodbye." - you will probably say and quit. And you will be right to do so.


As a website owner, you could do it much smarter.

Let the user explore your content a bit. If he reads few of your articles that will mean he like it and he is ready to engage more - and that's the moment when you should display him a popup with the suggestion of newsletter subscription.

Step 3 - creating "Any Page" condition

Here is the result we want to achieve:

I. Set 1 point to the user for each pageview

II. Display Subscription modal if user collects 3 points


The first step we have to take is to create a condition which is fulfilled always, no matter what page user enters.

Go to brandflow.net/automation/condition and create New Rule with the following parameters:

Condition name : Any Page condition

Folder : Unfiled items

Type : Page path

Operator : contains

Param : /

Because any page URL contains "/" sign, this condition will be fulfilled always - and that's exactly what we need.

Step 4 - creating the Scoring

We can create as many scorings as we wish but generally is a good idea to keep it as simple as possible.

In each scoring, we need to define a start point (the moment when BrandFlow starts counting this particular scoring) and the triggers for setting a point for different actions.


At the beginning, we'll create a "Basic scoring" which:

- starts to count when the user enters the website for the first time

- set a point for each single page view


1) Go to brandflow.net/automation/scoring and click

2) Create a Scoring name "Basic scoring"

3) To the column Start counting if add a trigger named "Basic scoring trigger start" and set a Any Page condition as a trigger

4) To the column Set a score if add a trigger named "Basic scoring trigger 1-point" and set a Any Page condition as a trigger (the same as by the "Basic scoring trigger start")

5) Set a 1 point to the Basic scoring trigger 1-point and save the trigger

Step 5 - creating the Subscription modal

1) Go to the brandflow.net/modals/list and create new modal name "Subscription modal"

2) Select checkbox "Show only once"and choose folder "Unfiled items"

3) In the code section paste the following code and click


<!-- Modal: modalSubscribe -->
<div class="modal fade" id="modalSubscribe" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">

    <!-- Modal content -->
    <div class="modal-content">
      <!-- Modal header -->
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Subscribe to our newsletter</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden=t rue>&times;</span>
        </button>
      </div>
      <!-- Modal body -->
      <div class="modal-body">
        <div class="md-form form-sm">
          <i class="fa fa-lock prefix"></i>
          <input type="password" id="form27" class="form-control">
          <label for="form27">Your name</label>
        </div>

        <div class="md-form form-sm">
          <i class="fa fa-envelope prefix"></i>
          <input type="text" id="form28" class="form-control">
          <label for="form28">Your email</label>
        </div>
      </div>
      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Subscribe</button>
      </div>
    </div>
    <!-- Modal content -->
  </div>
</div>
<!-- Modal: modalSubscribe -->
                       

Step 6 - setting the trigger

1) In the Triggers column click Add button and name the trigger "Subscription modal trigger"

2) Click button

3) Set a number of Basic scoring to 3 and click

4) Save the trigger

Step 7 - test

Publish the changes and refresh ScoringSystem project. Generate 2 more pageviews and then our Subscription modal will trigger.

Step 8- contept of the Scoring Pro

If you sell anything on the Internet, of course you want people to read your offer.

Some of them will read it and buy your product.

Unfortunately - most of them will not.

Fortunately - there are quite efficient ways to convince some part of those undecided visitors to use your commercial offer.


For this purpose, we'll use so-called Scoring Pro. That means:

I. We'll create a Scoring Pro which starts counting after the user visits the page with our commercial offer.

II. For each page view the user gains 1 point of Scoring Pro.

III. If he collects 10 points of Scoring Pro - we'll display him a modal with a discount for our product.

IV. We'll display modal with a discount to the visitors that have already seen our offer.


Thanks to this mechanism:

I. We won't give a discount to the visitor which haven't even seen our offer yet (because Scoring Pro starts counting after visiting page with the offer)

II. We won't give a discount to the visitor which can possibly buy our product for the full price (because he needs to collect 10 points of Scoring Pro to get a discount)

III. If he will buy the product for the full price, before collecting 10 points of Scoring Pro - we won't display him a modal with a discount.

Step 8 - creating the Scoring Pro

1) Go to brandflow.net/automation/condition and create new rule with the following parameters:

Condition name : Offer Page condition

Folder : Unfiled items

Type : Page path

Operator : contains

Param : offer

The Offer Page contain string " /offer" in its URL address, so the condition above will be fullfiled after visitng the Offer Page.

2) Go to brandflow.net/automation/scoring and create New Scoring named "Pro scoring"

3) To the column Start counting if add a trigger named "Pro scoring trigger start" and set a Offer Page condition as a trigger

4) To the column Set a score if add a trigger named "Pro scoring trigger 1-point" and set a Any Page condition as a trigger

5) Set a 1 point to the Pro scoring trigger 1-point and save the trigger

Step 9 - creating the Discount modal

1) Go to the brandflow.net/modals/list and create new modal name "Discount modal"

2) Select checkbox "Show only once"and choose folder "Unfiled items"

3) In the code section paste the following code and click


<!--Modal: modalDiscount-->
<div class="modal fade right" id="modalDiscount" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
data-backdrop="false">
<div class="modal-dialog modal-side modal-bottom-right modal-notify modal-danger" role="document">
    <!--Content-->
    <div class="modal-content">
        <!--Header-->
        <div class="modal-header">
            <p class="heading">Discount offer: <strong>10% off</strong></p>

            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true" class="white-text">&times;</span>
        </button>
        </div>

        <!--Body-->
        <div class="modal-body">

            <div class="row">
                <div class="col-3">
                    <p></p>
                    <p class="text-center"><i class="fa fa-gift fa-4x"></i></p>
                </div>

                <div class="col-9">
                    <p>Sharing is caring. Therefore, from time to time we like to give our visitors small gifts.
                        Today is one of those days.</p>
                    <p><strong>Copy the following code and use it at the checkout. It's valid for <u>one day</u>.</strong></p>
                    <h2><span class="badge">v52gs1</span></h2>

                </div>
            </div>
        </div>

        <!--Footer-->
        <div class="modal-footer flex-center">
            <a href="https://mdbootstrap.com/product/material-design-for-bootstrap-pro/" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
            <a type="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
        </div>
    </div>
    <!--/.Content-->
</div>
</div>
<!--Modal: modalDiscount-->
                                   

Step 10 - setting the trigger

1) In the Triggers column click Add button and name the trigger "Discount modal trigger"

2) Click button

3) Set a number of Pro scoringto 10 and click

4) Save the trigger

Step 11 - test

Publish the changes and refresh ScoringSystem project.

Doesn't matter how many pageviews you generate - the Discount modal won't show up.

Now, on the HomePage click on the button . You will be redirected to the Offer Page and that's the moment when Scoring Pro starting to count.

Generate 5 more pageviews and boom! The Discount modal shows up.


Next lesson

Do you want to share?

Facebook Twitter Google +

About author


User avatar

Michal Szymanski

Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst.

Leave a reply

Join MDB Affiliate Program

Get 30% profit from each sale

You earn 30% commission on affiliate sales, when a product is bought by a customer you referred, you will receive a 30% share.

Join us