Labels

Labels

Step 1 - Template, BrandFlow script & Live Server

I've prepared a simple HTML mockup which we'll use for the purposes of this lesson.

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

If you wish to use the prepared template, please 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 the BrandFlow script in the <head> section of the project and to launch the project via Live Server if you work on your localhost.

Step 2 - introduction to labels

Labels are an 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 a personalized message which may convince him to use our offer.


In this lesson, we'll implement the concept presented in the first lesson; the website of the agency "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 an offer to download our free ebook.

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

label = Downloaded Ebook

The user have downloaded the ebook and after some time he comes back to our website - the algorithm will remember him and instead of displaying the offer to download the ebook (that he has already done, so it's senseless) it will suggest he subscribes to our newsletter.

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

label = Subscribed

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

Step 3 - the concept of a New User label

To assign a label to any new user entering the website for the first time we need a 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.

All page URLs on our website contain "mdbootstrap.com".

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

https://mdbootstrap.com/docs/jquery/modals/basic/

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

Step 4 - creating a condition for a New User label

1) Go to brandflow.net/app/automation/condition

2) Click on

3) Fill in 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 on

Step 5 - creating New User label

1) Go to brandflow.net/app/automation/labels

2) Click

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

Step 6 - setting the trigger for the New User label

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

1) In the second column " Add label if" click the 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 7 - 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 the CreativeFolks homepage. On the right hand 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 the 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/app/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 8 - Creating Dynamic Content for the New User label

1) In the second column " Content" click the 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 mask rgba-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 9 - setting the trigger for New User content

1) In the Triggers column click the Add button.

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

3) Click on

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 10 - test

Everything is ready to test.

Click the 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 - the right column is filled up with our Dynamic Content. You can refresh the browser again - you will see it's still here.


Rate this lesson

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.

Note: We can help you build your project.
learn more

Sign up to follow your progress and get additional benefits