Sign in


Sign up


Labels

by Michal Szymanski,

Step 1 - Template, BrandFlow script & Live Server

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: Remember to place BrandFlow script in the <head> section of the project and to launch the project via Live Server if you work on localhost.

Step 2 - introduction to labels

Labels are incredibly useful concept when creating an automation algorithm.

They let us classify the specific user based on his behaviour. After this classification, we can trigger a dedicated action.

For example, if our algorithm classifies the visitor as an engaged user and potential customer - it can tell the website to display him a personalized message which convinces him to use our offer.


In this lesson, we'll implement the concept presented in the first lesson - blog website of the interactive agency called "CreativeFolks".

The algorithm will work as follows:

Stage 1 - user visits the website for the first time

label = New User

The first visit of the user - our website displays him a proposition of downloading our free ebook.

Stage 2 - user has downloaded the ebook, so we display him subscription form

label = Downloaded Ebook

User have downloaded the ebook and after some time he comes back to our website - the algorithm will remember him and instead of display him again the proposition of downloading the ebook (what he has already done, so it's senseless) it will display him a suggestion of subscription to our newsletter.

Stage 3 - user has subscribed to the newsletter, so we display him our offer

label = Subscribed

If the user subscribes to our newsletter and proves his trust to us - it means he is ready to see an offer of our company. The algorithm will replace subscription form with the card informing about our services.

Step 3 - concept of New User label

To assign a label to any new user entering the website for the first time we need some very generic condition.

That means, we need a condition which is fulfilled always immediately after entering the website.


For such a purpose we can use Page URL variable.

We'll create the following condition:

If Page URL contains http://127.0.0.1 then:


http://127.0.0.1 is an address of our localhost (local server / live server).

If you want to create an algorithm for the website already existing on the Internet, you should use its URL.

For example, for https://mdbootstrap.com/ I can create a condition:

If Page URL contains mdbootstrap.com then:


Thanks to that I can be sure that it will be fulfilled no matter what page the user entered.

Any page URL on our website contains "mdbootstrap.com".

https://mdbootstrap.com/components/buttons/

https://mdbootstrap.com/javascript/modals/

...and so on. I think you got it.

Step 4 - creating a condition for New User label

1) Go to brandflow.net/automation/condition

2) Click

3) Fill up the form with the following data:

Condition name : New User condition

Folder : Unfiled items

Type : Page URL

Operator : contains

Param : http://127.0.0.1

4) Click

Step 5 - creating New User label

1) Go to brandflow.net/automation/labels

2) Click

3) Type " New User label" in the Label name field and click

Step 5 - setting the trigger for New User label

Have a look at the table where New User label has been added.

1) In the second column " Add label if" click Add button.

2) Type New User label trigger in the Trigger name field

3) Click

4) Assign New User condition to the trigger by clicking

5) Click and then

Step 6 - creating a wrapper for Dynamic Content

Our New User label is ready. Now we have to prepare a wrapper to display the Dynamic Content and the Dynamic Content itself.

Have a look at CreativeFolks homepage. On the right side of the carousel is an empty column.

We'll use that column as a wrapper for Dynamic Content.

If you open index.html (from CreativeFolks directory) in the code editor you will notice the empty column has an ID="basic-automation-wrapper". We'll use that ID.


1) Go to brandflow.net/dynamic-content/list and click

2) In the Wrapper name field type " Basic Automation wrapper" and in the Wrapper ID field type " basic-automation-wrapper"

3) Click

Step 6 - Creating the Dynamic Content for New User label

1) In the second column " Content" click Add button.

2) In the Name field type New User content

3) In the Code section paste the following code:


<!--Card-->
<div class="card">

    <!--Card image-->
    <div class="view overlay hm-white-slight">
        <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(141).jpg" class="img-fluid" alt="">
        <a href="">
            <div class="mask"></div>
        </a>
    </div>

    <!--Card content-->
    <div class="card-body">
        <!--Title-->
        <h4 class="card-title">Download our free e-book</h4>
        <!--Text-->
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a id="download" href="" class="btn btn-primary">Download</a>
    </div>

</div>
<!--/.Card-->
                                              

4) Click

Step 7 - setting the trigger for New User content

1) In the Triggers column click Add button.

2) Type New User content trigger in the Trigger name field

3) Click

4) Assign New User label to the trigger by clicking

5) Click and then to save the trigger

6) Click to save the Dynamic Content

Step 8 - test

Everything is ready to test.

Click Publish Changes button in the top navbar to add all the changes to our CreativeFolks project.

Refresh the homepage of CreativeFolks and here is it - right column is filled up with our Dynamic Content. You can refresh the browser again - you will see it's still here.


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. Dancer & nerd.

Comments 3

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