Chat window: style, size, side panel and mobile view

Colours set the character, shape does the rest. Under /app/projects/{id} in the Appearance tab, section Brand, you will find two groups of switches: Style (shape rather than colour) and Window (how the open window appears). If you choose nothing, everything stays at the default. You save with Save; the preview under Widget home screen shows the real widget.

The design assistant's templates set these switches at the same time.

Style

• Header – gradient (default), flat or glass. Applies to the header of the home screen and the title bar.
• Density – normal (default), compact or airy. Spacing on the home screen and in the conversation.
• Bubbles – soft (default, follows your corner radius), round (18 px) or square (4 px).
• Shadow – soft (default), hard or none. Applies to the window, not to the launcher.
• Avatar – round (default) or square.
• Input field – flat (default) or pill (strongly rounded, with round buttons).
• Cards – outlined (default) or flat. Applies to home screen tiles, help rows and cards in the conversation.

Window

• Window size – normal (default, 380 px wide), wide (440 px), narrow (340 px) or tall (almost the full screen height, 960 px at most). The normal height is 620 px, less on small screens.
• Layout – floating window (default) or side panel. The side panel sits at full height at the edge, on the launcher's side, and slides in from there. The launcher steps back while it is open. It is closed with the button in the header.
• Background – the ground of the message area: plain (default), dots, grid or gradient (a hint of your brand colour).
• Text size – normal (default, 14 px), large (15.5 px) or small (13 px). Applies to bubbles and input, not to the launcher.
• Opening animation – slide in (default), zoom in, fade in or none. If the visitor has set “reduce motion” in their system, the animation is dropped anyway.
• Visitor bubble – the colour of your visitors' bubbles: primary colour (default, a light mix of your brand colour), accent colour or neutral (grey). Here too the widget recalculates the text until it is readable.

Window size and layout only take effect from 481 px screen width. Below that the chat always opens full-screen (see below).

In code

All switches are in the brand under stil. The values are the internal names:

• kopf: verlauf, flach, glas
• dichte: normal, kompakt, luftig
• blase: weich, rund, eckig
• schatten: weich, hart, keiner
• avatar: rund, eckig
• eingabe: flach, pille
• karten: rahmen, flach
• fenster: normal, breit, schmal, hoch
• ansicht: schwebend, seite
• hintergrund: schlicht, punkte, raster, verlauf
• schrift: normal, gross, klein
• animation: gleiten, zoom, blenden, keine
• besucher: marke, akzent, neutral

An unknown value falls back to the default.

ReactiveChat('setBrand', { stil: { ansicht: 'seite', hintergrund: 'punkte', schrift: 'gross' } });

On the snippet as data-rc-brand='{"stil":{"ansicht":"seite"}}', the brand counts as this page's own brand and beats your account, see Colours, font and theme.

Motion

With data-rc-motion on the snippet you control animations: auto (default, follows the visitor's system setting), reduced (no motion) or full.

data-rc-motion="reduced"

Header

The header shows who is answering:

• If someone from your team is writing, it shows their display name. Each team member maintains it in their personal settings, see Team, console and notifications.
• If the AI assistant is answering, it shows its name from AI & knowledge → Assistant (default “Ada”), see AI assistant.
• Otherwise the title “Chat”. You change it and the second line (“We're here”, “AI assistant”) under Texts and languages with the keys header.title, header.subtitle_online and header.subtitle_bot.

Avatars show the first letter of the name, and the ✦ sign for the assistant. Your own photos for team members cannot be stored at the moment.

The header also has an envelope icon that lets visitors have the conversation transcript emailed to them. You switch it off under Rules & service → Conversation transcript by email, see Availability, forms and service.

The “Powered by reactive.chat” note

On the free plan, the note “Powered by reactive.chat” appears at the bottom of the window. From a paid plan on, you decide yourself under Appearance → reactive.chat inside the chat with the switch Hide “Powered by reactive.chat”. The default is then: hidden. The wording of the note cannot be changed.

On phones

Up to 480 px width, and on devices held sideways up to 480 px height, the chat opens full-screen: without corners, at the full visible height, even when the on-screen keyboard opens. The input field uses 16 px text so that the phone does not zoom in, and buttons are at least 44 px in size. The launcher steps back while the chat is open.

Window size and side panel do not apply on phones. The other style switches, colours and text size do. You set the size of the launcher on phones under The launcher.