Chatbot Styling & UI Options

Aimogen gives you full control over how each chatbot looks and feels on the frontend. Styling is completely separate from intelligence, personas, models, and logic. You can change the appearance without affecting how the chatbot thinks or responds.

All UI and styling options are configured per chatbot.

---

Styling Is Per Chatbot, Not Global #

Each chatbot has its own UI configuration.

This means:

• multiple chatbots can coexist with different designs
• changing one chatbot’s style does not affect others
• frontend appearance is isolated per instance

There is no forced global theme unless you intentionally replicate settings.

---

Chatbot Layout Types #

Aimogen supports different frontend presentation styles depending on configuration.

Common layouts include:

• floating chat widget
• fixed-position chat window
• embedded chatbot container

The layout determines how the chatbot is attached to the page, not how it behaves.

---

Positioning Options #

You can control where the chatbot appears on the screen.

Typical options include:

• bottom right
• bottom left
• fixed offsets from edges
• custom spacing from screen borders

Positioning affects only frontend display and has no impact on chat logic.

---

Open / Closed Behavior #

You can define how the chatbot behaves when a page loads.

Options include:

• closed by default
• open automatically
• open after a delay
• open based on user interaction

Auto-open behavior should be used carefully to avoid being intrusive.

---

Colors and Branding #

Each chatbot can be styled to match your site or brand.

You can control:

• primary and accent colors
• background colors
• text colors
• button colors
• hover states

These settings affect only the UI layer.

---

Avatars and Icons #

UI configuration includes visual identity elements such as:

• chatbot avatar
• launcher icon
• header icons

The avatar shown in chat messages is linked to the chatbot persona, while launcher and UI icons are part of styling.

Avatars do not affect AI behavior.

---

Typography and Spacing #

Depending on theme compatibility and configuration, you can control:

• font size
• line spacing
• message bubble spacing
• padding and margins

Aimogen follows WordPress and theme defaults unless overridden.

---

Message Bubble Styling #

You can customize how messages look:

• user vs chatbot message styles
• background colors
• alignment
• rounded vs sharp corners

Clear visual distinction between user and chatbot messages improves usability.

---

Iframe vs Native Rendering #

Aimogen can render the chatbot:

• natively inside the page DOM
• inside an iframe

Iframe mode provides:

• stronger isolation from theme CSS
• fewer styling conflicts
• slightly less flexibility for deep customization

Native mode allows tighter visual integration but may require theme compatibility.

---

Responsive and Mobile Behavior #

Chatbot UI is responsive by design.

You can control:

• mobile-specific layout behavior
• full-screen vs windowed chat on mobile
• tap targets and spacing

Always test chatbot UI on mobile devices.

---

Animations and Transitions #

Optional UI effects include:

• open/close animations
• message appearance transitions
• subtle motion effects

Animations are cosmetic only and can be disabled if desired.

---

Accessibility Considerations #

Styling choices can impact accessibility.

Best practices include:

• sufficient color contrast
• readable font sizes
• clear focus states
• non-intrusive motion

Aimogen does not enforce accessibility rules automatically; responsibility lies with configuration.

---

What Styling Does Not Control #

Chatbot styling does not affect:

• AI responses
• persona behavior
• conversation logic
• workflows or triggers
• provider or model selection
• usage limits

UI and AI are intentionally decoupled.

---

Common Styling Pitfalls #

• making the chatbot too intrusive
• poor contrast between text and background
• conflicting styles with the theme
• overusing animations
• hiding close/minimize controls

Always test from a user perspective.

---

Recommended Workflow #

• configure chatbot behavior first
• then apply styling
• test on desktop and mobile
• test with caching enabled
• adjust spacing and colors last

Styling is easiest once behavior is finalized.

---

Summary #

Aimogen’s chatbot styling and UI options allow you to fully control how each chatbot appears on the frontend, independently of its intelligence or logic. You can adjust layout, positioning, colors, avatars, and interaction behavior without affecting AI responses. Styling is per chatbot, optional, and designed to integrate cleanly with most WordPress themes when configured thoughtfully.