How to style your Landbot web chat with the Landbot Plugin or the Landbot MCP

Desirée M Updated by Desirée M

The Landbot Plugin restyles your Landbot web chat to match your brand from a one-sentence description, such as "make it look like our website" or "dark, with our brand blue." The landbot-style skill writes the design as one Custom CSS block, applies it through the Landbot MCP and, once the design is live, checks it on the agent's share link. The Landbot MCP can also apply a design on its own, without these checks.

What can the Landbot Plugin and the Landbot MCP change in your web chat's design?

The Landbot Plugin and the Landbot MCP change these parts of the web chat design with Custom CSS:

● Colors: background, text, accent color, message bubbles and buttons.

● Mode: light or dark.

● Shape: square, soft or rounded corners, and boxed or underlined answer fields.

● Fonts: any system font or Google Font.

● Details: spacing, button states and scrollbars.

● Back button: show or hide the button visitors use to change their previous answer.

The Landbot Plugin and the Landbot MCP don't change the logo, avatars, icons or animations.

For a dark look, also set the colors in the builder's Design settings. Custom CSS doesn't change them, and without them the page shows a white loading screen before the chat appears.

How to style your web chat with the Landbot Plugin

1️⃣ Open Claude Code or the Claude desktop app with the Landbot Plugin installed.

2️⃣ Describe the look in one sentence, or give a reference: your website's URL, a well-known brand, or "light" or "dark."

3️⃣ Claude confirms the look in one line. For an agent you already have, it asks for your approval before changing the design.

4️⃣ Claude applies the design. Once the design is live, Claude checks it on the agent's share link. In the Claude desktop app, you see the check in a browser panel next to the chat, at desktop and phone width.

Landbot web chat in a dark theme with blue answer bubbles and company size buttons
For a new agent, describe the look in the same request, for example "build it and make it look like our website." The Landbot Plugin styles the agent before publishing it, so visitors see the new look from the first question.

How to style your web chat with the Landbot MCP

1️⃣ Ask your AI assistant for the look, for example: "Make my lead qualification agent's chat dark, with our brand blue."

2️⃣ The AI assistant writes the CSS and the Landbot MCP applies it to the agent.

3️⃣ Check the new look yourself, on a computer and a phone: on the agent's share link if the design is live, or with Preview in the Landbot builder if it's still in the draft.

The Landbot Plugin adds Landbot's own styling guide, checks the result on the live agent and offers the messaging-app and step-form behaviors. The Landbot MCP on its own does none of these.

Is the new design live right away?

The same rules apply to the Landbot Plugin and the Landbot MCP:

● Agent never published: the new design applies right away. No visitor can see the agent yet.

● Agent already published: the new design goes to the agent's draft. Open the agent in the Landbot builder and publish it to make the design live.

To see a design that's still in the draft, select Preview in the Landbot builder.
Publishing an agent through the Landbot MCP or the Landbot Plugin doesn't publish design changes on an already-published agent. Publish the agent from the Landbot builder.
Switching an agent to the current web chat can't be undone. In an existing agent, Ask for a yes or a no blocks and Ask for a rating blocks stop appearing to visitors on the current web chat: build those questions with Buttons. Code blocks keep working.
Every design change answers with the previous design, so in the same conversation you can ask your AI assistant or AI coding tool to put it back. The previous design isn't stored for later, so keep a copy if you may want it back after the conversation ends.

How to add a messaging-app look or a step-by-step form

The Landbot Plugin includes two ready-made behaviors that go beyond colors and fonts:

● Messaging app: reply buttons inside the message bubble, message times, a "Today" label and "typing…" under the header name.

● Step form: a progress bar, a "2 of 5" counter and letter keys (A, B, C) for buttons.

Ask for one by name, for example: "Add the step form behavior." Claude gives you the code and the steps to paste it in the Landbot builder (Design › Custom code › Add JS, then Apply and Publish). The agent still works without it: the chat just keeps its regular look.

Both behaviors use Custom JS, which Landbot runs only on accounts with the Custom Code feature. It isn't available on the Sandbox plan or during the 14-day trial.

How to paste the design into the Landbot builder yourself

Ask your AI assistant or AI coding tool for the CSS if you prefer to apply it yourself:

1️⃣ Open the agent in the Landbot builder and go to Design › Custom code › Add CSS.

2️⃣ Delete everything in the field and paste the new CSS. Replace the old CSS instead of adding to it.

3️⃣ Select Apply, then Publish.

Why doesn't the new design show on the web chat?

A new design from the Landbot Plugin or the Landbot MCP doesn't show for one of these reasons:

● The design is still in the draft. On a published agent, the new design shows only after you publish the agent from the Landbot builder.

● Your account is on the Sandbox plan. The Sandbox plan doesn't apply Custom CSS. Custom CSS works on paid plans and during the 14-day trial.

● The agent uses the previous web chat version. Custom CSS only works on the current web chat. The Landbot Plugin switches agents it creates to the current version, and asks first before switching an agent you already have.

● A builder tab published an older design. Publishing from a builder tab opened before the change puts the older design back. Refresh the tab before publishing.

The Landbot Plugin keeps the web chat's Back button visible, including on phones, so visitors can change an answer.

💬 Design changes from the Landbot Plugin or the Landbot MCP apply to Web only.

Was this article helpful?

How to get started with the Landbot Plugin

How to get started with the Landbot MCP

Contact