How to Add Asyntai AI Chatbot to Swell

Step-by-step guide for Swell storefronts

平台：

步骤1：获取您的嵌入代码

首先，前往您的 Asyntai 仪表板并向下滚动到"嵌入代码"部分。复制您的专属嵌入代码，格式如下：

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

注意： 以上代码仅为示例。您必须从仪表板复制您自己的专属嵌入代码，因为其中包含您的个人小部件 ID。

How Swell works: Swell is an API-first, headless commerce platform. There is no built-in theme editor for your live storefront — instead, your storefront is a separate custom frontend application (built with Next.js, Nuxt, Vue, Gatsby, or Astro) that talks to Swell through its JavaScript SDK and GraphQL / REST APIs. You add the Asyntai snippet to that frontend app's code, then deploy the frontend. No changes to your Swell backend or API configuration are needed.

Step 2: Open Your Storefront Project

Locate the source code of the custom storefront you built on top of Swell. This is the frontend application that renders your shop for visitors:

Open your storefront's code repository in your editor or IDE
Confirm the framework you are using (for example Next.js, Nuxt, Vue, Gatsby, or Astro)
Find the root layout or template file that wraps every page — this is where the snippet belongs so the chatbot appears site-wide

提示： If your team started from Swell's official Horizon starter, the storefront is a Next.js app. Any file that renders on every route (the root layout) is the right place for the widget.

Step 3: Add the Asyntai Snippet Before </body>

Add your Asyntai embed code so it loads on every page, just before the closing </body> tag. The exact file depends on your framework:

Next.js (App Router): add the script to app/layout.js (or layout.tsx), inside the <body> element after your app content
Next.js (Pages Router): add it to pages/_document.js just before </body>, or use the next/script component in pages/_app.js
Nuxt: add it in nuxt.config.js under app.head.script, or place it in your root app.vue template
Vue / Gatsby / Astro or a plain HTML shell: add it before the </body> tag of your root index.html or main layout component

<!-- Add just before the closing </body> tag of your storefront's root layout -->
<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

提示： In JSX-based frameworks like Next.js, prefer the framework's script helper (such as next/script) or add the tag inside the root layout's body. This adds the chatbot to every page of your storefront automatically.

Step 4: Deploy Your Storefront

Because your storefront is a separate frontend app, the change goes live when you deploy that app:

Commit the change to your storefront's code repository
Build and deploy the frontend using your usual host (for example Vercel, Netlify, or your own server)
Wait for the deployment to finish and any CDN cache to refresh

重要提示： No changes are needed in your Swell dashboard, backend, or API settings. The chatbot is a client-side script that lives entirely in your storefront frontend.

Step 5: Verify Installation

After deploying, open your live Swell storefront in a new browser tab or incognito window. You should see the chat widget button in the bottom right corner. Click it to ensure it opens and functions correctly.

看不到小部件？ Make sure your deployment completed successfully and that you added the snippet to a layout that renders on every page. Clear your browser cache or view in incognito mode, since your storefront and CDN may cache the old build. Check the browser console (F12) for any JavaScript errors.

需要帮助？

If you're not comfortable editing your storefront's code, your development team can add the snippet to the root layout in a few minutes. You can also contact Asyntai support for guidance on installing the chatbot on your Swell storefront.

Developer note: Since Swell storefronts are fully custom, the widget sits alongside your existing frontend code and requires no Swell API or backend changes — just add the script to your root layout and redeploy.