Embed Widget Settings Block for React

linesOf builds the snippet from the draft as a list of lines, and the same text goes to the Copy Button, so what you see is what is copied. Change SCRIPT_HOST and the mount call to match your own loader, and add an option by adding a field to Config and a line to linesOf. The snippet shows the draft, so it can be ahead of what is saved; the status line says how many changes are not saved yet.

A host such as shop.example.com, with letters, digits and hyphens, or *.example.org for every subdomain of a domain. Anything with https://, a path or a port is refused with the reason, a duplicate is refused, and five is the most. The line under the page says whether the drawn page's host matches an allowed entry, and the launcher is drawn dashed and struck through when it does not.

Each domain you add or remove goes onto a stack of five steps, and Undo walks it back one step at a time, saying what it undid. Other options are one click from their old value, so they are not on the stack. Save and Discard clear it.

Everything. Nothing loads a script, no domain is checked against a real site and nothing is copied until you press Copy. Save keeps the options in this page's state and says so. In your app, store the options with the site, serve them from your loader and check the allowed list against the request's Origin on your server, because a list in the page's own code protects nothing.

The corner and style choices are named groups you move through with the arrow keys, the domains field adds a domain on Enter or a comma and removes the chosen one with Backspace, and a refused domain is written under the field and in the status line. On a phone the drawn page comes first, then the settings, then the snippet, and the action foot is pinned to the bottom of the screen. The drawn page is hidden from assistive technology and its meaning is written in the two sentences under it.