What actually happens when you paste the script tag
The widget is 20 KB, renders in a shadow root, and never sees your page's CSS. Here is the whole path from tag to answer.
Embeddable widgets have a bad reputation, and it is deserved. They fight your CSS, they block your page, and they break when you deploy. Here is what ours does instead.
It does not block anything
The tag is deferred, so it loads after your page is interactive:
<script src="https://cdn.welcomeai.dev/widget/v1.js" data-wai-key="wg_xxxxxxxxxxxx" defer></script>The bundle is about 20 KB compressed. It is Preact rather than React, because the widget does not need reconciliation of anybody else's tree.
It renders in a shadow root
Everything the widget draws lives inside a shadow root with its own styles. Your CSS cannot reach in, and ours cannot leak out. This is the single decision that removes most embed bugs: no reset conflicts, no specificity war, no !important.
The cost is that you cannot restyle it with your own stylesheet. That is what the widget editor and the custom CSS field are for.
It knows what page it is on
The widget sends the current path with each question, and retrieval gives a small boost to passages from that page. On a pricing page, a question about "the limit" finds the pricing content first.
For a single-page app it follows client-side navigation too, so the context is right after a route change.
It refuses to run where it should not
Every request carries an origin-bound token, and the widget only answers on the domains you listed. If someone copies your key onto their own site, the request is refused with the origin we saw. That message shows up in your browser console, which makes a misconfigured staging domain a thirty second fix rather than an afternoon.
Builds WelcomeAI. Spends most days reading similarity scores that should have been higher.