Remote code injection


Step 1 - creating BrandFlow container

To create our first algorithm we have to first activate and install BrandFlow script in out project. That means we need to create a container.

This process is very similar to Google Analytics or Google Tag manager installation.

Go to BrandFlow.net/app/containers and click button .

Now we have to define the protocol type (HTTP or HTTPS) and domain of our website.

Because we create a project in our local environment, we choose " HTTP" and type " http://localhost/".

After all, click " save".

The last thing we have to do is clicking on button to activate the container.

Step 2 - installing BrandFlow script

Go to brandflow.net/app/brandflow-script and copy generated BrandFlow script.

Then open index.html file in the code editor and place BrandFlow script in the head section, between the comments: <!-- Place BrandFlow script here -->

At the end it should looks like this:


<!-- Place BrandFlow script here -->
    <script>
      (function () {

          var scripts = ["/static/general/bf-core.js", "/static/containers/yourUniqueID.js"];
          for (var i = 0; i < scripts.length; i++) {
              var script = document.createElement("script");
              script.src = "//test.brandflow.net" + scripts[i] + "?ts=" + Date.now() + "#";
              script.async = false;
              document.head.appendChild(script);
          }
      })();
  </script>
  <!-- Place BrandFlow script here -->
</head>
                                                        

Important: Do not copy directly the code above to your project, because it doesn't contain a unique ID of your BrandFlow script. Use the code generated in brandflow.net/app/brandflow-script.

Step 3 - creating the first condition

In the index.html file is a button with id="test-button".


<button id="test-button" type="button" class="btn btn-primary">Click me!</button>
                                                        

We'll create a condition based on a click on that button.

Go to brandflow.net/app/automation/condition and click the button

Then fill up the form with the following data:

Condition name : Test condition

Folder : Unfilde items

Type : Click ID

Operator : equals

Param : test-button

Click and it's done. Your have created your first condition and now we can use it to trigger some action.

Step 4 - dynamic content: explanation of the concept

Alright, we have the first part of our equation, which says:

If someone clicks on the button with ID = test-button


Now we have to take care of the second part, which is:

then display him a welcome card


Then we can achieve our goal which is:

If someone clicks on the button with ID = test-button, then display him a welcome card


Here is the Welcome Card

Hi! I'm a welcome card

Nice to see you, handsome.

Step 5 - creating a wrapper for dynamic content

In the index.html file we have a column with id="test-wrapper". We will use it as a box for our dynamically generated Welcome Card.

Take a look at index.html and find that line:


<!--Grid column-->
<div id="test-wrapper" class="col-md-6 mb-4">
                                                        

Then go to brandflow.net/app/dynamic-content/list, click and fill up the form with the following data:

Wrapper name : Test wrapper

Wrapper id : test-wrapper

Click and it's done. Your have created your first wrapper for Dynamic Content.

Step 6 - creating a dynamic content

Have a look at the table with the created wrapper. In the second column ("content") you can see Add button. Click it.

In the Name field type Welcome card and in the Code section paste the code of Welcome Card:


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

  <!--Card image-->
  <div class="view overlay hm-white-slight">
    <img src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20(3).jpg" class="img-fluid" alt="">
    <a href="#">
      <div class="mask"></div>
    </a>
  </div>

  <!--Card content-->
  <div class="card-body">
    <!--Title-->
    <h4 class="card-title">Hi! I'm a welcome card</h4>
    <!--Text-->
    <p class="card-text">Nice to see you, handsome.</p>
  </div>

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

Then click

Step 7 - setting the trigger

We have to tell the BrandFlow when to launch the Dynamic Content.

That means we have to set the trigger. As a trigger, we'll use previously created condition (click on button with id="test-button" )

1) In the Triggers colun click on the Add button

2) In the Trigger name field type "Welcome Card trigger".

3) Then click on the button and from the list choose Test condition and click .

4) Click , then click to close the modal.

5) At the end click at the top of the editor.

Step 8 - The moment of truth

Important: Remember, that your project must be launched via Live Server.


In the top navigation bar of BrandFlow dahsboard you will find a button Publish Changes.

Click it.

"Publish Changes" means to add all the things we did in BrandFlow to our project.


Now come back to the browser window where you have opened your project.

Click on the button Click me!

Did the Welcome Card magically appear?

Perfect. That means you did everything right. Well done!

Step 9 - Cleaning up

In the further lessons, we won't need the conditions and dynamic content we've already created.

Remove all the things we have created so far. Thanks to that we'll start with the clean canvas.


Now we are ready to create our first automation algorithm. Let's jump in!


Previous post Next post

Spreed the word: Add comment
About author
Author avatar
Michal Szymanski

Co-founder of MDBootstrap and BrandFlow. Entrepreneur, web developer, UI / UX designer, marketer. Dancer and nerd at the same time.

Leave a reply

Sign up to follow your progress and get additional benefits