Appearance and user interface
The three Aimogen Pro chatbot designs, and every colour, size, avatar, sound and layout setting available.
Chatbot appearance is configured on AI Chatbot › User Interface and AI Chatbot › Styling, with a live preview in Custom Chatbot Builder.
Designs#
Chatbot Design chooses the base layout:
| Value | Character |
|---|---|
default | The classic Aimogen layout |
modern | A contemporary layout with rounded bubbles and more whitespace |
messenger | Resembles a messaging app |
Pick the design first — it changes which styling options visibly matter.
This tutorial was recorded before Aiomatic was renamed to Aimogen Pro. Some labels or interface elements may differ slightly from the current version.
Themes#
Chatbot Theme applies a saved colour set. Themes are stored as aiomatic_themes posts, so you can build
and reuse your own rather than setting twenty colours per placement.
Chrome#
| Setting | Controls |
|---|---|
Show Chatbot Header | The header bar with name and avatar |
Show Chat Log File Download Button | Lets visitors download the conversation |
Show Text-To-Speech Mute Button | Mute control, when speech is enabled |
Show Disable Internet Access Button | Lets visitors turn off web lookups |
Disable Internet Access Button Default State | Whether it starts on or off |
Show Chat Clearing Button | Lets visitors clear the conversation |
Dimensions#
| Setting | Default | Controls |
|---|---|---|
Chat Form Width | — | Overall width |
Chat Form Height | — | Fixed height |
Chat Form Min-Height | — | Minimum height when content is short |
Chat Font Size | — | Base font size |
Chat Bubble Width | — | Maximum bubble width |
Chatbot Width | 460px | Width of the globally injected chatbot |
Avatars#
| Setting | Controls |
|---|---|
Show AI Chatbot Avatar In Conversation | Bot avatar beside each reply |
Show User Chatbot Avatar In Conversation | Visitor avatar beside each message |
Chat Top Avatar Width / Height | Header avatar size |
Chat Conversation Avatar Width / Height | In-conversation avatar size |
Bot Avatar/Chat Bubble Alignment | Left or right for the bot |
User Avatar/Chat Bubble Alignment | Left or right for the visitor |
Colours#
| Setting | Applies to |
|---|---|
Form Background Color | The whole widget |
Input Background Color | The message input |
User Font Color / User Baloon Background Color | Visitor messages |
AI Font Color / AI Baloon Background Color | Bot messages |
Input Border Color, Input Text Color, Input Placeholder Color | The input field |
Persona Name Color, Persona Role Color | Persona labels |
Submit Button Color, Submit Button Text Color | The send button |
Voice Button Color, Voice Button Activated Color | The voice input button |
Waveform Animation Color | The speaking animation. Default violet |
Input area#
| Setting | Controls |
|---|---|
Chat Input Placeholder | Placeholder text |
Chat Input Submit Button Text | Button label |
Chat Input Submit Button Image URL | An icon instead of text |
Full Width Buttons | Buttons span the width |
Chat Compliance Text | Small print below the input — the place for an AI disclosure |
Chat Compliance Text is worth using. A short line such as "Responses are AI-generated and may be
inaccurate" sets expectations honestly and costs nothing.
Feedback and motion#
| Setting | Controls |
|---|---|
Show Response Placeholder Bubble For AI Responses | A typing indicator while the reply generates |
Show Response Placeholder Bubble ... Delay | How long before it appears |
Chatbot 'Send Message' Sound Effect | Sound on send |
Chatbot 'Receive Message' Sound Effect | Sound on receive |
Enable Visual Waveform Animation When The Chatbot Is Speaking | Waveform during speech |
Chatbot Response Delay (ms) | Artificial pause before replying |
Typewriter Delay (ms) | Typing effect speed |
The typing indicator, added in 2.6.8, is worth enabling: a chatbot that appears to do nothing for four seconds feels broken.
Custom HTML and CSS#
| Setting | Controls |
|---|---|
Custom Header | HTML injected above the conversation |
Custom Footer | HTML injected below |
Custom CSS | Styles scoped to the chatbot |
Use Custom CSS for anything the settings do not cover. The chatbot markup is stable across releases, but
check after a major update.
Per-instance styling#
Every appearance setting has a shortcode attribute:
[aimogen-chat-form design="modern" height="520px" width="100%"
ai_background_color="#f4f4ff" user_background_color="#5b52e0"
user_font_color="#ffffff" show_header="1" no_padding="1"]Full list in Shortcode reference.
Related#
Still stuck? Open a support ticket and include the diagnostics from Aimogen Pro › System & Logs › System Info.