HTML blocks

What is an HTML block? 

HTML blocks can be used to modify the content of your website depending on the attributes of the current visitor. Automating the process is easy; simply, prepare different versions of your page in HTML for each group of users you want to target. 

Find basic information about creating pages in HTML here.

How to create HTML blocks

Start creating the HTML block by entering Tools -> HTML blocks then click Create new.

Fill in the following fields: "Name", "Class", and "Description" then click “Next”. In this step you’ll choose whether you want to create a new block or edit an existing one. 

Select “Add code replacement”. Now, you'll see the code input field. Paste the existing code from the website and modify it. Let’s go to the main page and, from the drop-down menu, right-click “Inspect”. 

Let’s assume you want to show different page menu layouts depending on the visitor’s attributes. You want the “Cennik” (Price) button to appear as the first one, while, in the unmodified version, it’s almost on the last place in the menu section. Copy the piece of HTML code that you want to modify. In this case, the modification will happen in the menu section, so we start copying from this part: 

 <div class="main-menu">

To copy the element, right-click on the code fragment then, from the drop-down menu that appears, select Copy -> Copy element. 

Inside the User.com panel, HTML block, paste the copied code inside the field Edit code replacement. Look for the part responsible for the menu layout and simply change the order; copy the code line for “Cennik” (Price) and paste it in the “O mnie” (About) line. Paste “O mnie” (About) in the “Cennik” Price place, so that these two literally switch places. 

Click Next and name the "Code replacement activity". 

The HTML block is ready. Let’s use in an automation. 

HTML blocks are used when you want to: 

• adapt the page’s content for a specific user, e.g. show women’s clothes for users with attribute “sex: woman”.
• display different language versions for users with attribute “Country: X”.
• change the menu order; show a smaller “Log in” button and a larger “Prices” button for users that already have attributes “Name”, “Last name”, and “Email” saved in the User.com database. 

Example

In User.com app, go to Automations and click on “Create Automation”.

Start with the module, "Page visit", update the URL field with your website’s URL, and select “Contains” from the drop-down menu. The event (HTML code change) will trigger when a user enters the page. Now, according to which attributes you want to sort the users by, connect the module "Filters". In this example automation, you want to change the code for users whose email addresses you already have in your database. Check the box “Email”. 

The activity, that the event will trigger, changes a part of the website’s HTML code. Place the module, “HTML block”, at the end of the automation and choose one of the already prepared blocks from the list. 

Click Save, name the automation, and decide how often you want the automation to fire (once a day, once a week, each time a condition is met, etc). 

You’re ready! Simply, turn it on in the main panel of the automation by toggling Status.