Appearance and placement

The top of the Design tab restyles the widget itself. Every field here applies to all three formats except Icon and Text, which the question bar has no use for, and every one of them inherits by default: an untouched widget follows your site's Branding and iAdvize's defaults, and picks up a brand-colour change automatically, with nothing to re-save per widget.

An inherited colour names what it inherits from rather than just saying "Inherited": a swatch of the value it currently resolves to, the source in plain words ("Site branding: follows your site's brand colour"), and the hex. Override takes it over, starting from that same value so you never begin from an arbitrary colour, and the way back is labelled with the value it returns to and carries its swatch: Back to site branding, Back to automatic.

The Size / Corners / Shadow scales are dropdowns whose options state the real value (Medium at 56 px, Small at 6 px) rather than an unlabelled name. Under each, a line says whether the current value is inherited from the site or set on this widget.

A few things the fields don't spell out:

• The question bar keeps a neutral bar on purpose. Its brand colour goes on the send button, not the input, because a saturated field makes the shopper's own typing hard to read. Set an explicit background colour and the bar takes it, and the send button flips to the contrasting pair.
• Corner radius is capped at half the height, so full gives you a circle (or a pill with text) rather than a stretched ellipse.
• The text is per-language, one field per language enabled on your site. Fill only the languages you want it in; a language left empty falls back to your site's default language. It's optional on a chat bubble (with neither filled, the bubble stays icon-only) and required on a button, in at least one language: a button whose text resolves to nothing doesn't render at all. See The inline button.
• Contrast is a warning, not a block. If your background and foreground land below the 3:1 ratio recommended for interface elements, the editor says so and shows the measured ratio, and still saves. It only ever shows up on a colour pair you set yourself; the automatic foreground is always above the threshold.
• The icons are built into the tag. Picking one costs no network request and needs no CSP change on your side. The Icon dropdown has no way back to inherited, so once you've picked one it stays set on the widget: picking Chat bubble back renders exactly what inheriting does.

Every field here is part of the draft, so nothing you change reaches a shopper until you publish. The preview shows it immediately.

Need something the fields don't cover? See Style engagement widgets with CSS.

Different offsets on narrow screensCopy Anchor Link

Below 768px viewport width, a widget can use a second, optional pair of offsets instead of its usual ones: Bottom offset, narrow screens and, for a chat bubble, Side offset, narrow screens. The case this exists for is a storefront with a fixed mobile-only bar (a sticky add-to-cart, a cookie banner) that the widget would otherwise sit on top of.

Leave a narrow field empty and the widget uses the primary offset at every screen size, which is the behaviour if you never touch these. Empty is not the same as 0: 0 is a real value meaning flush with the edge. The 768px breakpoint is fixed and not configurable, and the switch happens live: resizing the window or rotating a phone re-applies the right pair without a page reload.

The editor's Mobile preview frame applies these, so you can see the pair you set rather than trust it.

Position is independent of the panel sideCopy Anchor Link

A chat bubble's Position (Left/Right) is its own setting, separate from the conversation panel's own side. A bubble no longer has to dock to the same edge the panel opens from. Set them differently if that suits your layout better. The question bar has no position field: it's always horizontally centered.

Stacking orderCopy Anchor Link

Stacking order is a small rank (0–999) relative to the site's other engagement widgets, not a raw CSS z-index value. Use it to control which widget renders on top when two overlap. Whatever value you set, the conversation panel (and its backdrop, if you've enabled one) always renders above every engagement widget: a misconfigured stacking order can't cover the panel.

The question bar's placeholder textCopy Anchor Link

A question bar's Placeholder is the grayed-out text shown in the input before a shopper types anything (e.g. "Ask a question…"). It's translatable per language, on the Content tab, one row per language enabled on the site, each showing at a glance whether it's still empty (see Languages to check or change that set). Leaving a language empty falls back to a default: your own English translation, if you've filled one in, takes priority over iAdvize's built-in default text for that shopper's language.

Disabling a language on the site removes its text from every version of every widget, archived ones included. Otherwise restoring an old version could bring a disabled language back.