Reminder Composer Integration Setup Block for React

Nothing leaves the page. "Send a test" checks the template (it has text, it includes STOP, the opt-out box is ticked, the number is valid) and says "Sent in this demo". "Finish setup" says "Connected in this demo" and clears the test number. Nothing is stored and no request goes to Twilio; wire your own handlers where each would call your API.

A text in the GSM-7 alphabet fits 160 characters in one segment, or 153 each once it is joined from several; characters in its extension table, like braces and the euro sign, count twice. One character outside the alphabet, such as an emoji or a curly apostrophe, moves the whole message to Unicode: 70 characters in one segment, 67 each when joined. The figures are counted on the preview, with the tokens filled in, because that is the text a patient receives.

Those numbers are reserved for fiction, so a demo can never point at a real phone. Replace isTestNumber with your own check when you wire the block up.

Every field has a visible label; the checkbox is named by its sentence. The visible counter is hidden from screen readers and a separate polite line speaks only the segment count, so typing is not narrated character by character. The status line at the foot is a polite live region present from load.

No. The preview bubble holds a fixed height and clips long text (the full text stays in the page), the hint under the test number reserves its lines, and the status line reserves its lines for the longest message.

On a phone the bands stack: the template, then the opt-out and test number under a rule, then the preview with the figures. In a right-to-left layout the bands mirror; counts and the number keep their own direction.