Theming & Customization

The Trackelio widget supports extensive visual customization so it can match your product’s branding. All theming options are managed from the dashboard under Sites > Widget > Branding.

Branding options

Setting	Description
Accent color	Primary color used for buttons, highlights, and active states.
Text color	Color of text rendered on accent-colored backgrounds.
Font family	Custom font stack applied to all widget text. Falls back to the system font if the specified font is unavailable.
Border radius	Rounding applied to the panel, buttons, and input fields. Set to 0 for sharp corners.
Logo URL	URL of a custom logo displayed in the panel header. Recommended size: 120x32px.
Widget title	Text shown in the panel header. Defaults to your site name if not set.
Success message	Custom message displayed after a successful submission (e.g., “Thanks for your feedback!”).
Powered by toggle	Hide the “Powered by Trackelio” footer in the panel. Available on the Pro plan only.

CSS custom properties

Internally, the widget uses CSS custom properties scoped to its Shadow DOM root. These are set automatically based on your dashboard configuration:

Property	Maps to
--trackelio-accent	Accent color
--trackelio-text	Text color
--trackelio-font	Font family
--trackelio-radius	Border radius
--trackelio-offset-x	Trigger button horizontal offset
--trackelio-offset-y	Trigger button vertical offset
--trackelio-z	Z-index for trigger and panel

Because these properties live inside the Shadow DOM, they do not leak into your site’s styles.

Runtime overrides

You can override branding values at runtime using the SDK. This is useful for matching dark mode themes or applying user-specific branding.

window.Trackelio.setConfig({
  branding: {
    accent_color: '#10B981',
    text_color: '#FFFFFF',
    font_family: '"Inter", sans-serif',
    border_radius: 12,
    logo_url: 'https://example.com/logo-dark.svg',
    widget_title: 'Help & Feedback',
    success_message: 'Got it, thanks!',
  },
});

Dark mode example

If your site supports dark mode, you can listen for theme changes and update the widget accordingly:

const mq = window.matchMedia('(prefers-color-scheme: dark)');

function applyTheme(dark) {
  window.Trackelio.setConfig({
    branding: {
      accent_color: dark ? '#6366F1' : '#4F46E5',
      text_color: dark ? '#F9FAFB' : '#FFFFFF',
    },
  });
}

applyTheme(mq.matches);
mq.addEventListener('change', (e) => applyTheme(e.matches));

Runtime overrides persist for the current page session and do not modify the configuration stored in your dashboard.