Styling

Class reference and CSS patterns for customising the look of a Landbot v3 web widget.

The Landbot v3 web widget renders into an iframe whose internal markup follows a BEM-ish convention (.Block__Element, .Block--modifier). This page is the class catalogue you'll need when writing custom CSS — what each class targets, with an example.

Warning All classes documented here are v3 only. v2 widgets use a completely different DOM and class scheme.

Where to put CSS

Three places, in increasing order of dynamism:

1. Builder → Design → Custom CSS. Static, applied to every conversation. The right place for theme-level work (colours, typography, sizing).
2. Parent-page injection. Insert a <style> element from the page that hosts the widget. The right place for launcher/bubble rules and for site-wide overrides outside the builder's reach. See Embedding in your app.
3. From inside a Code block. Apply a rule mid-flow with landbotScope.document.styleSheets[0].insertRule(...). The right place for state-dependent styles ("when the user picks dark mode, restyle everything").

Conventions

• Class names are case-sensitive. .MessageBubble and .messagebubble are different selectors.
• Most overrides need !important to win against Landbot's defaults. The class catalogues below mark this where it matters.
• Generic utility classes you'll see throughout the DOM — .is-pulled-right, .columns, .is-multiple, .is-pulled-left — are part of the widget's underlying CSS framework and can be targeted alongside the Landbot-specific classes documented below.
• A few designs expose CSS custom properties you can override on * or .Background instead of writing full rules. See CSS variables.

Targeting specific blocks

Every flow block renders with a data-block attribute on its container, formatted as <block_id>_<index> (index starts at 0, and for repeated blocks the index increments). Use an attribute selector to target one block in isolation:

[data-block="welcome_0"] .MessageMediaBubble {
  position: relative;
  left: 60px;
}

[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; }

:nth-child(n), :nth-child(odd), and :nth-child(even) are supported inside the selector — useful for striping a list of options.

For brick blocks (nested groups), use only the final child id, not the parent path.

Rich HTML in a message

A message body accepts a raw HTML fragment, not just text. For best rendering inside the builder, wrap the HTML in a code block in the message editor.

Use this when CSS alone can't get you the layout you want — typically rich profile cards, structured product listings, or media + caption combinations.

<div class="message-card">
  <img src="https://i.pravatar.cc/300" alt="" width="48" height="48"
       style="border-radius: 50%; float: left; margin-right: 12px;" />
  <div>
    <p style="font-weight: 700; margin: 0;">John Smith</p>
    <p style="opacity: 0.7; margin: 0;">@johnsmith</p>
  </div>
  <p style="clear: both; padding-top: 8px;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Phasellus nec iaculis mauris.
  </p>
  <p style="opacity: 0.5;">
    <time datetime="2026-01-01">11:09 PM · 1 Jan 2026</time>
  </p>
</div>

Pair the HTML with a targeted CSS rule from the Custom CSS panel (e.g. .message-card { ... }) to keep styling out of inline style attributes when the same layout appears in multiple messages.

Class reference

Background

.Background          { opacity: 0; }
.Background--image   { border: 5px solid black; }

Header

.Header { background-color: lightgrey !important; height: 70px; }
.Header { box-shadow: none !important; }
.Header__Title { text-align: right; }

Message bubbles

.MessageBubble           { width: 600px; }
.MessageBubble__content  { font-weight: 900; }
.is-author-user          { background-color: grey !important; }

Media

.MessageMediaBubble img  { width: 600px !important; transform: scale(0.9); }
.MessageMediaBubble      { box-shadow: 10px 10px 10px 10px; }
.modal                   { display: none !important; }   /* disable the lightbox */

Buttons

.input-small-header                       { color: red; }
.buttons                                  { flex-wrap: nowrap !important; }
.input-buttons .is-multiple               { background-color: lightgrey !important; }
.InputCards__SlideInfoContent .is-pulled-right { display: none; }

Form block

The multi-question Form block lives inside [data-type="multi_question"]. Index individual questions with :nth-child(n) (1-based).

Dynamic data

.InputCards__Title        { color: green; }
.InputCards__Description  { color: red; }
.InputCards__CTA          { color: brown !important; border-color: blue !important; }
.InputCards__ArrowNext    { background-color: green; }

Miscellaneous

.lb-loader               { color: blue; }
.BackButton__Button      { display: none; }
.MessageDate             { display: none; }
.button--PersistentMenu  { background-color: transparent; border-radius: 3px !important; }

Scrollbar (WebKit only)

::-webkit-scrollbar       { -webkit-appearance: none; width: 8px; }
::-webkit-scrollbar-thumb { border-radius: 5px; background-color: rgba(0,0,0,0.5); }
.Body                     { overflow: overlay !important; }

Firefox doesn't honour ::-webkit-scrollbar. Use scrollbar-width / scrollbar-color there.

Widget launcher and bubble

Used by the Popup and Livechat widgets. Some classes live on the parent page (the wrapper that contains the iframe), others live inside the iframe.

Because the launcher sits outside the iframe and the proactive sits inside, real launcher customisations almost always touch both stylesheets. See Embedding → Injecting CSS at runtime for the two-scope pattern.

A common recipe — bounce the launcher on hover:

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

.LivechatLauncher {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
}

.LivechatLauncher:hover {
  cursor: pointer;
  animation-name: bounce;
  animation-iteration-count: infinite;
}

CSS variables

Some Landbot internals are driven by CSS custom properties — override them on * (or a more specific selector) instead of writing full rules.

* {
  --form_inputs_border_color: blue !important;
}

See also

• Embedding in your app — the parent-page CSS injection patterns these classes are usually used with.
• Landbot.Popup, Landbot.Livechat — the widgets that own the launcher and proactive UI.
• Themed examples in the help center — Back to School, Minimalist, Translucid, RTL, Carrd, CV Template, Video Bubble, Typewriter, and more end-to-end designs you can copy and adapt.