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
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 offere
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:
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.
Any page URL on our website contains "mdbootstrap.com".
...and so on. I think you got it.
Step 4 - creating a condition for New User label
1) Go to brandflow.net/automation/condition
3) Fill up the form with the following data:
Condition name :
New User condition
Step 5 - creating New User label
1) Go to brandflow.net/automation/labels
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.
New User label trigger in the
Trigger name field
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 "
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-->
Step 7 - setting the trigger for New User content
1) In the Triggers column click Add button.
New User content trigger in the
Trigger name field
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.
Do you want to share?Facebook Twitter Google +