How to Add Asyntai AI Chatbot to Snipcart

Step-by-step guide for Snipcart-powered sites

แพลตฟอร์ม:

ขั้นตอนที่ 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 ส่วนตัวของคุณ

Step 2: Find Where Snipcart Is Installed on Your Site

Snipcart isn't a hosted store platform with an admin dashboard for your pages. Instead, you add Snipcart to your own website's HTML by including its stylesheet and script in your markup, usually just before the closing </body> tag. Asyntai installs the exact same way, in the exact same place:

Open the site where Snipcart is running. This might be a static site, a Jekyll, Hugo, or Eleventy project, a Webflow HTML export, or a plain custom HTML site.
Locate the file that already contains your Snipcart script tag (the snippet that loads snipcart.js).
This is usually a shared layout, template, or footer partial that is included on every page, so you only edit it once.

หมายเหตุ: Because Snipcart lives in your own markup, there is no separate admin panel to log into. Anywhere your Snipcart snippet already loads is exactly where the Asyntai widget belongs.

Step 3: Paste the Asyntai Code Before the Closing Body Tag

Add your Asyntai embed code right next to your existing Snipcart script, just before the closing </body> tag:

Open the HTML file, template, or shared layout that contains your Snipcart snippet.
Scroll down to find the closing </body> tag.
Paste your Asyntai embed code just before </body>, alongside the Snipcart script tag.
Save the file.

  <!-- Your existing Snipcart script -->
  <script async src="https://cdn.snipcart.com/themes/v3.0.0/default/snipcart.js"></script>

  <!-- Asyntai chat widget -->
  <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>
</body>

เคล็ดลับ: Put the Asyntai script in the same shared layout or footer partial as your Snipcart snippet. That way the chatbot loads on every page automatically, and you never have to touch individual pages.

Step 4: Rebuild and Deploy Your Site

If your site is generated by a static site builder, you need to rebuild and redeploy so the new code goes live:

For a static site generator (Jekyll, Hugo, Eleventy, and similar), run your build command and deploy the updated files.
For a plain custom HTML site, simply upload the edited file to your web host.
For a Webflow HTML export or other hosted static files, re-upload the export containing your change.
Wait for your deploy or CDN cache to finish updating.

หมายเหตุ: If your host or CDN caches pages aggressively, you may need to clear the cache or wait a few minutes before the widget appears on the live site.

Step 5: Verify Installation

After deploying, open your site 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 site was rebuilt and redeployed after the edit. Confirm the Asyntai script sits before the closing </body> tag. Clear your browser cache or view in incognito mode, and check the browser console (F12) for any JavaScript errors.

ต้องการความช่วยเหลือ?

Because Snipcart is added directly to your own site's code, installing Asyntai is as simple as pasting one more script tag next to it. If you're not comfortable editing your site's HTML or templates, your web developer can add the code in seconds. You can also contact Asyntai support for guidance on installing the chatbot on your Snipcart-powered site.

Developer-friendly: Since Snipcart itself is a developer tool added via a script tag, dropping in the Asyntai snippet fits naturally into your existing build and deploy workflow.