Starters

Starters is the second engagement widget that renders inside your page rather than against a corner of the viewport, using the same inline mount mechanism as the button, carrying more inside it. Where a button is a single labelled control, Starters is a small card: a heading you can switch off, up to three of your site's starter questions as tappable chips, and a free-text field so a shopper can ask something else. Tapping a chip or sending the free-text field opens the conversation panel.

Create one from Engagement → Widgets → New widget, in the catalog's Inline section. Everything about drafts, going live, versions and taking offline works exactly as it does for the other formats.

What it needs that a floating widget doesn'tCopy Anchor Link

A mount point. Its position is a point in your own markup, and you choose how the tag finds it, with the same three modes as the button. See Place an inline button on your pages; everything on that page about the three modes, the four-second window and the mount check applies to Starters unchanged.

It doesn't need a heading. Unlike a button's label, the heading can be switched off: the questions and the free-text field already tell a shopper what the card is for.

What you configureCopy Anchor Link

On the Content tab, the Show a heading switch comes first. It's on for a new Starters widget and for every Starters widget you already have.

With the switch on, Heading: up to 60 characters per language enabled on your site, and required in every one of them. On a one-language site it's a plain field; with several, a compact language list sits before the field, your site's default language first (see the editor's Content tab). A new Starters widget starts with the heading "Need help?" in each of your site's languages ("Besoin d'aide ?" in French, "Brauchen Sie Hilfe?" in German), and so does a widget you switch to Starters while its text is empty or still reads a button's untouched "Ask a question". Opening the editor fills any language that has no heading the same way, as an unsaved change. Change it like any other text; a heading you wrote is never replaced. Empty a language and the language list shows a red dot, the field reads "Required in French" under it, beside the character count, and the draft won't save until each language is filled again. The field is the same shopper-facing text a button's label is; it's just presented and hinted as a heading here, since it reads as a static title rather than button text.

With the switch off, the Heading field is hidden, and saving stores no heading. Starters then renders without its header: no title and no icon, just the question chips and the free-text field. The editor's preview and the widget list's thumbnail show it the same way. Clearing the field is not a way to get there: an empty heading with the switch on blocks the save.

Switch it back on before you leave the editor and what you had typed comes back, with any language that was empty filled with the default heading. That memory only lasts while the editor is open: a save with the switch off stores no heading, so when you reopen the widget later and switch it on, every language starts from the default heading.

To fill the other languages from one, use Translate into the other languages, under the heading and under the placeholder.

A shopper gets the heading for their own language, falling back to your site's default language. That fallback matters when you enable a new language on your site after publishing: until you add its heading and publish again, shoppers in that language read your default language's heading.

Below it, Placeholder: the grayed-out text shown in the free-text field before a shopper types anything, required in every language like the question bar's. It starts from "Ask a question…" ("Poser une question…", "Frage stellen…") in every empty language, and an emptied language blocks the save.

Under that, the Content tab tells you how many questions are in your site's library and links to Manage questions: the same starter-question library the welcome screen, question bar and chat bubble already draw from. That includes questions generated from your pages: they start switched off unless the site switches generated questions on, so by default none appears here until you switch it on in the library. There's no on/off switch here: showing the resolved chips is what this format is, not something you opt into. If your library currently has no question matching the page a shopper is on, the chip row is simply absent. The heading (when it's switched on) and the free-text field still render (see When there's no matching question below).

On the General tab, the page types (a new Starters widget starts with Home, Category and Product selected). On the Placement tab, in the Placement on the page card, the mount point. See Place an inline button on your pages. There's no width or alignment control: Starters always renders at the full width of its mount container.

On the Appearance tab, two cards, their colours following your brand until you change them:

• Header: under Icon, the icon (with No icon to leave the title alone) and its background; under Title, the title's Text size, colour and weight. Advanced holds the icon colour and its corners. This card only appears while Show a heading is on: with the heading switched off there's no header to style, and nothing takes its place. Its settings are kept, and come back as they were when you switch the heading back on.
• Questions and input field: one Text size at the top, shared by the questions and the input field so both keep the same height. Under Questions, a Filled or Outline style, then their fill and text colour; under Input field, its border and send button. Advanced holds the questions' border and corners, the input field's background, typed text, send arrow and corners, and under Spacing the Padding and the space around the widget: Space below the widget, Space above the widget, Space left of the widget and Space right of the widget.

The input field stays white with your primary colour on its send button, the same reasoning the question bar applies: a saturated field makes the shopper's own typing hard to read. While a shopper is in the field, a 2 px focus ring runs along its edge, in the send button's colour, or in the field's typed-text colour when the send button has under 3:1 contrast against the field's background. The editor's preview doesn't draw the ring. Starters has no Size and shadow card: its sizes come from the two text sizes, and it draws no shadow (see Text sizes and spacing).

What it doesn't haveCopy Anchor Link

• No "First message." A button can pre-fill and send a sentence on click; Starters has no equivalent field. Its two ways to start a conversation (a chip, or the free-text field) already carry the shopper's own words.
• No width or alignment. A card carrying a heading, a chip row and a free-text field has no single "content-fitted" size the way a single button's label does, so the choice isn't offered: Starters is always full width. How it arranges itself inside that width depends on the width, see How it fits its mount.
• No shadow. An inline card sits among your own content, with nothing to float above. Its input field takes a visible border instead, so a white field stays visible on a white page.
• No "Show on every page instead." Like the button, an inline widget needs page types you pick. See An inline widget needs page types.
• No font field, for the same reason as the button: it renders in a shadow root that inherits your page's font for free. See Style engagement widgets with CSS.

How it fits its mountCopy Anchor Link

Starters picks its layout from its own width, which is the width of the element it's mounted in, never from the width of the shopper's window. The same product page can give it 250 px on a large screen and 360 px on a phone, and it handles both the same way.

• Narrower than 480 px: one column. The heading, then each question on its own line at the card's full width, then the input field at the card's full width.
• 480 px or wider: the heading, then the questions side by side, each as wide as its text, and the input field. With at least one question shown, the field is 280 px wide, beside the questions or below them. With no question, it is at most 480 px wide. Where the field goes depends on the room left:
  • Beside the questions when all of them fit on one row and at least 280 px remain next to them. The field follows the last question on the same line, and the questions and the field are centred vertically on that line. A card with short questions is one control line shorter this way.
  • Below the questions otherwise, aligned to the left. When the questions don't fit on one row, they wrap onto more rows and the field sits below the last one. It never shares a row with only some of the questions.

The questions are measured on one line to make that call, so a question long enough to wrap onto two lines leaves no room beside it and the field goes below. With no matching question, the field sits below the heading, as before.

A browser that can't read the card's width gets the one-column layout, which works at every width. A CSS rule you set on ::part(starters) that changes the card's width also changes which layout it uses (see Style engagement widgets with CSS).

A question too long for one line wraps onto two lines; past two lines it ends with an ellipsis. A question is never dropped, never shrunk and never wider than the card, and a screen reader still reads the whole question. A two-line question is exactly one line taller than a one-line one.

Text sizes and spacingCopy Anchor Link

Each is a whole number of pixels, typed or set with the − and + buttons. The editor shows an error under a value outside its range and won't save it.

• The icon follows the title: its badge is as tall as the title's line, never under 24 px, and a long title wraps beside it with no ellipsis.
• The questions and the input field share one height: the text's line (1.4 times the text size, rounded up) plus the padding above and below. Automatic padding is 0.7 times the text size, so 10 px at 14 px, and the editor shows the value it resolves to. At the defaults, the questions and the input field are 40 px tall.
• Nothing is shorter than 40 px, whatever you set. When the text is too small to reach 40 px, the padding fills the rest, rounded up to a whole pixel, so a control can be 41 px.
• The send button sits inside the input field with 4 px above, to the right and below it, measured inside the field's border. On a narrow field it gets smaller so the typing area keeps at least 98 px; it then stays centred with its 4 px on the right. It never gets smaller than 24 px, so it never disappears: on a very narrow field the typing area shrinks instead. Tapping the strip above or below it, anywhere in its column, counts as tapping it; with an empty field, that tap puts the cursor in the field and sends nothing.
• On a touch screen, the input field's text is never under 16 px, so a phone doesn't zoom into your page when a shopper taps it. The questions keep your text size, and the field keeps its height.
• The space around the widget is part of the widget's own box: padding inside the card, not a margin outside it. Below, it adds to the top margin of whatever follows the widget instead of merging with it: 24 px of space and a 16 px margin give 40 px. Above, it adds to the bottom margin of whatever comes before it in the same way.
• The space left and right comes out of the card's width, not on top of it. The card stays at the full width of its mount, and its content gets narrower by the two values together. Since the card picks its layout from its own width, side spacing on a card close to 480 px wide can switch it to the one-column layout.
• Leaving a space empty means 0 px, except the space below, which is 16 px. A Starters widget saved before the space above, left and right existed renders with 0 px on those three sides, so nothing moves on your page until you set one.

Starters widgets published before these settingsCopy Anchor Link

A Starters widget published before these settings existed keeps its sizes, its shadow and its heights until you save it again: the title from its old Size, 13 px questions, a 14 px input field and 40 px controls. It does get the new layout and two-line questions straight away, without a save, because those fix how the card fits a narrow mount. The same goes for the input field moving beside the questions on a wide card: every Starters widget gets it, published ones included, with no save.

When you open one in the editor, every number shows the value it renders with today (for example a 14 px title and 13 px text). Saving gives it the new settings, and three things change, all visible in the preview before you save: the input field's text takes the single text size, the shadow goes and the input field takes its border, and the icon badge follows the title.

When there's no matching questionCopy Anchor Link

Your starter-question library resolves questions per page type and per language, with no cross-language fallback. When nothing resolves for the page a shopper is on, the chip row is left out of the widget entirely: no empty gap, no placeholder chips. The heading (when it's switched on) and the free-text field stay exactly as they are, because the free-text field always works: a shopper can ask anything, whether or not you've written a chip for that page.

That also means a Starters widget can be reported Live in the widget list on a page where your library currently has no matching question. It's telling the truth: the widget does render there, just without chips that day. Check the editor's preview and the starter-question library's own per-page-type coverage if you want to know where chips will actually show up.

What a shopper getsCopy Anchor Link

• Tapping a chip, or sending the free-text field, opens the conversation panel and sends that text as the first message: the chip's question, or whatever the shopper typed.
• The heading and its icon are not a click target. Only the chips and the free-text field open the conversation; tapping the heading does nothing. Nothing about it looks clickable either: no button styling, no hover state.
• Starters stays where it is while the panel is open, exactly like the button. Hiding it would collapse its box and shove your page around on every open and close.
• Every chip carries the AI disclosure, the same way it does on the welcome screen, question bar and chat bubble. The free-text field doesn't carry disclosure text of its own: it's the same input control the question bar already uses, which doesn't either.
• It's counted. When it scrolls into view, the tag records that this widget was seen, once per widget per browser-tab session. See Web tag performance.
• Its chips are measured. Each chip shown in the card counts as an impression for that question, and a tap on a chip counts as a click. They appear under Starter questions in the Engagement report's Starter performance tab, on each question's page, and in the totals on the Questions list. Typing in the free-text field records no question click.

The dashboard preview shows appearance, not placementCopy Anchor Link

The editor's Sample store scene draws Starters on a short page excerpt, with a notice under the scene saying "Appearance only, not placement." That's honest rather than lazy: the dashboard cannot read your document, so any position it chose would be a guess rendered as a preview, and you'd discover the truth on your own site, after publishing.

To see where it actually lands, mint a Preview link and switch the scene to Your site: your page loads with your tag active and this draft previewed, and Starters appears at its real mount point. That's also what feeds the mount check.