The widget editor

A widget's own page is the one place you configure it, check how it performs and test it. There is no separate Performance page to switch to: Performance and Experiment are tabs of the same page. This page covers the header and the editing tabs. Widget performance and A/B testing a widget cover the last two tabs.

The page follows the same layout as the agent builder: a header, a row of tabs, and the tab's content on the left with the preview on the right. There is no action bar at the bottom: Save and the primary action sit in the header, because they cover every tab at once. The header stays at the top of the page while you scroll, and the preview stays in view just under it. The row of tabs scrolls away with the rest of the page.

The headerCopy Anchor Link

From left to right: a back arrow to the widget list, the widget's name as the page title with the version on screen in grey after it (V3, or the name you gave that version), and the status tag beside the name. On the right of the header: Save, then the one primary action, Go live or Take offline.

The name is a menu. Click it for Rename widget, Rename this version, Copy ID, the latest versions and, below a separator, Delete widget….

• Rename widget turns the title into a text field. Press Enter (or the check mark) to save, Escape to cancel. The name is a property of the widget, not of a version: it applies the moment you save it and never marks your draft as changed. It is for your team only, so make it say what the widget is for: "Sales help (desktop)", "Product page question bar". It can't be empty, and it's capped at 80 characters. When you arrive from the catalog, the field is already open with the generated name ("Chat bubble", "Chat bubble 2") selected: type to replace it, or press Escape to keep it.
• Rename this version opens a dialog to name the version on screen. It shows to a member who can edit and it works on a locked version too, since a name changes no saved state. Leave it empty to show the number again.
• Copy ID copies the widget's ID, shown under the label so you can check it first.
• Versions lists up to five versions, the newest first, each as V3, or by the name you gave it. The one shoppers see is marked Live and the one on screen is marked On screen. Other versions carry no mark. Click a version to open it, as in the versions table: every version opens on its own page, in this editor, at its latest saved state, the open draft included. All versions always follows the list and opens the versions page.
• Delete widget… asks you to confirm first. See Delete a widget.

Next to the name, the V3 in grey is the version on screen. A version you named shows its name there instead. A widget can be live on V2 while you write V3, so the Live mark in the menu and the grey suffix answer two different questions. The suffix is never part of the widget's name: Rename widget changes the widget's name, Rename this version changes the suffix.

The status tag says what shoppers get. It names the version shoppers see, not the one you are editing:

