Customization

The embedded <AppilotsChat /> is configurable across five independent layers, so it can blend into a host app's design system without forking the SDK.

Layer	What it changes	Source of truth
Theming	Colors, fonts, radii. Light + dark.	theme prop or dashboard JSON — see SDK → Theming for the full token reference
Branding	Assistant name, avatar, welcome copy, "Powered by" footer	Props or dashboard
Persona	Tone, vocabulary, and boundaries for the agent's replies	Dashboard only (server-side)
Layout	Floating bubble, fullscreen, sidebar, inline	mode prop
i18n	UI string bundle (pt-BR, en, es)	locale prop or dashboard default

The dashboard tab Personalização under each project edits all of the above and ships a live preview of the resulting chat. The persona prompt takes effect server-side; everything else is fetched by the SDK automatically — AppilotsProvider loads the project's personalization once on mount, and <AppilotsChat /> applies each field with the precedence explicit prop → dashboard value → SDK default. A prop you set in code always wins; leave a prop unset and the dashboard drives it, no copying required.

A few boundaries to know:

• Only JSON-serializable values travel from the dashboard: URLs, hex colors, strings, booleans. Props that accept React nodes or local require() assets (assistantAvatar as a node, triggerIcon, triggerButton) can only be set in code.
• The layout mode and position are props-only — the dashboard doesn't configure them.
• The chat renders immediately with props/defaults and re-renders when the fetch resolves (typically imperceptible; a brief flash of the default color is possible on a cold start). If the device is offline or the fetch fails, the chat simply stays on props/defaults — no error, no retry storm.
• To opt out of the fetch entirely (it is the SDK's only automatic network call before the user interacts), pass config={{ fetchPersonalization: false }} to AppilotsProvider.

Dashboard saves are visible on the next app launch — the server caches the payload for an hour, but saving from the dashboard invalidates that cache immediately.

See SDK → Chat component for the full <AppilotsChat /> props reference; this section covers the practical "how do I customize the look and voice" walkthrough.

<AppilotsChat
  theme={{ colors: { primary: '#0070f3' } }}
  themeMode="auto"
  assistantName="Aria"
  assistantAvatar="https://acme.com/aria.png"
  welcomeMessage="Olá! Posso ajudar a cadastrar veículos, criar clientes ou abrir relatórios."
  poweredByVisible={false}
  mode="bubble"
  position="bottom-right"
  locale="pt-BR"
/>

Continue to:

• Theming — override examples, dark mode, Tailwind bridge
• Branding — name, avatar, welcome copy, "Powered by"
• Persona — tone instructions
• Layout — bubble, fullscreen, sidebar, inline
• i18n — locale switching and adding strings