First algorithm

first algorithm

Step 1 - concept of Downloaded Ebook & Subscribed labels

This is the card displayed to all new users.

Download our free e-book

Some quick example text to build on the card title and make up the bulk of the card's content.

Download

It has a button with and id="download"

If he clicked that button it means he already downloaded the ebook so there is no sense to display him this card again.

So after he clicked it we replace his New User label with Downloaded Ebook label.

In this way we'll classify him as a user with Downloaded Ebook label and display him another card - with the subscription form.


Subscribe to our newsletter

In the form above there is a button with an id="subscribe".

So after he clicked it we replace his Downloaded Ebook label with Subscribed label.

In this way we'll classify him as a user with Subscribed label and display him another card - with our offer.


Learn more about our offer

Some quick example text to build on the card title and make up the bulk of the card's content.

Learn more

Step 2 - creating required conditions

Similarly to the creation of New User condition , go to brandflow.net/app/automation/condition and create 2 new conditions:

1) Downloaded Ebook condition based on id click = "download"

2) Subscribed condition based on id click = "subscribe"

Step 3 - creating Downloaded Ebook & Subscribed labels

Similarly to the creation of New User label , go to brandflow.net/app/automation/labels and create 2 new labels:

1) Downloaded Ebook label

2) Subscribed label

Step 4 - setting the triggers to the labels

Add the triggers to the labels:

1) Downloaded Ebook label trigger based on Downloaded Ebook condition

2) Subscribed label trigger based on Subscribed condition

Step 5 - remove label if

There is one more important thing about labels.

If the label is part of the algorithm which contains more than one label we have to set the conditions which will tell the algorithm when to remove the given label.

Example:

Step 1 : User the first time enters the website and he gets New User label

Step 2 : User with the label New User has downloaded our free ebook, so he gets Downloaded Ebook label

Step 3 : We don't want that user has at the same time New User label and Downloaded Ebook label. If he will, it would mess up our algorithm.

For example, the Dynamic Content mechanism wouldn't know which content to display - the one dedicated to New User label or the second one dedicated to Downloaded Ebook label.


Now let's set the triggers to remove the labels:

1) New User remove label trigger based on Downloaded Ebook label

1) Downloaded Ebook remove label trigger based on Subscribed label

Step 6 - Dynamic Content

Go to brandflow.net/app/dynamic-content/list and add 2 new Dynamic Contents to the Basic Automation wrapper:


1. Downloaded Ebook content


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

    <!--Card content-->
    <div class="card-body text-center">

        <!-- Form -->
        <form name="">
            <!-- Heading -->
            <h5 class="my-2 h5 text-center">Subscribe to our newsletter</h5>

            <!-- Inputs -->
            <div class="md-form">
                <input type="text" id="inputOne" class="form-control">
                <label for="inputOne">Your name</label>
            </div>
            <div class="md-form">
                <input type="text" id="inputTwo" class="form-control">
                <label for="inputTwo">Your email</label>
            </div>

            <!-- Action button -->
            <div class="text-center">
                <button id="subscribe" class="btn btn-indigo btn-md">Subscribe</button>
            </div>
        </form>
        <!-- Form -->

    </div>

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

2. Subscribed content


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

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

    <!--Card content-->
    <div class="card-body">
        <!--Title-->
        <h4 class="card-title">Learn more about our offer</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="learn-more" href="" class="btn btn-primary">Learn more</a>
    </div>

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

Step 7 - setting the triggers to Dynamic Content

Add the triggers to Dynamic Content:

1) Downloaded Ebook content trigger based on Downloaded Ebook label

2) Subscribed content trigger based on Subscribed label

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 click on the button.

The card should change to Subscription Form.

Click on button and Subscription Form should change to Card with the Offer.

Well done!


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, UI/UX designer, marketing analyst. Dancer & nerd.
Sign up to follow your progress and get additional benefits