Design your chatbot by clicking on it

Shipped

July 9, 2026

Area

Studio

Available on

Every plan

Changing how your chatbot looks used to mean hunting. The words were on one tab, the colours on another, and lead form options sat in a separate settings panel. You'd change something, then look around the preview to see where it landed. The chatbot builder now works the way you'd expect a design tool to: you look at the chatbot, click the part you want to change, and the right settings open.

What's new

• One Design tab. The old Content and Styling tabs are merged into a single Design tab, next to Behaviour, Sources and Assets.
• Pick the screen you're working on. A switcher at the top lists each part of your chatbot: Chat button, Lead Form, Conversation, Commands and Global (fonts, window shape and other settings that apply everywhere). The preview shows that screen as visitors will see it.
• Words and looks side by side. For each screen, flip between Content (the text, labels and messages) and Branding (colours, fonts, sizes and icons) without leaving the screen.
• Click the preview to edit. Hover over the preview and parts of it light up. Click the header, the message bubbles or the input box, and the panel scrolls straight to those settings.
• Lead capture where you see the form. The lead form switch and its fields now live on the Lead Form screen, under Lead Capture, instead of in a separate panel.
• Changes you back out of stay backed out. If you change settings in Advanced Settings and then close the panel without saving, those changes are undone. Edits you'd already made in the designer are kept.

How to use it

1. Open your chatbot in Studio and go to the Design tab.
2. Pick a screen from the switcher, for example Conversation.
3. Choose Content to edit the words, or Branding to edit the look.
4. Or click any part of the preview to jump to its settings.
5. When you're happy, click Test Behaviour to try a real conversation, then publish.

Good to know

• Edits are a draft until you publish. As with every change in Studio, the designer updates your draft. Visitors keep seeing the live version until you publish, and version history lets you go back if you change your mind.
• Resetting is per area. Reset on the Design tab lets you reset all content or all styling to the defaults. Both ask you to confirm, because they can't be undone.
• Works on smaller screens. On a narrow window the screen switcher becomes a row of buttons so you can still move between screens.
• Nothing visitors see changed. This update is about how you edit your chatbot in Studio. Your chatbot looks the same to visitors until you change something and publish.

For ideas on what to change, see our guide to chatbot design.