GuidesCustomization

Customization

Colors

Set your brand color in the dashboard under Appearance. It applies to all presets automatically.

You can also override it per-instance via the theme prop:

<SukoChat
  apiKey="sk_live_your_key"
  theme={{
    primary: '#FF5C1A',
  }}
/>

Presets

Pick a preset to control the widget’s shape, font, and spacing:

<SukoChat
  apiKey="sk_live_your_key"
  preset="elegant"
/>

See Widget Styles for the full list.

Position

<SukoChat
  apiKey="sk_live_your_key"
  position="bottom-left"  // or "bottom-right" (default)
/>

Labels

Customise all visible text from the dashboard under Appearance → Labels:

  • Chat window title and subtitle
  • Bubble tooltip
  • Input placeholder
  • Language (en, es, hr)

Opening hours

Set your restaurant’s hours in the dashboard under Appearance → Hours. The AI uses them to answer “Are you open?” questions accurately.

Quick replies

Configure suggested quick reply chips in the dashboard. Default: Book a table, See the menu, Opening hours.

Other Frameworks