How to Add Asyntai AI Chatbot to Swell

Step-by-step guide for Swell 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 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.