Appearance

What is Appearance?

Appearance templates let you customize how your instraCHAT agents look when embedded on your website or displayed within your WebApp. Each template controls the colors, text, and branding of the chat window, allowing you to match your brand identity.

You can create multiple appearance templates and assign them to different agents. This means you could have a professional blue theme for customer support and a friendly orange theme for sales — all using the same underlying AI.

Managing Appearances

From the Appearance tab in instraCHAT, you can view all your templates sorted by name or creation date. Each template card shows a preview of the chat window, how many agents are using it, and quick action buttons.

Available Actions

• Create — Add a new appearance template
• Edit — Modify an existing template
• Clone — Duplicate a template to create variations
• Assign — Apply the template to one or more agents
• Delete — Remove a template (only if not assigned to any agents)

Creating an Appearance

Click Create Appearance to open the template editor. The editor has two tabs: Content and Style. A live preview on the right shows your changes in real time.

Content Tab

The Content tab controls the text and messaging displayed in the chat window:

• Template Name — A unique name to identify this template (required, internal use only)
• Display Name — The name shown in the chat header. Leave empty to use the agent's name
• Description — Short text displayed under the display name in the header
• Welcome Text — Message shown when the chat opens and no Q&A suggestions are available. Use *agent_name* to dynamically insert the agent's name
• Message Placeholder — Placeholder text in the message input field
• Dismissable Notice — A notice displayed above the input that users can dismiss. Supports rich text formatting
• Show Branding — Toggle the "Powered by instraCHAT" branding in the chat window

Style Tab

The Style tab controls colors and theme settings:

Theme Support

Enable theme support to create both light and dark variants of your appearance. When enabled, the chat window automatically adapts to the user's system preference or your website's theme setting.

With theme support on, you can toggle between Light and Dark modes to customize colors for each variant independently. Shared content (name, description, etc.) stays the same across both.

Default Presets

Choose from three built-in color schemes to quickly style your appearance:

• Neutral — Clean black and white theme
• Blue — Professional blue and cyan palette
• Orange — Warm orange and amber tones

Click any preset to apply its colors, then customize further if needed. Use the Reset button to return to default colors.

Custom Colors

Fine-tune your appearance with these color options:

• Primary Color — Used for the header background and user message bubbles
• Secondary Color — Used for AI response bubbles, input box background, and suggestion buttons
• Background Color — The main chat window background
• Chat Bubble Icon Color — The icon color in the floating chat button
• Chat Bubble Background Color — The background of the floating chat button

Click any color swatch to open a color picker, or enter a hex code directly.

Live Preview

As you make changes, the live preview on the right side of the editor shows exactly how your chat window will appear. The preview includes:

• Full chat window with header, messages, and input area
• Sample conversation showing user and AI message styles
• The floating chat bubble button that opens the chat

This lets you experiment with colors and text until you achieve the perfect look.

Assigning to Agents

Each agent can have one appearance template assigned. To assign:

1. From the Appearance list, click the Assign button on any template
2. Select which agents should use this appearance
3. Click Assign to apply

Alternatively, you can set an agent's appearance from the agent's Settings page directly. If no appearance is assigned, the agent uses the system default styling.

Cloning Templates

Use the Clone action to create a copy of an existing template. This is useful when you want to create a variation — for example, a holiday version of your standard theme. The clone gets an auto-generated name like "[CLONE] Original Name" which you can change.

Best Practices

• Match your brand — Use colors from your website or product for a cohesive experience
• Enable theme support — Many users browse in dark mode, so having both variants improves accessibility
• Test on different backgrounds — Make sure your colors work well whether embedded on light or dark pages
• Keep text concise — Welcome messages and descriptions should be short and inviting
• Use meaningful names — Name templates descriptively so you can easily identify them later (e.g., "Support Blue", "Sales Orange")