How to Add Asyntai AI Chatbot to Foxy.io

Step-by-step guide for Foxy.io stores

แพลตฟอร์ม:

ขั้นตอนที่ 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: Understand How Foxy.io Works

Foxy.io is a hosted cart and checkout that you bolt onto your own website or CMS. Your product pages, content, and layout all live in your own site's HTML or templates. Foxy simply adds cart and checkout functionality on top through a small JavaScript loader.

Your Foxy loader script (loader.js, historically foxycart.js) is already added to your own site's HTML or template
It is typically placed just before the closing </body> tag, after your other scripts
The Asyntai chatbot is added the exact same way — in your own site's template, right beside your Foxy loader

หมายเหตุ: Because Foxy adds checkout to your existing site, you do not paste the Asyntai code into a Foxy admin screen. You add it to the same site template you already control — the one that loads Foxy.

Step 3: Add the Asyntai Code to Your Site Template

Open the HTML file or template of your own website — the same one that already contains your Foxy loader script:

Open your site's main HTML file or layout template in your CMS, code editor, or site builder
Locate your existing Foxy loader script (loader.js or foxycart.js), usually near the bottom of the page
เลื่อนลงเพื่อค้นหาแท็กปิด </body>
Paste your Asyntai embed code on its own line, just before the closing </body> tag

<!-- Your existing Foxy loader -->
<script src="https://cdn.foxycart.com/YOUR_STORE/loader.js" async defer></script>

<!-- Asyntai AI Chatbot -->
<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>

เคล็ดลับ: Adding the code before the closing </body> tag ensures optimal page load performance. Because this template is shared across your whole site, the chatbot will appear on every page — including your Foxy-powered product and checkout pages.

Step 4: Save, Publish, and Deploy

After adding the code, apply your changes the same way you normally update your site:

Save the template or HTML file you edited
If you use a CMS or site builder, click Publish to push the change live
If you host your own code, deploy the updated file to your web server
Clear any caching (CDN or page cache) so the new code is served to visitors

หมายเหตุ: Foxy does not host your site pages, so the exact save and publish steps depend on the platform your site is built on — for example a static site host, WordPress, Webflow, or a custom framework. Use whatever process you already use to update that template.

Step 5: Verify Installation

หลังจากเผยแพร่การเปลี่ยนแปลงของคุณ ให้เปิดเว็บไซต์ในแท็บเบราว์เซอร์ใหม่หรือหน้าต่างส่วนตัว คุณควรเห็นปุ่มวิดเจ็ตแชทที่มุมขวาล่าง คลิกเพื่อตรวจสอบว่าเปิดและทำงานได้อย่างถูกต้อง

ไม่เห็นวิดเจ็ต? Make sure you saved and published all template changes. Clear your browser and CDN cache or view in incognito mode, as changes might take a few minutes to appear. Check the browser console (F12) for any JavaScript errors.

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

If you're not comfortable editing your site's template files, whoever built or maintains your website can add the code alongside your existing Foxy loader in seconds. You can also contact Asyntai support for guidance on installing the chatbot on your Foxy.io store.

เคล็ดลับ: Because the Asyntai snippet sits right next to your Foxy loader in the same template, adding, updating, or removing it later is quick — no changes are needed inside your Foxy account.