shadcn.io is not affiliated with official shadcn/ui
Embed Widget Settings Block for Solid
A reviews widget settings panel with a drawn shop page that shows the launcher in the corner you pick, in your label and style, an allowed-domains field checked as hosts, and an embed snippet that rewrites with every option.
Installation
Overview
Place a widget on your site and copy the code that puts it there, with this embed widget settings panel for Solid with Ark UI. A drawn shop page leads, with the launcher sitting in the corner you choose, in your label and in the dark or light style, drawn dashed and struck through when the page's own host is not on the allowed list. Beside it a Segment Group picks the corner, an Input sets the launcher label, a second Segment Group sets the style, and a Tags Input holds the allowed domains: each is checked as a host (an exact one, or a star for every subdomain) and the reason is written when one is refused. Under the page the embed snippet sits in a mono window with a Copy Button, written again from every option as you change it. The action foot counts unsaved changes beside a Shine Button that saves them, an outline button that discards them and an Undo for the last domain you added or removed. It's built from Segment Group, Input, Tags Input, Copy Button, Button, Shine Button and Guides, with a CSS entrance only. For a reviews, chat or feedback widget that a customer pastes into their own site.
FAQ
How is the snippet written, and how do I change it?
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.
What counts as a valid domain, and what does the star do?
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.
What can Undo undo?
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.
What stays local, and how do I make it real?
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.
How does it work by keyboard and on a phone?
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.