Chat Header Menu and Download Transcript

Chat Header and Download Transcript

The MxChat chat widget header carries the bot’s avatar, name, and status, plus a small set of action buttons on the right. Version 3.2.5 redesigned the header so that overflow actions live behind a single 3-dot menu instead of cluttering the top bar. The first item to live in that menu is Download Transcript, which exports the current conversation as a Markdown file.

Header Anatomy

Reading left to right inside the chat header, you’ll find:

• Avatar and bot name — pulled from your bot settings.
• Online status indicator — green dot when the bot is available.
• Action buttons — typically the close button on the far right, with an optional 3-dot button to its left when at least one overflow action is enabled.

If no overflow actions are enabled, the 3-dot button is hidden entirely. The header does not show empty controls.

Download Transcript

What it does

“Download Transcript” exports the current conversation as a Markdown (.md) file. The file contains every visible message in the chat — user messages, AI replies, and live-agent replies — in chronological order, with each block labelled by sender.

The file is generated entirely in the visitor’s browser. No request is made to your server, no transcript is uploaded anywhere, and nothing is stored on the visitor’s machine until they confirm the download. This makes the feature safe to enable even on sites with strict privacy requirements.

Enabling it

1. Open MxChat → Settings → Chatbot.
2. Find the Download Transcript Button setting (legacy installs may show it as Print Button — the same setting, repurposed).
3. Toggle it on. Optionally customise the button label and the transcript header title.
4. Save.

The 3-dot menu will now appear in the chat header for all visitors. Clicking it reveals the Download Transcript item; clicking the item triggers the file download.

Output format

The transcript file is named mxchat-transcript-YYYY-MM-DDTHH-MM-SS.md. The body looks like this:

# Chat transcript

Exported: 5/12/2026, 9:14:08 AM

---

**User**

How do I enable streaming?

**AI Agent**

Open MxChat → Settings → Streaming, pick a streaming-capable model, save and reload.

**User**

Thanks.

Live-agent replies are labelled **Live Agent**. In-flight “thinking” placeholders and temporary system messages are stripped before the file is written.

3-Dot Overflow Menu

The 3-dot menu is a generic overflow container. Today it carries one item (Download Transcript); the same component will host future actions without changing the visible header layout.

Theming

The dropdown automatically inherits the active bot’s bubble colors, so the menu reads correctly whether your chatbot uses a light theme, a dark theme, or a custom palette painted by the MxChat AI Theme Customizer add-on. There is nothing to configure — the menu picks up the bubble’s computed background and foreground colors at open time and adjusts itself.

If you’ve set explicit values for bot_message_bg_color and bot_message_font_color in your settings, those flow through to the menu via the --mxchat-menu-bg and --mxchat-menu-fg CSS custom properties. To override the menu colors independently, set those custom properties on .mxchat-header-menu-wrap in your site’s CSS.

Accessibility

• The trigger button has aria-label="More options", aria-haspopup="menu", and an aria-expanded state that toggles on open/close.
• The dropdown is exposed as role="menu" with focusable role="menuitem" children.
• Open and close work with mouse, touch, the keyboard (Enter / Space on the trigger), and Escape to dismiss. Arrow keys move focus between items.
• Clicking outside the menu closes it.