How to Add Asyntai AI Chatbot to Vendure

Step-by-step guide for Vendure storefronts

Πλατφόρμα:

Βήμα 1: Αποκτήστε τον Κωδικό Ενσωμάτωσής σας

Αρχικά, μεταβείτε στον Πίνακα ελέγχου Asyntai και μετακινηθείτε προς τα κάτω στην ενότητα «Embed Code». Αντιγράψτε τον μοναδικό σας κωδικό ενσωμάτωσης, ο οποίος θα μοιάζει κάπως έτσι:

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

Σημείωση: Ο παραπάνω κώδικας είναι απλώς ένα παράδειγμα. Πρέπει να αντιγράψετε τον δικό σας μοναδικό κωδικό ενσωμάτωσης από τον Πίνακα Ελέγχου σας, καθώς περιέχει το προσωπικό σας αναγνωριστικό widget.

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.

Δεν βλέπετε το widget; 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.