Widget Embed

One Line of Code to Go Live

Paste the embed snippet from your dashboard right before </body> on your site, and republish. The widget auto-fetches config, sends a heartbeat, and is ready to receive visitors on page load.

五分鐘上手

不論你的網站是用什麼框架，三步驟搞定

Copy embed snippet from dashboard

Log in to the client dashboard, open the bot you want to embed → in the "Connection" section, click copy on the embed snippet. It looks like:

<script src="https://aibot.chungtair.com/static/widget/loader.js" data-token="abcd1234..." async></script>

Paste right before </body>

Whatever your stack (WordPress / Shopify / plain HTML / React / etc.), paste the snippet right before the closing </body> tag. Platform-specific steps below.

Verify the connection

Refresh your site — the chat bubble should appear in the bottom-right (or bottom-left) corner. Open the dashboard's "🔍 Connection Debug" panel and click "⚡ Test Connection" to actively verify the link.

各平台逐步教學

▶

Plain HTML

Open your .html file in an editor, find the </body> tag, paste the snippet on the line before it. Save and upload.

▶

WordPress

Dashboard → Appearance → Theme File Editor → footer.php, paste the snippet before </body> and save. Alternatively, install the "Insert Headers and Footers" plugin and paste the snippet into the Footer block.

▶

Shopify

Dashboard → Online Store → Themes → Actions → Edit Code → Layout/theme.liquid. Paste the snippet before </body> and click Save.

▶

Wix

Editor → Add → Embed → Embed HTML iframe — paste the snippet. Or add via Settings → Custom Code to apply site-wide.

▶

Squarespace

Settings → Advanced → Code Injection → Footer. Paste the snippet into the Footer field and save.

▶

Webflow

Project Settings → Custom Code → Footer Code, paste the snippet, and republish the site.

▶

React / Vue / Next.js / etc.

Place the snippet in your root layout (e.g. Next.js app/layout.tsx, Nuxt nuxt.config.ts, or index.html). The SDK attaches once on first load; route changes won't re-inject.

CSP 設定（Content Security Policy）

若您網站有設定 CSP，需要明確放行以下來源讓 Widget 能正常載入與通訊：...

客製化外觀

Widget 的「主色、按鈕位置、Bot 顯示名稱、頭像、歡迎語、輸入框 placeholder」可在後台「Widget 設定」修改。...

接下來

🔍

View Debug Panel Guide

If integration hits a snag, the Debug Panel pinpoints exactly where the HTTP exchange broke.

View Guide →

🛠️

Troubleshooting

Ten common issues and their fixes — "widget not showing", "CORS blocked", and more.

View Solutions →