Talki
Get started

Widget

Customization

Make the Talki widget look like it belongs on your product — match your brand color, set a custom theme, reposition the launcher, or replace it with your own UI trigger.

Brand color

Set primaryColor to any CSS color value. It controls the widget header background, button fills, and active state indicators. Light and dark theme variants are computed automatically — you only need one color.

javascript
window.TalkiConfig = {
  orgId:        'YOUR_ORG_ID',
  apiKey:       'YOUR_API_KEY',
  primaryColor: '#6366f1',   // indigo — header, buttons, active states
};

✦Contrast

Choose a color with enough contrast against white text (at least 4.5:1 for WCAG AA). Avoid very light colors like near-white — the header text will become unreadable.

Light / dark theme

The default "auto" mode follows the visitor's OS preference via prefers-color-scheme. Override with "light" or "dark" to force a specific theme regardless of OS settings.

javascript
window.TalkiConfig = {
  orgId:  'YOUR_ORG_ID',
  apiKey: 'YOUR_API_KEY',
  theme:  'dark',   // 'auto' | 'light' | 'dark'
};
ValueBehavior
"auto"Follows OS dark/light mode preference (default)
"light"Always render in light theme
"dark"Always render in dark theme

Position & offset

The launcher button docks to a corner of the viewport. Use offsetX / offsetY to nudge it away from the edge — useful if your site has a sticky bottom navigation or cookie banner.

javascript
window.TalkiConfig = {
  orgId:    'YOUR_ORG_ID',
  apiKey:   'YOUR_API_KEY',
  position: 'bottom-left',   // 'bottom-right' (default) | 'bottom-left'
  // Push the button inward if your site has a bottom bar
  offsetX: 24,   // px from edge (default: 24)
  offsetY: 24,   // px from bottom (default: 24)
};

Custom launcher (hide the bubble)

Set hideButton: true to suppress the default floating bubble. Then call window.Talki.open() from any element — a help link in your nav, an inline "Chat with us" button, or a tour step.

javascript
// Option A: hide in config and open programmatically
window.TalkiConfig = {
  orgId:      'YOUR_ORG_ID',
  apiKey:     'YOUR_API_KEY',
  hideButton: true,
};

// Then call this from any button click in your app:
document.getElementById('support-btn').addEventListener('click', () => {
  window.Talki?.open();
});

ⓘWidget still loads

Even with hideButton: true, the widget script loads in the background so the first open is instant. The button is merely invisible — the iframe is still mounted.

Welcome message & bot name

welcomeMessage is the first message the user sees when they open the widget — before typing anything. Use it to set expectations about response time or guide users to the right topic.

javascript
window.TalkiConfig = {
  orgId:          'YOUR_ORG_ID',
  apiKey:         'YOUR_API_KEY',
  welcomeMessage: 'Hey there! Have a question? We reply in minutes.',
  botName:        'Talki Support',   // operator display name before assignment
};

Additional settings in the dashboard

Some visual settings are managed in Admin → Widget Setup rather than in code — changes apply instantly to all live embeds without a deploy.

–Brand logo — displayed in the widget header

–Launcher icon — replace the default chat bubble with a custom SVG

–Pre-chat form — collect email before the first message

–Sound effects — play a chime on new messages

–Availability schedule — show offline state outside business hours

note
// In Admin → Widget Setup you can also set:
// - Brand logo (shown in widget header)
// - Launcher icon (default: chat bubble)
// - Sound effects on new message
// - Pre-chat form (collect email before first message)
//
// These are managed in the dashboard — no code required.
← Widget embedEvents API →