Theming

The widget ships with light and dark themes that auto-switch with the visitor's system preference. You can lock to one, provide a custom logo, and override greeting copy.

Theme mode

<script>
  window.InviaroSettings = {
    key: 'wt_...',
    origin: 'https://yourdomain.com',
    themeMode: 'auto'
  };
</script>

Mode	Behavior
'auto' (default)	Follows prefers-color-scheme and reacts to system changes
'light'	Forces light, ignores system preference
'dark'	Forces dark, ignores system preference

Workspace logo

brand: {
  name: 'Acme',
  logoUrl: 'https://yourdomain.com/logo.svg'
}

The logo appears in the empty-state hero. If the URL fails to load, the slot collapses cleanly without a broken-image icon.

Sizing

Display surface	Rendered size	Recommended source size
Empty-state hero (desktop, tablet, mobile portrait)	48 × 48 px	SVG, or 96 × 96 px raster (2×) for retina
Empty-state hero (mobile landscape, viewport ≤ 520 px tall)	36 × 36 px	covered by the same source asset

Notes:

• Square is mandatory. The widget applies a 12 px corner radius and object-fit: cover, so non-square assets get cropped to a square center.
• SVG is the best format. It scales cleanly across pixel densities, ships small, and survives future size changes without re-export.
• Raster (PNG, WebP) works. Provide at least 96 × 96 px so retina screens stay sharp; 144 × 144 px is safer for 3× displays. Keep file weight under 20 KB.
• Transparency is preserved. Use it when the logomark needs to sit on the widget's neutral hero background.
• No padding inside the asset. The widget already adds visual breathing room. Logos that ship with built-in padding render visually small.

What displays where

The logo only appears in the empty-state hero (the visible block above the composer when the conversation is empty). It is not rendered in:

• The launcher button (a generic chat icon)
• Message bubbles (operator messages use initials or sender.avatar_url, not the brand logo)
• The footer credit line

If you need the logo to appear elsewhere, use the brand.greeting and brand.subheading overrides to compose a richer hero copy.

Custom greeting

brand: {
  greeting: 'Welcome to Acme',
  subheading: 'How can we help today?'
}

Pass localized text directly. The widget does not translate brand-supplied copy.

Position

position: 'bottom-right'

Values: 'bottom-right', 'bottom-left', 'bottom-center'. Both the launcher button and the popover panel anchor to the same side. On mobile, the panel goes fullscreen below 480px.

Z-index

zIndex: 1000

Override the default to sit below your modals or above third-party banners.

Footer

The "Provided by Inviaro" footer is part of the free plan.

brand: {
  hideFooter: true
}

A privacy policy link sits next to the footer credit when configured:

brand: {
  privacyUrl: 'https://yourdomain.com/privacy'
}

Embed mode

For mobile WebViews and dedicated chat pages, switch to embed mode. The panel renders full-pane with no launcher.

mode: 'embed'

See Mobile apps for the integration pattern.