Modals

modals

Step 1 - Template, BrandFlow script & Live Server

As always, 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 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 your localhost.

Step 2 - concept of the Cookies Modal / Popup concept

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.

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

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

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

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

For such purposes we can use the 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 a 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.

As any page URL on our website contains "mdbootstrap.com".

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

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

Step 3 - creating Cookies modal

1) Go to the brandflow.net/app/modals/list and click the 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 enter 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="fas 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 drop-down list Choose folder select Unfiled items option.

6) Click the button

Step 4 - setting the trigger

1) In the Triggers column click Add button

2) In the Trigger name field type Cookies modal trigger

3) Click the button and set the New User condition

4) Click , and Publish changes

Step 5 - testing the Cookies modal

After refreshing our project the Cookies Modal should show up.

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

Step 6 - the concept of a 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 an article on our website. We would like to suggest to him a similar article, which may possibly interest him.

We can display a modal with our suggestion, but we cannot do it immediately after he has started reading. He doesn't even know yet if the article he is reading right now will be of interest for him, so proposing another one to him 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 has read at least 60% of the text we can safely assume he liked the article and it's a good idea to suggest another one to him.

Step 7 - creating a scroll condition

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

2) Create a new rule named Scroll 60% condition

3) Set a condition:

Folder = Unfiled items

Type = Scroll %

Param = 60

Step 8 - creating a Related Article modal

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

2) Create a 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 a trigger named Related Article modal trigger and assign it a 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 a time delay condition

Let's assume some of the users scroll the page very quickly 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 the user has spent 20 seconds on the page"

Step 10 - adding a new condition to the trigger

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

2) Click on the Related Article modal trigger and add the 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 than 60%. But if you wait 20 seconds, the Related Article modal shows up.

Right now the Modal will be displayed only 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, 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