Appearance and placement

The editor's Appearance tab styles the widget one element at a time. It shows one card per element a shopper sees, then, on every format but Starters, a Size and shadow card for the whole widget. Each card puts its most used settings first and folds the rest under Advanced, collapsed by default. The text a shopper reads lives on the Content tab instead.

An untouched widget takes everything from your site's brand identity (primary, secondary and font colours, and the background colour wherever you pick it) and from iAdvize's defaults. Change your brand and every widget that still follows it changes too, with nothing to republish.

The cards, per formatCopy Anchor Link

On a chat bubble and a question bar, the Questions card styles the starter questions shown above the widget once you switch them on in Content.

Each colour field below names its default, which is the colour it takes until you choose another (see Where a colour comes from).

Bubble and ButtonCopy Anchor Link

• Icon: the glyph, or No icon to show the text only. See The Icon menu.
• Fill: defaults to your Primary. Can be None.
• Icon and label: defaults to your Font colour, or Black or White when the font colour is hard to read on the fill.
• Corners: Pill by default, or Custom in pixels. See Corners.
• Label weight: Regular, Medium, Semibold or Bold. Semibold by default, the weight labels always had.
• Under Advanced: the Border. Its default is a Light border that appears only when the fill would blend into a white page, and None otherwise. Can be None.

Question barCopy Anchor Link

