Chatbot Modes and Layout Guide

Mode Comparison

Mode	Runtime Behavior	When to Use
`chatbot`	Fixed floating launcher opens/closes chat window.	Site-wide support access across many pages.
`chat`	Inline panel rendered directly in target container and kept open.	Dedicated support pages or embedded workflow panes.

Reference Examples

html

<link rel="stylesheet" href="https://cdn.cortexvia.in/chatbotsdk-web.css" />
<script src="https://cdn.cortexvia.in/chatbotsdk-web.iife.js"></script>
<div id="cv-chat"></div>
<div id="cv-inline-chat" style="height:72vh"></div>
<script>
  window.ChatbotSDK.mount("#cv-chat", {
    chatbotKey: "ctx-cb-xxxxxxxxxxxxxxxx",
    config: {
      mode: "chatbot",
      defaultOpen: false,
      position: "bottom-right"
    }
  });

  window.ChatbotSDK.mount("#cv-inline-chat", {
    chatbotKey: "ctx-cb-xxxxxxxxxxxxxxxx",
    config: {
      mode: "chat",
      title: "Support",
      inputPlaceholder: "Ask anything..."
    }
  });
</script>

Layout Rules

Floating mode: position controls the left or right anchor, and the widget manages the launcher and chat window.

Inline mode: widget fills available target area; host container should provide stable height.

defaultOpen: applies to chatbot mode only; inline chat is always open.

Header controls: hideHeader reduces UI density when needed.

Recommended Pattern

Use chatbot for broad product coverage and always-available support entry. Use chat in task flows where chat must stay visible and persistent.

Related References

Config Reference

All mode-related keys and defaults.

Style Overrides

How to tune shell and message layout in each mode.

Embed Quick Start

Baseline setup before layout tuning.

Embed Troubleshooting

Fix mode mismatch and placement issues.