Appearance in code

Pass the required theme fields during initialization. Explicit values override the corresponding channel settings; other fields are inherited. Configuration priority.

Appearance

theme supports:

Key	What the visitor sees
`chat_title`	Chat heading.
`default_dialog_title`	Name of a new dialog.
`theme_mode`	Light, dark, or system theme: `light`, `dark`, `auto`.
`position`	Popup position: `bottom-right`, `bottom-left`, `top-right`, `top-left`.
`width`, `height`	Window size: width `200–800`, height `300–1000` pixels.
`border_radius`	Corner radius from `0` to `50` pixels.
`shadow_enabled`	Window shadow.
`welcome_message`	Placeholder in the message input.
`empty_state_message`	Greeting in an empty new dialog.
`welcome_buttons`	Quick questions before the conversation starts.
`welcome_icon_url`	Image above the greeting: an absolute HTTP(S) URL of up to 2048 characters. An empty string restores the default icon.
`welcome_icon_shape`	Image shape: `circle` (default) or `square` (without rounded corners).
`button`	Floating-button position and colors.
`colors`	Window colors for `light` and `dark` separately: each theme accepts optional `background` and `accent` values in `#RRGGBB` format. Omitted values inherit channel settings; without overrides, the default appearance is used.

Localized text accepts { ru?: string, en?: string }. Each welcome_buttons array may contain up to 8 non-empty unique strings of no more than 120 characters. Clicking a button immediately sends its text.

SenlerWidget.init({
  channel_id: "xxx",
  theme: {
    empty_state_message: {
      ru: "Здравствуйте! Чем помочь?",
      en: "Hello! How can I help?",
    },
    welcome_buttons: {
      ru: ["Узнать цену", "Связаться с оператором"],
      en: ["Check the price", "Contact an operator"],
    },
  },
});

theme.button.position accepts the same four positions plus hidden. Use theme.button.position: "hidden" to hide the floating button; theme.position: "hidden" is invalid. Set theme.button.light.background, theme.button.light.icon, theme.button.dark.background, and theme.button.dark.icon in #RRGGBB format.

welcome_buttons cannot be changed through updateRuntime. Save them in the cabinet or supply an override in init, then initialize the widget again.

Image above the greeting

You can upload your logo or illustration in channel settings. To set the image from site code, pass its URL in theme.welcome_icon_url:

SenlerWidget.init({
  channel_id: "xxx",
  theme: {
    welcome_icon_url: "https://example.com/support.png",
    welcome_icon_shape: "circle",
  },
});

The image is used in centered_text mode before a dialog is selected and in an empty dialog. It does not replace message avatars or the floating button icon. The image fills a square area with cropping at the edges; circle clips that area to a circle. If the file fails to load, the widget shows the default icon. Use an HTTPS image URL on an HTTPS website.

Set welcome_icon_url: "" to restore the default icon. Merely removing the field from init preserves the value from channel settings. Both icon parameters are initialization settings, not updateRuntime fields: initialize the widget again with the desired theme to change them.

Greeting selection is described in Dynamic messages. Change the theme and border radius of a running instance with updateRuntime; this does not change channel settings.