Iframe & Embedded Chatbots

Aimogen chatbots can be rendered either natively inside the page or inside an iframe. Both modes use the same chatbot logic, personas, models, and rules. The difference is purely how the chatbot UI is injected and isolated on the frontend.

This choice affects styling, compatibility, and isolation — not intelligence.

---

Two Rendering Modes #

Aimogen supports two frontend rendering approaches:

• Native (DOM-based) chatbot
• Iframe-based chatbot

You choose the mode per chatbot.

---

Native Chatbot (Default Behavior) #

In native mode, the chatbot UI is rendered directly into the page’s DOM.

Characteristics #

• inherits theme CSS
• can be styled deeply
• feels fully integrated
• lighter markup
• easier visual customization

Advantages #

• seamless theme integration
• better control over fonts and layout
• easier to match brand design
• fewer browser restrictions

Downsides #

• theme CSS may interfere with chatbot styles
• requires more testing across themes
• possible conflicts with aggressive CSS rules

Native mode is ideal when:

• your theme is well-structured
• you want tight visual integration
• you control frontend styling

---

Iframe-Based Chatbot #

In iframe mode, the chatbot UI is rendered inside an isolated iframe.

Characteristics #

• fully isolated CSS
• sandboxed UI
• minimal theme interference
• consistent appearance across sites

Advantages #

• no CSS conflicts
• predictable layout
• safer on complex themes
• easier deployment on unknown themes

Downsides #

• limited deep styling
• iframe constraints apply
• slightly less “native” feel
• more restricted DOM interaction

Iframe mode is ideal when:

• themes are unpredictable
• CSS conflicts exist
• you want maximum isolation
• embedding chatbots into external layouts

---

Embedded Chatbots (Inline Placement) #

Besides floating widgets, chatbots can be embedded inline within page content.

Embedded chatbots:

• appear at a fixed position inside the page
• scroll with content
• feel like part of the layout

Embedding can be done using:

• blocks
• shortcodes
• theme hooks (depending on setup)

Embedded chatbots can be native or iframe-based.

---

Floating vs Embedded Behavior #

Floating Chatbots #

• fixed to screen edges
• visible across scroll
• ideal for support and assistants

Embedded Chatbots #

• placed inside content flow
• ideal for:
  • documentation pages
  • onboarding sections
  • product explanations
  • gated content

Placement rules still apply in both cases.

---

Visibility and Rules Still Apply #

Iframe and embedded chatbots do not bypass placement rules.

All of the following still apply:

• device targeting
• role targeting
• language targeting
• page/context targeting
• GDPR consent gating
• usage limits

Rendering mode affects how the chatbot is displayed, not whether it is allowed.

---

Performance Considerations #

Native Mode #

• slightly faster render
• fewer browser layers
• depends on theme complexity

Iframe Mode #

• adds iframe overhead
• slightly slower initial load
• more predictable behavior

In practice, performance differences are usually negligible compared to API latency.

---

Security and Isolation #

Iframe mode provides:

• CSS isolation
• reduced risk of theme breakage
• protection from aggressive JavaScript

Native mode relies on:

• theme compatibility
• proper CSS scoping

Iframe mode is safer on third-party or unknown themes.

---

Accessibility Considerations #

Both modes:

• support keyboard navigation
• support screen readers (depending on configuration)
• require proper color and contrast setup

Iframe mode may require additional attention for focus management.

---

Common Use Cases #

Use native mode when:

• branding matters
• you control the theme
• deep styling is required

Use iframe mode when:

• themes cause conflicts
• embedding on complex sites
• deploying chatbots broadly
• minimizing integration risk

Use embedded mode when:

• chatbot is part of the content
• context matters more than availability
• floating widgets are intrusive

---

What Rendering Mode Does Not Affect #

Rendering mode does not affect:

• AI model behavior
• personas
• conversation memory
• workflows
• lead collection
• privacy logic
• provider usage

Only the UI layer changes.

---

Best Practices #

• start with native mode
• switch to iframe if conflicts appear
• test on mobile and desktop
• test with caching enabled
• combine iframe mode with embedded placement for stability
• avoid over-styling iframe content

Choose isolation when stability matters more than aesthetics.

---

Summary #

Aimogen supports both native and iframe-based chatbots, as well as floating and embedded placement. Native mode offers deeper styling and tighter integration, while iframe mode provides strong isolation and predictability. The choice affects presentation only — chatbot intelligence, rules, and behavior remain unchanged.