MySiteGPT Assistant
All posts
GuideEmbedding

Embed a chat widget on any stack in 5 minutes

One script tag, a Shadow DOM for isolation, and you're live — whether you run Next.js, WordPress, Shopify, or plain HTML.

PNPriya Nair·March 29, 2026·4 min read

Adding a chat assistant to your site shouldn't require a rebuild. With a single script tag, it doesn't.

The one-liner

<script src="https://your-domain.com/widget.js" data-bot-id="YOUR_BOT_ID" async></script>

Drop it before the closing </body> tag and the launcher appears.

Why it won't break your site

The widget mounts inside a Shadow DOM — an isolated DOM subtree with its own styles. Your CSS can't leak in and the widget's can't leak out. No class clashes, no surprises.

Where it works

  • Plain HTML / static sites: paste the tag.
  • WordPress: add it via a custom HTML block or your theme footer.
  • Shopify: drop it into theme.liquid.
  • Next.js / React: add it to your root layout.

Make it yours

Set a brand color, welcome message, and starter questions from the dashboard — no code changes needed. Want it inline instead of floating? Add data-inline-target="#some-div".

Five minutes, any stack, fully on-brand.

Build your own assistant
Train it on your content and embed it in minutes — free.