How to Add Asyntai AI Chatbot to Vendure

Step-by-step guide for Vendure 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。

Step 2: Understand How Vendure Works

Vendure is a headless commerce framework. Your Vendure server exposes a GraphQL Shop API, but it does not render the pages your visitors see. Instead, your storefront is a separate frontend application (built with Next.js, Nuxt, Remix, Vue, Astro, or plain HTML) that fetches data from the Shop API and renders the shopping experience.

注意： Because Asyntai is a browser-side widget, it is installed in your storefront frontend, not in the Vendure server. You do not need to modify the Vendure server, add a plugin, or change any GraphQL resolvers.

Step 3: Add the Embed Code to Your Storefront

Open the source code of your storefront application and add the Asyntai embed code so it loads on every page, just before the closing </body> tag. The exact file depends on the framework you used to build your storefront:

Next.js (App Router): add the script inside the <body> of app/layout.tsx (or use the built-in next/script component)
Next.js (Pages Router): add it before </body> in pages/_document.tsx
Nuxt: add it in app.vue or your default layout, or register it via the app.head.script option in nuxt.config.ts
Remix: add it before </body> in app/root.tsx
Vue / Vite / Astro: add it before </body> in your root index.html or base layout

For a plain HTML template or the base layout of most frameworks, paste the embed code directly:

<!-- Paste just before the closing </body> tag -->
<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 component-based frameworks like Next.js or Nuxt, adding the script to the root layout ensures the chatbot appears on every page automatically, while keeping it out of individual page components.

重要提示： Keep the async attribute and replace YOUR_WIDGET_ID with your own widget ID from the Dashboard. Do not place the script inside the Vendure server code or the Admin UI — it belongs in the storefront frontend only.

Step 4: Deploy Your Storefront

Since the storefront is a separate application, your change only goes live after you rebuild and redeploy the frontend:

Save the file you edited
Rebuild your storefront (for example, npm run build) if your workflow requires it
Deploy the updated storefront to your hosting provider (such as Vercel, Netlify, or your own server)
Wait for the deployment to finish before verifying

注意： During local development you can test the widget by running your storefront dev server (for example, npm run dev) and opening it in your browser.

Step 5: Verify Installation

After deploying, open your Vendure 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 storefront finished rebuilding and redeploying. Clear your browser cache or view in incognito mode. Confirm the script is placed inside the <body> of your root layout, and check the browser console (F12) for any JavaScript errors.

需要帮助？

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

专业支持： Because the widget is a single script tag, any frontend developer familiar with your Vendure storefront framework can complete the installation quickly.