Remote code injection

code injection

Step 1 - creating BrandFlow container

To create our first algorithm we have to first activate and install a BrandFlow script in our 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 on the button .

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

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

After all that, click " Save".

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

Step 2 - installing the BrandFlow script

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

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

At the end it should look 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 the code above directly to your project, because it doesn't contain the unique ID of your BrandFlow script. Use the code generated at 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 in 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 an 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 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 this 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 in 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 dynamic content

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

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


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

        <!--Card image-->
        <div class="view overlay mask rgba-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 BrandFlow when to launch the Dynamic Content.

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

1) In the Triggers column 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 the 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 dashboard you will find a button called 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 later lessons, we won't need the conditions and dynamic content we've already created.

So please remove all the things we have created so far. Thanks to that we'll start with a clean canvas.


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


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