Skip to main content

Layout

<AppilotsChat /> ships four layout modes. Pick the one that fits the host app's flow. See SDK → Chat component for the full props reference.

bubble (default)​

Floating action button in a corner; tapping it slides up a bottom-sheet modal. Fits most consumer apps.

<AppilotsChat mode="bubble" position="bottom-right" />

position accepts bottom-right (default), bottom-left, top-right, top-left.

fullscreen​

No FAB; the chat takes over the entire screen when opened (controlled). Good for dedicated "support" or "AI assistant" entry points in a navigation tab.

const [open, setOpen] = useState(false);

<>
  <Button title="Abrir assistente" onPress={() => setOpen(true)} />
  <AppilotsChat mode="fullscreen" visible={open} onClose={() => setOpen(false)} />
</>;

Half-width modal pinned to the right (becomes a full-width sheet on narrow phones, where a 50% sliver would be unusable). Best for tablets and desktop-class layouts.

<AppilotsChat mode="sidebar" />

inline​

Renders in place — no modal, no FAB. Drop it inside any layout you want, e.g. as a permanent panel in a settings page.

<View style={{ flex: 1, flexDirection: 'row' }}>
  <View style={{ flex: 2 }}>{/* main content */}</View>
  <View style={{ flex: 1, borderLeftWidth: 1, borderLeftColor: '#eee' }}>
    <AppilotsChat mode="inline" />
  </View>
</View>

Custom trigger button​

The default FAB is a circular button in theme.colors.primary with a speech-bubble glyph (ChatIcon) in the middle. Three ways to customize it, from lightest to heaviest:

1. Recolor and/or swap the icon for an image — keeps the default shape/size, no need to rebuild the button:

<AppilotsChat
  triggerButtonColor="#000000"
  triggerButtonImage="https://acme.com/logo.png" // or a require()'d local image
/>

Same fields as the dashboard's Personalização tab (triggerButtonColor, triggerButtonImageUrl there) — and the dashboard values apply automatically when these props are left unset (prop → dashboard → default; see Overview). Empty color falls back to theme.colors.primary; empty image falls back to the default glyph.

2. Replace only the icon (any React node), keeping the default button shape/background:

<AppilotsChat triggerIcon={<Icon name="sparkles" color="#fff" />} />

3. Replace the entire button:

<AppilotsChat
  mode="bubble"
  triggerButton={
    <View style={{ padding: 12, borderRadius: 24, backgroundColor: '#000' }}>
      <Icon name="sparkles" color="#fff" />
    </View>
  }
/>

If both triggerIcon and triggerButtonImage are set, triggerIcon wins. triggerButtonColor/triggerButtonImage are ignored once triggerButton is set to a node (the whole button is replaced anyway). triggerButton="none" hides the trigger entirely — useful when you're controlling visibility from elsewhere (e.g. a header button) via the visible prop.

Controlled vs uncontrolled​

By default the chat manages its own visibility. Pass visible and onClose to take control — works in any mode except inline (which is always visible).

Last updated on