Author: Michal Szymanski
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
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
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:
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:
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".
...and so on. I think you got it.
Step 4 - creating a condition for a New User label
2) Click on
3) Fill in the form with the following data:
Condition name :
New User condition
4) Click on
Step 5 - creating New User label
1) Go to brandflow.net/app/automation/labels
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.
New User label trigger in the
Trigger name field
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
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 "
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-->
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.
Previous lesson Next lesson
Spread the word:
Note: We can help you build your project.