Modals

modals

Step 1 - Template, BrandFlow script & Live Server

As always, 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: If you use the prepared template, 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 - concept of the Cookies Modal / Popup

As you know, each website is obligated to inform its visitors about collecting data (for example, if you use Google Analytics).

That's the reason we must display a popup with an information about using cookies files.

Of course, we don't want to attack the user with the information about cookies any time he enters our website.

We want to inform him only once and then let the website remember it.

To display Cookies Modal 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 - no matter which page he entered.

We've already done it in the Lesson 4 . Here is short reminder:

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/

Step 3 - creating Cookies modal

1) Go to the brandflow.net/app/modals/list and click button

2) In the Name field type: Cookies modal

3) Select the checkbox Show only once

It's very important, because we don't want to show the modal to the user each time he enters the website. Once is enough.

4) In the Code section place the following code:


    <!--Modal: modalCookie-->
<div class="modal fade top" id="modalCookie" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
data-backdrop="false">
<div class="modal-dialog modal-frame modal-top modal-notify modal-info" role="document">
  <!--Content-->
  <div class="modal-content">
    <!--Body-->
    <div class="modal-body">
      <div class="row d-flex justify-content-center align-items-center">

        <p class="pt-3 pr-2">We use cookies to improve your website experience</p>

        <a href="https://mdbootstrap.com/cookie-policy/" target="_blank" class="btn btn-primary-modal">Learn more
          <i class="fa fa-book ml-1"></i>
        </a>
        <a class="btn btn-outline-info waves-effect" data-dismiss="modal">Ok, thanks</a>
      </div>
    </div>
  </div>
  <!--/.Content-->
</div>
</div>
<!--Modal: modalCookie-->
                

5) In the select Choose folder select Unfiled items option.

6) Click button

Step 4 - setting the trigger

1) In the Triggers column click Add button

2) In the Trigger name filed type Cookies modal trigger

3) Click button and set the New User condition

4) Click , and Publish changes

Step 5 - test

After refreshing the project our Cookies Modal should show up.

Close it and refresh the page once more. The modal won't show again.

Step 6 - concept of modal on scroll

There is plenty of situations when we should not display modal immediately after a user enters the website. Many automated actions should base on his engagement.

Consider the following example:

The user started to read some article on our website. We would like to suggest him the similar article, which can possible interests him.

We can display him a modal with our suggestion, but we cannot do it immediately after he started reading. He doesn't even know yet if the article he is reading right now will be interesting for him, so proposing him another one is a nonsense.

What we can do is set a simple condition to the modal:

Display the Modal with related article if the user scrolled more than 60% of the page

If he did read at least 60% of the text we can safely assume he like the article and it's a good idea to suggest him another one.

Step 7 - creating scroll condition

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

2) Create new rule named Scroll 60% condition

3) Set a condition:

Folder = Unfiled items

Type = Scroll %

Param = 60

Step 8 - creating Related Article modal

1) Go to brandflow.net/app/modals/list

2) Create new modal named Related Article modal and use the following code:


    <!--Modal: modalRelatedContent-->
<div class="modal fade right" id="modalRelatedContent" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
data-backdrop="false">
<div class="modal-dialog modal-side modal-bottom-right modal-notify modal-info" role="document">
    <!--Content-->
    <div class="modal-content">
        <!--Header-->
        <div class="modal-header">
            <p class="heading">Related article</p>

            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" class="white-text">&times;</span>
                </button>
        </div>

        <!--Body-->
        <div class="modal-body">

            <div class="row">
                <div class="col-5">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(55).jpg" class="img-fluid" alt="">
                </div>

                <div class="col-7">
                    <p><strong>My travel to paradise</strong></p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit [...]</p>
                    <button type="button" class="btn btn-primary btn-md">Read more</button>

                </div>
            </div>
        </div>
    </div>
    <!--/.Content-->
</div>
</div>
<!--Modal: modalRelatedContent-->
                

3) After saving the Modal, set the trigger named Related Article modal trigger and set assign it Scroll 60% condition

4) Save it and publish the changes

5) Refresh your project and scroll the page until you see the modal

Step 9 - creating time delay condition

Let's assume some of the users scroll the page very fast and do not read the article at all.

Many people do that. They just look for some keywords which could possibly attract their interest and if they don't find them, they don't care about reading the text.

In this case, our scroll condition may be not enough. That's why we'll create another one, based on time spent on the page.

1) Go to brandflow.net/app/automation/condition and create new rule named Delay 20 condition

2) Set a condition:

Folder = Unfiled items

Type = Delay time

Param = 20

This condition means: "Do something if user spent 20 seconds on the page"

Step 10 - adding new condition to the trigger

1) Go to the brandflow.net/app/modals/list

2) Click on Related Article modal trigger and add Delay 20 condition to the trigger

3) Save it and publish the changes.

4) Refresh your project and scroll down the page. Nothing will happen even if you scrolled more then 60%. But if you wait 20 seconds Related Article modal show up.

Right now the Modal will be displayed if both of the conditions are fulfilled:

- page scrolled more than 60%

- 20 seconds spent on the page


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