How to Add Asyntai AI Chatbot to Vendure

Step-by-step guide for Vendure storefronts

プラットフォーム:

ステップ1：埋め込みコードを取得する

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<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.