• V2 live (or the version's name) while a version is served to shoppers.
• Testing V2 and V3 (or their names) while an A/B test runs: the live version and the candidate.
• Offline otherwise. That includes a widget that has never been published, or that still needs a page type. The notice under the header says which one to act on first.

A live tag carries an info mark when no agent answers on the site. The widget then shows nowhere, whatever its own state, and the mark's tooltip says so.

The primary action follows the widget's state. While the widget is off, it is Go live. It sends the latest saved state of the version on screen and never saves your edits. While the widget is live, it is Take offline, in a red outline. It asks you to confirm first, and it changes neither your draft nor the saved versions. One exception: while a newer saved state is waiting on a live widget, or you have unsaved changes on the live version, Go live becomes the primary action and publishes that saved state. Take offline then moves beside Save, so it stays within reach. A widget with no page type cannot go live. Its Go live button is disabled and gives the reason. See Going live and taking offline.

Below 860 px wide, the header's actions move into a bar. That bar shows one primary button, Save while you have unsaved changes and Go live otherwise. A ⋯ menu holds the other of the two, greyed out with its reason, Save as V4 (the next V number) and Preview on storefront. While the widget is live, the menu also holds Take offline, which asks you to confirm in the same way. There is no on/off switch in the editor: going live and taking offline replace it.

Under the title, a Preview link active badge appears while a storefront preview link is outstanding, so you don't forget one exists. With no link out, nothing sits under the title.

The header doesn't repeat where the widget shows: the General tab holds its page types and the Placement tab its position.

Save, Go live and Take offlineCopy Anchor Link

On the right of the header, the same on every tab:

• Unsaved changes, with an amber dot, appears only while you have edits that aren't saved yet. A tab that holds unsaved changes also shows a small dot after its name, so you can see where they are after moving to another tab.
• Save saves your edits on the version on screen: a draft is updated in place, and any other version gets a new saved state, with the same number. Every save is checked against the saved state the editor loaded: if a colleague saved on the same version since, the save is refused with "Someone saved this version since you opened it", nothing is written and your changes stay in the form. A locked version refuses it.
• Save as V4 is in the menu inside the Save button. Save is one button with a chevron at its right end: it opens a menu with Save on V3 (the version on screen) and Save as V4 (the next V number). The widget's menu works the same way as the agent's. It makes the widget's next version from the form, leaves the open version as it was, and opens the new one. See Save as a new version. It's only usable when you have unsaved changes. Cmd+S (macOS) or Ctrl+S does the same from anywhere on the page. On this page the shortcut never triggers the browser's own "save page", even when there is nothing to save. Holding the keys down saves once, not once per repeat, and the shortcut does nothing while a dialog is open (a confirmation, the preview link), so it can't save behind a question you haven't answered.
• Go live publishes the latest saved state of the version on screen and puts the widget online. If that state is already live, it only puts the widget back online. Nothing asks you to confirm it. If another widget on the site holds the same inline slot, that widget is switched off and its live version archived, and the editor tells you a widget was replaced. It's unavailable while you have unsaved changes, because it sends the last saved version, not what's on screen. It's also unavailable while an A/B test runs on the widget, and while the widget has no page type selected and Show on every page instead is off. See Drafts, publishing and versions.
• Take offline asks you to confirm, then stops the widget at once. It discards no saved version or state. It's unavailable while an A/B test runs on the widget, and the button says why. After you take a widget offline, Go live is disabled until you save. That holds while the editor stays open: reloading the page lifts it.

When Save, Go live or Take offline can't be used, hover over it or reach it with the keyboard and a tooltip says why:

• Save with no edits: "Nothing to save yet: make a change first."
• Go live with unsaved edits, or after taking the widget offline and before you save: "Save your changes first. Publishing sends the last saved version."
• Go live with no page type selected: "Choose at least one page type in Targeting first."
• Go live while an A/B test runs on the widget: "Publishing is paused while an experiment is running on this widget."
• Take offline while an A/B test runs on the widget: "A test is running. Stop the test to take this widget offline."

A save with an invalid field says "Some fields need fixing before this can be saved." When that field sits on another tab, the editor opens that tab so you see the error. A save the server refuses says why: a missing permission reads differently from a failure you can retry.

The storefront Preview link isn't here: it sits under the preview, after its caption, with the line "See it on your own store before publishing." See The preview link.

Leaving the page with unsaved changes, through the back arrow or by closing the tab, asks you to confirm first.

On a view-only role, the name menu offers Copy ID and the versions, without Rename or Delete widget…, and the lifecycle action, Save, Go live and Preview link are absent rather than greyed out. The right of the header says "Read-only: you can't edit this widget", and every tab, the version history and the whole preview stay readable.

The tabsCopy Anchor Link

General, Placement, Content and Appearance edit the widget. After a separator, Performance and Experiment inspect it. Versions are not a tab: they open from the name menu (see Versions). Every field on the four editing tabs belongs to the draft, so nothing you change there reaches a shopper until you publish.

The tab you're on is kept in the page address, so reloading or sharing the link opens the same tab. The preview stays beside every tab, Performance and Experiment included, so you always see the widget you're reading about.

General: what kind of widget, and on which pagesCopy Anchor Link

• Widget type: one card per format (Chat bubble, Question bar, Button, Starter questions), each with the same drawing as in the catalog. The current one is outlined. Picking another changes the draft's format; when the switch would drop settings the new format has no place for, a confirmation lists them first. See Changing a widget's format.
• Page types: five tiles, Home, Product, Category, Content and Blog. See Page-type targeting.
• Show on every page instead: below the tiles, for the chat bubble and the question bar only. While it's on, the tiles are greyed out and keep their selection for when you turn it off. A button or a Starters widget doesn't get this switch: an inline widget needs page types you pick (see An inline widget needs page types).

Placement: where it sits on the pageCopy Anchor Link

The Placement on the page card depends on the format:

• Chat bubble: Position (Left/Right; see below), Bottom offset and Side offset in pixels (0–200, default 20 each).
• Question bar: Bottom offset only. It is always horizontally centred.
• Both floating formats keep narrow-screen offsets and stacking order in an Advanced block, collapsed by default.
• Button and Starters: the mount point, because for an inline widget the mount point is its position. Under How we find the spot, the three mount modes as cards, best first, grouped under With your developer · one line to add and Without a developer, with the fields the chosen mode needs inside its card. Then Width and alignment (button only), and Check, which reports what the tag found on a page you previewed. See Place an inline button on your pages.

Content: the shopper-facing text, and the starter-questions switchCopy Anchor Link

The text the shopper reads: a chat bubble's or a button's Text, a Starters widget's Heading (under its Show a heading switch), or a question bar's Placeholder. A button adds an optional first message, and a Starters widget its own Placeholder.

On a one-language site each text field is a plain input. With several languages enabled, a compact language list sits before each field and shows the code of the language on screen (EN). Open it to switch: the menu lists every language by code and name, your site's default language first, marked Main, and the editor opens on it. When the text of a language is flagged as invalid, that language gets shown by itself. Language names follow the language of your own dashboard profile. A counter under the field shows the length against its limit: 60 characters for a text or heading, 200 for a placeholder or a first message.

Required in every language (see Text in several languages):

• a button's Text, which starts from "Ask a question" ("Poser une question", "Frage stellen")
• a Starters Heading while Show a heading is on, which starts from "Need help?" ("Besoin d'aide ?", "Brauchen Sie Hilfe?")
• the Placeholder of a question bar or a Starters widget, which starts from "Ask a question…" ("Poser une question…", "Frage stellen…")

The editor fills these in every empty language when it opens and when you change the format, as an unsaved change: nothing reaches shoppers until you save and go live. Text you wrote is kept. A text still reading the old format's untouched base text is not: turning a button into a Starters widget replaces "Ask a question" with "Need help?", the other way round replaces "Need help?" with "Ask a question", and turning either into a chat bubble, which has no base text, leaves its text empty. If you empty one of them in a language, the language list shows a red dot, that language reads Empty in its menu, the field reads "Required in French" under it, beside the character count, and the draft won't save ("Some fields need fixing before this can be saved."). To get a Starters card with no header, switch Show a heading off (see Starters).

Optional, never filled in for you and never blocking a save: a chat bubble's Text and a button's first message. Under an empty language, a line says what its shoppers get. While the main language is written, it reads "Empty, shoppers see the English text" (with your main language's name). When nothing can be borrowed:

• a chat bubble's text: "shoppers see the launcher icon only", since no text is a legitimate choice there, or "shoppers see a launcher with no icon and no label" when its icon is switched off
• a button's first message: "the conversation opens with no message"

The main language says nothing under its field while no other language has text.

With two or more languages, a Translate into the other languages button under the field fills the other languages from the one you have open: see Translate a text into your other languages.

Below the text, on a chat bubble or a question bar, Show starter questions decides whether this widget renders chips from the site's starter-question library above itself. It's off on a new widget and versioned like every other field here, so it reaches shoppers when you publish. Manage questions opens the library. The questions themselves aren't listed or edited here: they belong to the site, not to this widget, and editing one applies immediately everywhere. A Starters widget has no switch (showing questions is what the format is) but carries the same Manage questions link.

Appearance: how it looksCopy Anchor Link

One card per element the shopper sees, which depends on the format: Bubble or Button, Question bar, or the Starters Header and Questions and input field, plus a Questions card for a floating widget's starter questions. A Size and shadow card closes the tab, except on Starters, which sizes itself from its text sizes and draws no shadow. Each card shows its most used settings first and folds the rest under Advanced. Every colour field names its default ("Primary · default") and offers one of your brand colours, None where the element can go without, or a custom colour. See Appearance and placement. On a question bar, the Icon under Advanced is the one its bubble shows once the bar folds on a phone.

Versions: from the name menuCopy Anchor Link

There is no Versions tab. Pick a version in the name menu to open it (see above), or open the versions page with All versions in the name menu in the header. It lists every version, one row each, with Rename and Start a new version from it in the row menu. The second copies a version into your draft and takes you back to this editor. The versions page never publishes: Go live in the header of this editor does. See Drafts, publishing and versions.

Performance: how this widget is actually doingCopy Anchor Link

Unlike the editing tabs, this one is a read action: it stays usable on a view-only role, and picking a date range never touches the draft. See Widget performance.

Experiment: test the version on screen against your live versionCopy Anchor Link

The version on screen, at its latest saved state, is the candidate. A view-only role sees the same figures an editor does, with the start, stop and promote actions absent. See A/B testing a widget.

Why a new widget isn't live yetCopy Anchor Link

A widget needs three things before it can appear anywhere: it has to be online (not taken offline), it has to have somewhere to show (at least one page type selected, or Show on every page instead on), and it has to have been published at least once. A newly created widget already has the first two. It arrives online, and already targeting a sensible default: every page for a chat bubble or question bar; Home, Category and Product for a button or Starters widget. So going live is the one thing standing between it and your shoppers.

While any of the three is missing, a "This widget isn't live yet" notice sits under the header, above the tabs, whichever tab you're on. It names one thing at a time, the one to act on first:

• Never published: the widget has no live version, so there is nothing to serve. Go live with the draft. This is what a freshly created widget sees.
• Taken offline: the widget is ready to show but switched off. Go live from the header to put it back online.
• No page type: the widget is online, but no page type is selected. Pick at least one, or turn on Show on every page instead. That switch is on the General tab.
• An inline widget left in all-pages mode: "An inline button needs specific page types. It cannot show on every page, because its position only exists on the pages that have it." You only see this on a widget switched to an inline format while that mode was on; the switch itself isn't offered to an inline format.

Being taken offline outranks the rest, and never-published outranks no-page-type: telling you to pick a page type for a widget that is offline, or never went live, would be advice about the wrong step.

The notice follows your edits before you save, and disappears once none of the three holds. It can't be dismissed: it reports the widget's current state rather than announcing something.

One more thing is needed, and it isn't the widget's own: an agent has to answer on the site. When none does, a separate No agent answers on this site notice sits above that one, with a Go to agents link, because no widget shows until an agent goes live. See When no agent answers on the site.