Copy Reply FAQ Block for React

The reply exactly as the box shows it, line breaks included, with the placeholders still in it. The button swaps its copy icon for a check for three seconds and a polite status says "Copied" to screen readers. If the browser refuses clipboard access (a page that isn't served over HTTPS), the icon becomes a cross and the status says "Couldn't copy" instead.

No. A word in double braces, like {{first_name}}, is for the agent to replace before sending; the sentence under the title says so, and on a desktop a note in the start column explains it. Wire your own data in if you want them filled: the reply is a plain string in SITUATIONS.

It's the length of the reply string, computed from the same data the box prints, so it can't drift from the text. It counts the placeholders as written, since that's what's copied.

Edit SITUATIONS at the top of the file: each entry is an id, the question (the situation), a note of advice, the reply and its channel, "Chat" or "Email". OPEN_QUESTION names the one that's open on load. One answer is open at a time.

Each situation is a button inside its own h3, and the open answer holds the advice, a labelled reply box and the Copy reply button, which is the only tab stop inside it. The reply's length is read as a number of characters.

Yes. The Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found": search engines see all of them, and the browser's find in page opens the answer that holds a match.

The note is left out (the sentence under the title says the same) and the framed list follows the header. A row's badge drops under the question, the reply box keeps its line breaks and wraps, and nothing scrolls sideways at 320 pixels.