When you open a chatbot, the builder starts on the Design tab. It's the first of five tabs: Design, Behaviour, Integrations, Sources, and Assets. Design controls what visitors see. The other tabs control what your chatbot knows and does.
How the Design Tab Works
Pick a screen
The screen picker at the top lists the screens in the order a visitor meets them: Chat button, Lead Form, Conversation, Commands, and Global. Global holds the styles shared by every screen.
Switch between Content and Branding
On Chat button, Lead Form, and Conversation, a Content / Branding toggle sits under the screen picker. Content holds the text and fields. Branding holds colors, fonts, and images. Commands has content only and Global has branding only, so they show no toggle. Your choice stays put as you move between screens.
Check the preview
The preview on the right shows the screen you picked. Click any element in it, such as the lead form heading or a message bubble, to jump to the setting that controls it.
Where Each Setting Lives
| Screen | Content | Branding |
|---|---|---|
| Chat button | Message Text, the bubble shown next to the button | Button style (Classic, Wide, or Spotlight Bar), position, icon, message bubble, shadow, and offsets |
| Lead Form | Lead Capture (show the form, OTP login), heading text, submit button label, and form fields | Header background image and color, logo, header and body text, and the submit button |
| Conversation | Heading, greeting message, status text, input placeholder, command hint, predefined options, and AI follow-ups | Header, message bubble colors, user and bot avatars, send button, and font sizes |
| Commands | Navigation commands, up to 10 | None. This screen has content only. |
| Global | None. This screen has branding only. | Font family, body background color, border radius, shadow, and the Show Branding badge |
Buttons Above the Screens
- Import Brand fills in your colors, logo, and header image from your website. See Import Brand.
- Import Styling opens the styling template library so you can start from a ready-made look.
- Reset offers Reset Content and Reset Styling. Each one returns every screen to its defaults, and it can't be undone.
Video Tutorials
These were recorded with the earlier Content tab. The settings are the same; find them under Design, on the screen named in each video.
Design Tab Guides
Lead Form
Heading text and the fields visitors fill in before the chat starts
Lead Capture & OTP Login
Turn the lead form on or off and require phone verification
Conversation & Chat Button
Greeting, quick replies, AI follow-ups, and the chat button message
Navigation Commands
Shortcuts that take visitors straight to your key pages
Branding
How the Branding view works, plus Import Styling and Reset
Import Brand
Pull colors, logo, and images from your website in one step
Branding by Screen
Every color, font, and image setting, screen by screen
Live Preview
Check each screen as you edit, then test the full chat