Customize the chat surface

The Chat App Customizer is where you brand the full-page chat surface rendered by the [mga_chat_app] shortcode. Every change you make belongs to the bot selected in the Bot workspace dropdown — there is no “global” config and you can never accidentally save settings against the wrong bot.

One bot per save

The customizer’s URL is /wp-admin/admin.php?page=mga-wp#/bots/<id>/chat-app/<section>. The <id> in that URL is the bot the form is reading from and writing to. Switch the dropdown, the URL changes, and the form re-loads for the new bot — your previous unsaved edits are not carried across.

Open the customizer

1. In the WP admin, open MGA WP.

2. In the Bot workspace dropdown, pick the bot you want to brand.

3. Click Chat app sections → Branding in the sidebar (or any other section).

4. The right column is the live form; the right of the form is a live preview that reflects every change before you save.

5. Click Save changes in the sticky top toolbar to persist. Reset reverts the entire form to defaults; Discard drops unsaved edits and reloads the saved state.

What the customizer looks like

M

MyGPT Assistantsfor WordPress

Bot workspace

Select bot

Soporte CCreators

Chat app sections

BrandingWelcomeMessagesComposerSidebarFooter & LegalBehaviorAdvancedEmbed

←

Chat App Customizer Unsaved changes

Soporte CCreators — Configure the full-page [mga_chat_app] shortcode

↺ Reset↻ Discard✓ Save changes

⚙

Conversation behavior

How the chat surface reacts during a conversation.

Auto-scroll to newest messageScrolls down automatically as the assistant streams a reply.

The customizer is per-bot

Below is the same customizer pane after you switch the dropdown to a different bot. Notice the title in the toolbar updates — and the saved field values are independent.

M

MyGPT Assistantsfor WordPress

Bot workspace

Select bot

Sales Concierge

Chat app sections

BrandingWelcomeEmbed

←

Chat App Customizer

Sales Concierge — Configure the full-page [mga_chat_app] shortcode

✓ Save changes

🎨

Colors

Brand-level palette for the chat surface.

Primary color

#3b82f6

Used for accents, focus rings and the send button.

Live preview

Wider screens render a second live-preview pane on the right of the form. Anything you type updates instantly, even before saving — that preview uses the same React surface and stylesheet as your published [mga_chat_app] shortcode, so what you see is exactly what visitors will see.

What you can customize

Section	What it controls
Branding	Theme (auto/light/dark), density, max content width, border radius, primary/accent/background/surface/text colors, font family, brand logo, bot avatar.
Welcome	Header title & subtitle, welcome heading & subheading, suggested prompts (one per line, max 6), hide-after-first-message, randomize prompts.
Messages	Bubble shape (rounded / pill / square), per-side bubble & text colors, show avatars, show timestamps, per-message actions (sources / regenerate / copy / feedback).
Composer	Placeholder text, max message length, Enter vs Cmd/Ctrl+Enter to send.
Sidebar	Enable conversations panel, sidebar title, “New chat” label.
Footer & Legal	Powered-by line, footer HTML, privacy & terms URLs.
Behavior	Auto-scroll, Require WordPress login, sign-in copy & redirect, guest mode, empty/network/rate-limit error copy.
Advanced	Custom CSS injected as a scoped <style> inside the chat surface.
Embed	Per-bot shortcode you paste into a page or post — see the next tutorial.

Continue to Copy the embed shortcode →.