• Border: defaults to a Light border, so a white bar stays visible on a white page. Can be None.
• Send button: defaults to your Primary, or to the typed-text colour when your primary would blend into the bar.
• Send icon: the glyph drawn on the send button. Arrow (the default), Magnifying glass or Send (a paper plane). There is no No icon here, since a send button with no glyph says nothing. The glyph takes the Send arrow colour in Advanced, despite that field's name. The preview shows your choice. See The send icon.
• Corners: Pill by default, or Custom in pixels. See Corners.
• Under Advanced: the Icon of the folded bubble (on a phone, the bar folds into a bubble once the shopper scrolls down; picking one switches the preview to the Mobile frame, Folded, so you see it), the Bar background (default: White), the Typed text (default: your Font colour, or Black or White when it's hard to read on the bar) and the Send arrow (default: Black or White, whichever reads best on the button). The folded bubble always shows an icon, so this Icon menu has no No icon.

The bar stays white by default on purpose: a saturated field makes the shopper's own typing hard to read, so your primary colour goes on the send button. A question bar whose background colour was customised before per-element styling existed keeps it, and its send button keeps the contrasting pair it had: those defaults are named by their hex code.

Header (Starters)Copy Anchor Link

• Under Icon: the glyph, or No icon to leave the title alone at the start of the header, and the Icon background (default: your Primary).
• Under Title: the Text size (18 px by default, 1 to 48 px), the Colour (default: your Font colour) and the Title weight (Regular, Medium, Semibold or Bold; Semibold by default).
• Under Advanced: the Icon colour (default: your Font colour, or Black or White when it's hard to read) and the Icon corners (Pill or Custom in pixels).

QuestionsCopy Anchor Link

• Style: Filled or Outline, a shortcut that replaces the questions' fill, border and text colours together. Filled puts all three back to their defaults. Outline sets the fill to None, the border to your Primary (or to your Font colour when the primary is too pale to show on a white page, or to a dark grey when neither shows) and the text to your Font colour (or to the same dark grey when it is too pale to read on a white page). These colours are stored only when you choose Outline: a widget nobody edits keeps the look it had. Any colour you had set on those three is replaced; corners are left as they are. The colour fields below stay editable, and the switch reads Outline whenever the fill is None.
• Fill: defaults to your Secondary. Can be None.
• Text: defaults to your Font colour, or Black or White when it's hard to read on the fill.
• Border: defaults to a Light border that appears only when the fill would blend into a white page, and None otherwise. Can be None.
• Corners: Automatic is fully rounded, or Custom in pixels.

Questions and input field (Starters)Copy Anchor Link

Starters styles its questions and its input field in one card, because they share one Text size (14 px by default, 1 to 32 px) and keep the same height.

• Under Questions: the Style switch (Filled or Outline, as in the Questions card above), then the Fill and the Text, with the same defaults.
• Under Input field: the Border, which defaults to a Visible border that keeps a white field visible on a white page (at least 3:1 against white) and can be None, and the Send button (default: your Primary, or the typed-text colour when your primary would blend into the field).
• Under Advanced: the questions' Border and Corners (Automatic, already a pill, or Custom in pixels); the input field's Field background (default: White), Typed text (default: your Font colour, or Black or White when it's hard to read on the field), Send arrow (default: Black or White, whichever reads best on the button) and Corners (Automatic uses the same corners as the header icon, or Pill, or Custom in pixels); and under Spacing, the Padding (Automatic, or a custom 0 to 32 px) and the Space below the widget (16 px by default). See Starters.

A Starters widget published before these settings keeps a borderless field and its shadow until you save it again.

Where a colour comes fromCopy Anchor Link

A closed colour field shows a swatch and the colour in force:

• At its default, the colour's name and the word default, for example "Secondary · default" or "White · default". The default is worked out from the rest of the widget, so it changes as you change other fields: set the fill to a dark colour and the text field's default can switch from "Font · default" to "White · default".
• On a brand colour or None, its name alone: "Primary", "None".
• On a custom colour, its hex code: "#F4D7C6 · custom".

Open it and the colours are grouped in three:

• Default: the element's own rule, with the colour it gives today. Leave a field here and it keeps following your brand and the rule.
• My brand: Primary, Secondary, Font and Background, each with its hex code. The widget keeps the link, not the value: change the colour in Brand settings and every element using it follows. A brand colour that is already the default isn't listed again.
• Other: None (no fill, or no border), offered on fills and borders only. A fill whose default already is None leaves it out; a border always offers it, so you can make sure the element never gets a border. A text colour can never be None. Then Custom colour…, which opens the colour picker on the field.

The list ends with an Edit brand colours link, which opens your site's Brand settings in a new tab: the widget's colour doesn't change, and the draft you're editing stays open. A member who can't edit the widget finds the same link under each colour field instead.

A custom colour is for this widget only, and it stays as it is when your brand changes. It starts from the colour the element had. Drag in the picker, type a hex code, or, in a browser that can pick a colour from the screen (Chrome and Edge, for example), use the eyedropper beside the hex code. The widget preview follows the colour as you pick it. Choose Apply colour (the check), or press Enter in the hex code, to keep it; Cancel (the cross), Escape or a click outside the picker puts back what the field had before. To change a custom colour later, choose Custom colour… again: the picker reopens on that colour.

A line under a field appears only when an adaptive default has adapted: "Switches to black or white when it becomes hard to read on the fill." under a text colour that switched, "Black or white, whichever reads best on the button." under a send arrow, and "Appears only when the fill blends into the page." under a border that shows.

Contrast is a warning, not a block. When a text colour isn't at its default, the editor checks it against the fill it sits on. Below the 4.5:1 ratio recommended for text, a warning gives the measured ratio. You can still save. No check runs when the fill is None, since the widget can't see your page.

A widget saved before per-element styling existed shows its customised background or icon-and-text colour as a custom colour on the matching field. It renders exactly as before.

The Icon menuCopy Anchor Link

The Icon menu lists AI sparkles, Round bubble and, last, No icon. A widget saved with an icon that is no longer offered (AI bubble, Minimal bubble, Rectangular bubble or Question mark) keeps drawing it, on your storefront and in the preview: the menu lists it too while it is the widget's icon, and drops it once you pick another. Round bubble replaces them.

No icon depends on the format:

• Chat bubble: No icon is offered once the bubble has text in at least one language on the Content tab, because a bubble needs an icon or text. If you clear the text afterwards, the menu still reads No icon and an error under it says "Add a label or choose an icon." The draft won't save until you do one or the other.
• Inline button and Starters header: No icon is always offered.
• Question bar: no No icon. Its Icon is the folded bubble's, under Advanced.

Choosing a glyph again brings the icon back. With No icon, the line under the menu reads "Set on this widget".

The send iconCopy Anchor Link

The Send icon menu on a question bar offers Arrow, Magnifying glass and Send. A widget with no choice stored draws the arrow, so every question bar published before this field existed looks the same as before. Choosing Arrow again stores nothing: the widget goes back to the default.

Like every appearance field, the choice is part of the draft and reaches shoppers when you publish. The tag draws the icon from path data sent with your site's config, so it needs no extra request and no CSP change. A storefront that cached the config before this field existed keeps drawing the arrow until the config refreshes.

The field belongs to the question bar only. The input field of a Starters widget keeps its arrow, and a chat bubble and an inline button have no send button.

CornersCopy Anchor Link

The widget's own corners and the header icon's offer Pill (the default) or Custom. The Starters field offers Automatic, Pill or Custom, and the questions Automatic (already a pill) or Custom. Custom shows a field for a whole number of pixels, from 0 to 48, and starts at 12 px. A value outside that range is brought back into it as you type.

A widget saved when corners were still steps keeps its shape. Its step shows as Custom with the pixel value it always had: None 0 px, Small 6 px, Medium 12 px, Large 20 px, and Full shows as Pill (as Automatic on the questions). Nothing changes until you edit the field.

Corners are capped at half the height of what they round, so Pill gives a circle on a control with no text and a pill once it carries text, never a stretched ellipse. A large pixel value on a short element is capped the same way.

Size, shadow and iconCopy Anchor Link

The scales are dropdowns whose options state the real value (Medium at 56 px) rather than an unlabelled name. A question bar's Size is the exception: its options read Small, Medium and Large with no figure, because its size sets the bar's height, its width and the folded bubble together. Under Size, Shadow and Icon, a line says whether the value is inherited from the site or set on this widget.

A few things the fields don't spell out:

• On a question bar, Shadow has two levels. The setting is the bar's shadow at rest. While a shopper engages it, the bar takes the next level up: Small becomes Medium, Medium becomes Large, and None and Large stay as they are.
• On a question bar, Size sets the height and the width. Small, Medium and Large are 48, 56 and 64px tall, and each is also wider than the one before. The width then follows the shopper's window. See How wide the question bar is.
• A new question bar starts at Medium. The size is set on the widget when you create it, so the line under Size reads "Set on this widget". A question bar created earlier with no size set keeps Small, so no live bar changes size.
• 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, on the Content tab, with a compact language list before the field when your site has several languages (see Text in several languages). It's optional on a chat bubble: a language left empty falls back to your site's default language, and with neither filled and the icon shown, the bubble stays icon-only. On a button it's required in every language, starting from "Ask a question": a button whose text resolves to nothing doesn't render at all. See The inline button.
• The icon path travels in the public config. The tag draws the chosen icon as an inline SVG from path data that comes with your site's config response, so picking one costs no extra network request and needs no CSP change on your side.
• The Icon dropdown has no way back to inherited. Until you pick an icon, the widget inherits AI sparkles. Once you pick one, it stays set on the widget: picking AI sparkles again renders the same glyph as inheriting, but the widget no longer follows the default if it ever changes.
• Add a text label when you choose AI sparkles. An icon on its own can be misread: a sparkle can pass for a favourites or offers mark. A label on a button, or text on a chat bubble, removes the doubt.

Every field here is part of the draft, so nothing you change reaches a shopper until you publish. The preview shows it immediately. A change to your brand identity is the exception: it reaches every widget that follows it at once, without a publish.

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

Translate a text into your other languagesCopy Anchor Link

On a site with two or more enabled languages, a Translate into the other languages button sits under these fields on the Content tab, once the language shown in the language list before the field has text:

• the Text of a chat bubble or a button
• the Heading of a Starters widget
• the Placeholder of a composer or a Starters widget
• the First message of a button

One click translates the text of the language shown into every other enabled language. It replaces what those languages already held, including a base text, so use it before you fine-tune a translation, not after.

• Nothing is saved yet. The translations land in the draft form. They reach the draft only when you save, and shoppers only when you publish.
• You have 8 seconds to undo. A toast says "Other languages translated." with an Undo button that puts each language back as it was.
• The button greys out after a translation, and its tooltip reads "Translations are up to date." It comes back as soon as you change the text it translated.
• A translation over the field's limit is shortened once. If it is still too long, the field is marked, an error under it says it is over the limit, and the draft won't save until you shorten it.
• If the request fails, a toast says "Could not translate. Please try again." and nothing changes.

The button doesn't appear on a site with a single language or on a tab with no text. Without edit rights on the widget it is greyed out.

Placement on the pageCopy Anchor Link

The Placement on the page card, on the editor's Placement tab, right after General, positions a floating widget against the viewport: a chat bubble's Position, Bottom offset and Side offset, a question bar's Bottom offset, and, behind a collapsed Advanced block, the narrow-screen offsets and stacking order described below.

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.

How wide the question bar isCopy Anchor Link

The question bar has no width field. Its Size sets where its width starts, and the shopper's window moves it from there:

• On a phone (a window of 767px or less), the window minus 16px on each side, whatever the size: 343px on a 375px phone.
• On a window wider than 767px, the bar takes a share of a reference width. The reference width starts at a minimum for the size, stays there up to a 1080px window, then grows by about 0.14px for each pixel of window, up to a maximum. At rest the bar is 95% of it (Small) or 90% of it (Medium and Large).

The three reference widths are the same line shifted by 40px. The bar resizes with the window, with no reload. Starter questions shown above it don't change its width.

When a shopper engages the bar, it widens around its centre on a window wider than 767px. Its engaged width is the reference width plus 40px (Small), 100px (Medium) or 160px (Large). Small is then multiplied by 1.1. At a 1512px window that gives 462px (Small), 520px (Medium) and 620px (Large). The bar stays inside the window minus 16px on each side and never goes past 640px, the width of the conversation panel it opens. At 767px or less it never widens.

Two things follow from this:

• On a phone, the bar and a chat bubble can overlap. At 767px or less the bar spans the window minus its gutters, so a chat bubble at its default size (56px) and side offset (20px) sits within the bar's width and, at the same bottom offset, the two overlap. The overlap warnings in the widgets list and the editor don't report this pair, because whether they meet depends on the shopper's screen. Those windows are all below the 768px breakpoint, so a narrow-screen bottom offset on one of the two separates them. To check the result on a real phone, open a preview link for the widget you changed.
• The editor's preview shows one window, not every width. The Desktop frame draws the bar as it would be in a 1512px window, so it takes the share of the frame that its size gives it there (Small 24%, Medium 25%, Large 27% at rest). It can't show the minimum on a smaller laptop or the maximum on a very wide screen, where the bar takes a different share. The frame is also narrower than a real screen, so a long placeholder can look cut short there and still fit on your storefront. The Mobile frame applies the phone rule to its own width, the frame minus 16px on each side, then draws it at the same reduced scale as every widget in that frame.

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. It's translatable per language, on the Content tab, and required in every language your site has enabled. When the editor opens, every empty language is filled with "Ask a question…" ("Poser une question…" in French, "Frage stellen…" in German), as an unsaved change you can rewrite. On a site with several languages, a compact language list sits before the field, the default language first. Empty a language and the list shows a red dot, the field reads "Required in French" under it, beside the character count, and the draft won't save. A question bar published before the placeholder was required can still lack one in a language: shoppers then get your text in the site's default language, if there is one, and otherwise iAdvize's built-in placeholder for their 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.