Branding

The visible identity of the chat — name, avatar, header, welcome message — is controlled by props on <AppilotsChat /> or fields on the project's Personalização tab in the dashboard.

Prop	Effect	Default
headerTitle	Explicit override for the header title — wins over everything else	assistantName if set, else the i18n chatTitle string
assistantName	Header title text, used when headerTitle is unset	i18n chatTitle ("Assistente Appilots")
assistantAvatar	Image left of the title	Colored dot in the primary color
emptyStateIcon	Emoji or image in the empty-state badge	The default ChatIcon glyph
welcomeMessage	First-message text in the empty state	i18n emptySubtitle
poweredByVisible	Show / hide the footer line	true (Pro+ tier hides it)

See SDK → Chat component for the full props reference.

Example

<AppilotsChat
  assistantName="Aria"
  assistantAvatar="https://acme.com/aria.png"
  welcomeMessage="Olá! Posso ajudar a cadastrar veículos, criar clientes, abrir relatórios."
  poweredByVisible={false}
/>

Using a local image as avatar

assistantAvatar accepts a string URL, a require()'d local image, or a React node:

import avatar from './assets/aria.png';

<AppilotsChat assistantAvatar={avatar} />

// Or a custom node
<AppilotsChat
  assistantAvatar={<MaterialCommunityIcons name="robot-happy" size={20} color="#6366f1" />}
/>

Empty-state icon

emptyStateIcon replaces the default ChatIcon glyph shown in the tinted circle badge before the user's first message. It accepts either an emoji/string or an image, auto-detected by prefix — no separate "type" prop to set:

<AppilotsChat emptyStateIcon="🚗" />

// A URL (must start with http:// or https://) renders as an image
// instead, at the same badge size, without the tinted-circle background
// (a real logo shouldn't be forced into a colored dot):
<AppilotsChat emptyStateIcon="https://acme.com/logo.png" />

// A require()'d local image works the same way:
import logo from './assets/logo.png';
<AppilotsChat emptyStateIcon={logo} />

The dashboard's Personalização tab has the same field with a live preview — an emoji or image URL set there applies automatically whenever this prop is left unset (see the precedence notes in Overview). Only a require()'d local asset still needs the prop, since it can't travel as JSON.

Resolution order for the header title

1. Explicit headerTitle prop
2. assistantName prop
3. Dashboard Título do chat (chatTitle)
4. Dashboard Nome do assistente (assistantName)
5. The current locale's chatTitle string — this is an i18n string key (see i18n), not a component prop

The fallback only kicks in when a prop is left unset. Passing an empty string (headerTitle="") does not fall through to the next step — it renders a blank title, since '' is a valid explicit value. Leave the prop out entirely if you want the fallback chain to apply. There's no prop to hide the header row itself; for that, use the mode="inline" layout and render your own header.

Hiding "Powered by Appilots"

The footer is on by default. Set poweredByVisible={false} (Pro+ plans only on the hosted tier).