This companion guide extends the Deployment article by drilling into the Design tab of the builder. Each subsection mirrors the UI panels, allowing you to follow along step-by-step as you configure your chatbot’s visual and interactive elements.
1. Opening the Design Tab #
Click the Design tab in the workspace tab strip of your chatbot builder interface. This section manages the visual presentation of your chatbot, including colours, branding, messages, and interactive prompts. All changes here apply immediately, meaning the interface updates live. It’s crucial to treat this as real-time editing rather than a draft environment: each change directly impacts user experience instantly.
2. Chat Window #
2.1 Theme #
BG (Background) / Header Colours
Two colour pickers control the chat window’s gradient background. Colours can be selected via an RGB hex input or from the built-in palette. The final appearance is generated using a vertical CSS gradient (linear-gradient(0deg, BG → Header)), creating a visually engaging backdrop. If a solid colour is preferred, ensure both BG and Header colours match exactly.
Hide Branding
A toggle option enables you to remove or show vendor attribution in the chat footer. Hiding attribution can impact compliance with certain usage policies or terms of service, so ensure your licensing permits this action before disabling it. (You need to be on a higher tier plan)
2.2 Branding Fields #
Chat Window Header
Enter the text that will appear prominently above every new conversation in bold. This header typically contains your chatbot’s name or the associated product/service name. There’s a character limit of 60, and any text exceeding this will automatically truncate with ellipses (…). Keep it clear, concise, and instantly recognisable for users.
Display Name
This field defines the chatbot’s visible persona name appearing next to its avatar in every chat bubble. It should be consistent, as changes can confuse conversation history and context recognition if your bot leverages the display name in any system prompts. Choose a user-friendly, relatable persona name aligned with your brand voice.
Bot Profile Picture
Upload your chatbot’s avatar or branding image here. The interface automatically crops images to a 1:1 square aspect ratio and resizes them to 96 × 96 pixels, storing an additional higher-resolution (retina) version. PNG with transparent backgrounds is recommended, although JPEG uploads will automatically convert to PNG format. This image is the visual representation of your chatbot and should be carefully chosen to reflect your brand.
2.3 Initial Engagement #
Initial Welcome Message
Use the provided rich-text editor to craft your chatbot’s opening message. Supported formatting includes bold, italic, bullet points, inline code snippets, clickable hyperlinks, and emojis. HTML sanitisation automatically strips unsafe tags, scripts, and iframes for security. The welcome message is purely visual, it’s rendered on the client side and does not interact with the chatbot’s logic or backend models. Note that this message is styled in the web chat window; a plain-text version of it is used on voice, SMS, and other non-visual channels.
Input Placeholder
Sets the greyed-out hint text shown inside the message box before a visitor starts typing. Use it to nudge visitors toward the kind of question your chatbot handles best.
Auto Popup After X Seconds
Enter how many seconds the chatbot should wait before automatically popping open on a visitor’s screen; leaving it at 0 disables auto-popup entirely. A device dropdown next to this field lets you restrict auto-popup to All Devices, Desktop Only, or Mobile Only. To avoid repeatedly interrupting the same visitor, the popup only fires once per hour for a given user, regardless of how many pages they visit in that window.
2.4 Additional Options #
The Chat Window panel also includes a set of smaller technical toggles for finer control over behaviour and integrations:
- Fab Button Tooltip: a short label shown on hover over the floating chat button.
- Disable Auto-scroll: stops the chat window from automatically scrolling to the newest message, useful if your embed handles scrolling itself.
- Hide Function Call Labels: hides the internal “calling a tool/function” status labels that otherwise appear in the conversation while the chatbot is working.
- Translate Static Text: lets you translate the built-in UI strings (placeholders, buttons, labels) into another language, separate from the chatbot’s own conversational responses.
- Enable Safe Mode: applies stricter content filtering to chatbot responses.
- Embed into Element / When Element is found: advanced embedding options for injecting the chat window into a specific element on your page instead of the default floating widget. Leave these empty unless you specifically need custom embedding; the “When Element is found” setting lets you fall back to showing the floating button if the target element isn’t present on the page.
3. Video Message #
The Video Message panel lets you attach a short auto-playing video to your chatbot’s floating button, a lightweight way to grab attention before a visitor engages with text chat.
Toggle Enable video messages to turn the feature on, then upload a default video file. MP4 is recommended in 9:16 portrait format, at a recommended resolution of 1080 × 1920 and a maximum size of 50 MB. Once uploaded, you can preview it either as it appears on the floating button or as the full video, and remove or replace it at any time.
You can set a default chat button text shown alongside the video, and optionally add a second button with its own custom text and URL, for example to link out to a landing page instead of opening the chat.
Two settings control how often the video is shown: how many times a visitor sees it (for example, every visit, unlimited) and how long to hide it afterward (for example, 6 hours) before it can appear again for that visitor.
Video Overrides let you attach a different video to specific pages or campaigns instead of the default one. Add an override, attach a video to it, and target it to particular pages; if no override matches, the default video is used for all pages.
4. Help Link (optional panel) #
The Help Link panel allows you to provide users with quick access to helpful information such as FAQs, support details, or privacy statements without leaving the chat interface.
Link Text
This sets the visible anchor text shown in the chat window header. If left blank, the help button will be hidden entirely. Keep this text short and intuitive to encourage clicks without crowding the interface.
Help Text
Use the rich-text editor to create the content displayed in a modal popup when a user clicks the Help Link. The help content supports standard formatting, including bold, italic, lists, links, and emojis. Since this modal opens inline, it cannot load remote or external HTML. This feature is best suited to static content, such as FAQ snippets or escalation instructions. Content length should be concise (less than ~20 KB) to maintain readability and ensure optimal loading performance.
5. Auto Engage (optional panel #
5.1 Behaviour #
Auto Engage displays a floating call-to-action (CTA) button to first-time visitors. Once clicked, this CTA initiates interaction automatically, helping guide users toward useful or predefined chatbot actions. This functionality relies on browser cookies, appearing once per visitor unless cookies are cleared.
Auto Engage Button Text
Define the text displayed within the CTA button, ideally short and action-oriented, such as “Let’s Begin!” or “Start Chatting!”. Shorter button text ensures readability, especially on mobile screens.
Auto Engage Message
The message entered here is automatically sent on behalf of the user when the CTA button is clicked. As this message is treated exactly like user input, it does pass directly to the chatbot’s backend for processing and response generation. Ensure your message is explicit and concise, forming a complete sentence or clear command.
5.2 Best Practice #
- Limit the Auto Engage message to one specific task or action to simplify chatbot processing and ensure immediate, relevant responses.
- If you use placeholders (e.g.,
{{accountId}}or{{displayName}}), confirm that your middleware or integration logic populates these values before passing the message to the chatbot. Otherwise, the chatbot will treat them as literal text.
6. Sample Prompts (optional panel) #
This feature allows you to offer users predefined example questions or prompts at the start of a new conversation, helping guide user interactions.
Prompt List
Add prompts to the list by typing into the provided input field and clicking the plus (+) button. Prompts appear to users as clickable buttons (chips). You can reorder prompts by dragging and dropping them within the list. This allows you to prioritize certain prompts over others easily.
Show Prompts above Fab Button
When toggled, prompt chips are displayed above the floating chat button instead of only inside the opened chat window, making them visible to visitors before they open the chat.
Show Different Prompts for Mobile
When toggled, this feature activates a separate prompt list tailored specifically for mobile devices, which may have screen size or readability considerations. Without separate mobile prompts defined, the default desktop prompts automatically appear on mobile as a fallback.
Guidance #
- Keep prompts under 80 characters to ensure they remain readable and neatly formatted, especially on mobile.
- Phrase prompts conversationally, using second-person phrasing, e.g., “How do I reset my password?”.
- If Auto Engage is enabled, the sample prompts will not initially appear, preventing the screen from becoming cluttered on first user interaction.
7. Open Chatbot on Element Click (optional panel) #
This panel lets you open the chatbot with a prefilled prompt when a visitor clicks a specific button or element on your website, so you can respond contextually to where they are. For example, a “help” button placed next to your pricing table could trigger the chatbot to start answering pricing questions automatically.
Click Add New to create a trigger. Noem AI provides a library of ready-made templates organised by integration (Zapier, Make.com, Shopify, and others), channel (Web Chat Widget, Embedded On-Page, SMS & Text, Voice, and others), and use case, which you can use as a starting point and then customise for your own site elements.
8. Limits #
The Limits panel lets you cap how much a visitor can use your chatbot, which is useful for controlling cost and preventing abuse.
Character Limit
The maximum number of characters allowed per message a visitor sends.
Message Limits
The maximum number of messages a visitor can send within a conversation before the limit is reached.
Limit Reached Message
The message shown to a visitor once they hit the character or message limit, for example letting them know they can be connected to a human instead.
9. Versioning & Rollback #
Each change made in the Design tab saves a timestamped snapshot to your configuration history, accessible under History → Config Snapshots. You can roll back changes at any time by selecting a previous configuration snapshot. However, remember that rollback affects only textual and configuration-based elements, uploaded images and other assets stored externally may not restore if deleted.
10. Testing Your Design #
Always test your chatbot design thoroughly before making it available to users:
- Switch to Test mode from the top bar to preview interactions in real-time.
- Use the device emulator dropdown to ensure your chatbot interface renders correctly on different devices: mobile, tablet, or desktop.
- Clear your browser’s local storage or use incognito/private browsing sessions to simulate the experience of a first-time visitor. This is essential for testing features such as the Auto Engage popup.
11. Summary #
The Design tab provides the tools to control your chatbot’s visual identity and user experience without affecting backend logic or conversational models. Approach configuration methodically: start with visual basics in the Chat Window, layer in extras like a Video Message, add helpful context via Help Links, encourage initial user engagement with Auto Engage, offer helpful prompts to guide ongoing interactions, and set limits to keep usage in check. Separating presentation from chatbot intelligence allows flexible, risk-free iterations on visual and interactive elements, empowering your team to optimize chatbot UX independently of core technical configurations.
