Table of Contents

Identify Blocks CSS

Abby Updated by Abby

Please note that these classes are specific to Landbot V3 and won't work in previous versions

If you'd like to target a specific block in your flow

  1. Get the block reference from the builder:

Just right click on the specific block you'd like to target and copy the reference

  1. Once you have the reference copied you'll go to "Custom CSS" and paste the following code, changing the reference to your own and adding "_0" (the number will increase for each node element):

[data-block="Nkhbrwks_0"]

In this case, you'll change "Nkhbrwks".

  1. After you have the block targeted you'll target the specific elements that you want to change with their class names (and a space after the block identifier):
[data-block="welcome_0"] .MessageMediaBubble{
    position: relative; left:60px;
}

If you'd like to target specific nodes within a block

  1. Get the block reference from the builder (in the example: NEJdOSa6m). Notice that in this block we have 3 nodes and per each node, we manually added a number at the final of the block reference (in the example: _0, _1, _2).

The numbers must be added starting with zero and increasing according to the number of nodes.

  1. In this example, I added a different background-color for each node.

 [data-block="NEJdOSa6m_0"] .MessageBubble {
	background-color: #636BFC !important;  
}

 [data-block="NEJdOSa6m_1"] .MessageBubble {
	background-color:  #4FCCC2 !important;  
}

 [data-block="NEJdOSa6m_2"] .MessageBubble {
	background-color: #F58B0B  !important;  
}

If you'd like to target specific buttons within a specific block

In this example, I wanted to change the last button within a specific block.

After the block reference and the class name, I added the following code to target the 3rd button(you can also use odd and even):

:nth-child(3){
    background-color:blue!important;
}

This is the result:

If you'd like to target a specific block within a brick

  • When you copy the reference of a block that is inside a brick you will see something like this reference: BEJ-3kQxB->NguFeZqjK.
  • To apply the CSS rule, you only need to use the last reference. Following our example, it will be NguFeZqjK.
  • Once you have that reference, you can add CSS styles in the same way that we have seen in the previous steps.
In case you have a block nested inside many bricks, the reference can be long, like this: BEJ-3kQxB->BBeh-7aqu->BIrBXHtAK->NEMyYYLS1. Always take the last reference to identify the block: NEMyYYLS1

More info

How did we do?

Background Class CSS

Buttons Class CSS

Contact