Help Windows

Give a question or an answer a help window that shoppers open from a link or an (i).

A help window explains a question or an answer without making the question itself longer. Shoppers open it when they need it, read it, and close it to carry on. It's useful wherever shoppers hesitate: telling hair or skin types apart, what a size means, or how to measure something.

Help windows are available on every plan. Videos and image uploads inside them need the Starter plan or above.

Help on a question

Open the question in the builder. Under Question settings there's a Help window card:

1. Switch on Show a help window.
2. Optionally change the Link text. Leave it empty for "Need help answering?".
3. Click Write help content (or Edit help content) to open the editor.

Shoppers open a question's help from one of three places. You choose one for the whole quiz in Quiz Settings → Help window:

• Link after subtitle (the default): the link text at the end of the subtitle. If the question has no subtitle, the link sits alone in that spot.
• (i) after question: a small icon right after the question text. The link text is what screen readers announce for it.
• Button under subtitle: a small outlined button with the icon and the link text.

Help on an answer

Expand the answer's row in the Answer options card. In Help window, switch it on and click Write help content.

On the storefront the answer gets a small (i) right after its label. Tapping the (i) opens the help window and never selects the answer or moves the quiz on; tapping anywhere else on the answer selects it as usual. Each (i) has a large enough tap area for phones.

Writing the content

The editor window shows exactly what you're editing: the header reads, for example, Help window › Question 3 or Question 5 › Answer 2, followed by the question text or the answer label. A small drawing on the right shows the question with the link, (i) or button that opens this window highlighted.

The window has:

• Title: shown at the top of the window (optional, but recommended).
• Content, with a toolbar for bold, italic, links, headings, bullet and numbered lists, tables, images and videos.

Links open in a new tab, so shoppers keep their place in the quiz. Web addresses, email addresses and phone numbers work.

Images come from your image library or the built-in icons. Each image can be Small, Medium or Full width, with an optional caption and alt text (filled from the library description). Uploading new images needs the Starter plan or above; icons and images already in your library work on every plan.

Videos: paste a YouTube or Vimeo link. The player only loads when a shopper opens the help window, so it never slows the quiz down. Videos need the Starter plan or above. If you move to the Free plan later, videos you already added keep showing.

The Preview tab shows the real help window as shoppers see it, on a phone (a sheet that slides up from the bottom) or a desktop (a window in the middle of the screen).

Click Done to keep your changes, then Save changes to publish them to the live quiz. Help that's switched on but has no title and no content isn't shown to shoppers.

The question list on the left shows a Help badge on questions where the question or one of its answers has a help window.

What shoppers see

• On desktop and tablets, the help opens in a window in the middle of the screen.
• On phones, it slides up from the bottom as a sheet with a small handle. Shoppers can swipe it down to close it.
• The X button, the Esc key and tapping the dimmed backdrop all close it. The page behind doesn't scroll while it's open.
• Long help scrolls inside the window; tables that are wider than a phone scroll sideways inside the window.

How it looks

Quiz Settings → Help window sets the look once for the whole quiz. Anything left on Default follows your quiz theme (colours, fonts and your Continue button), so the window fits your quiz without any setup.

• How shoppers open a question's help: link, (i) or button (see above), and the Icon: (i) or (?).
• Link, (i) after the question, Button: colour, size, underline, fonts, corners and hover colours of the trigger.
• (i) after answers: colour and size.
• Window: backdrop colour and opacity, background, border, corner radius, width on desktop and inner spacing (desktop and phone).
• Title and Text: font, weight, size (desktop and phone), colours, headings and link colour.
• Tables and images: table lines, header row background, caption colour and image corners.
• Close (X) and phone handle: colours.
• Bottom close button: off by default. Switch it on for a button at the bottom (default text "Got it") with its own colours, font, size, corners, padding and width.

See which help windows shoppers open

Every time a shopper opens a help window it's recorded on their response (on every plan). On the Growth plan and above you can see it in three places:

• Analytics → Help opens: each help window with how many shoppers opened it and the share of shoppers who answered that question, most opened first.
• In the builder: the question's or answer's Help window card shows "Opened by 41 shoppers (23% of those who answered this question) in the last 30 days".
• Responses: when you expand a response, Help windows opened lists the ones that shopper opened.

A help window opened by many shoppers points to a question that's hard to answer: consider clearer wording, fewer or clearer answers, or better help. If Google Analytics is connected, each open is also sent as the sq_help_opened event (with the funnel events). Opens in the builder's Preview are never recorded.

Ana can write it for you

Ana in the builder can switch help windows on, write the content for questions and answers, and change every part of the look. Ask, for example, "Add a help window to Q3 explaining how to tell the hair types apart". When she reviews a quiz, she suggests help for filter questions and questions with many answers.

The Quiz check also notes filter questions and questions with six or more answers that have no help window. It's a grey note: it never changes the result colour.