I recently built an AI support chatbot for websites: a site owner uploads their FAQ, gets an assistant, and drops one <script> tag on their site. A chat bubble appears in the corner and answers visitors' questions.

The AI part was the easy bit. The hard part was that my code now runs inside websites I don't control . Here are the five things that took the most time to get right.

1. Use Shadow DOM, or the host site's CSS will break you

The first version used a normal <div> . On the very first test site, the host's global styles ( button { ... } , * { ... } ) turned my widget into a mess.

The fix is to render everything inside a Shadow DOM and reset styles at the root:

const host = document . createElement ( " div " ); host . id = " my-widget " ; document . body . appendChild ( host );

const root = host . attachShadow ({ mode : " open " });

const style = document . createElement ( " style " ); style . textContent = " :host{all:initial} *{box-sizing:border-box;font-family:system-ui,sans-serif} " ; root .…