How to Add Asyntai AI Chatbot to SHOPLINE

Step-by-step guide for SHOPLINE stores

แพลตฟอร์ม:

ขั้นตอนที่ 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>

หมายเหตุ: โค้ดด้านบนเป็นเพียงตัวอย่าง คุณต้องคัดลอกโค้ดฝังตัวเฉพาะของคุณจากแดชบอร์ดเนื่องจากมี widget ID ส่วนตัวของคุณ

Step 2: Open the Custom Code App

SHOPLINE adds custom scripts through its official Custom Code app. First, make sure the app is installed:

Log in to your SHOPLINE Admin panel
In the left-hand menu, click Apps
Look for Custom Code in your list of installed apps
If it is not installed yet, open the SHOPLINE App Store, search for Custom Code, and click Add app (it is free) to install it
Open the Custom Code app to reach its main page

หมายเหตุ: The Custom Code app is SHOPLINE's official tool for adding HTML, CSS, and JavaScript snippets to your storefront's header or footer. It is the recommended way to install a chat widget without editing theme files directly.

Step 3: Add Your Embed Code in the Footer

Now add the Asyntai script and set it to load in the footer on every page:

On the Custom Code app's main page, click Add code
In the Code name field, enter a descriptive name such as Asyntai Chatbot so you can find it later
Paste your Asyntai embed code into the code editor box
Under Display option (device targeting), choose Desktop and mobile so the chatbot appears everywhere
For the placement, select Footer (also shown as the Bottom insert position, which loads the code after the page content)
Under Page trigger, select all page types — such as Homepage, Product detail page, Cart, and Checkout — so the widget shows across your whole store
Click Add (or Save) to apply. The code takes effect immediately

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

เคล็ดลับ: Placing the code in the footer (bottom) ensures it loads after your store's content, which keeps page load fast and reliable. Selecting all page types adds the chatbot to every page of your SHOPLINE store automatically.

สำคัญ: Remember to replace YOUR_WIDGET_ID with your own unique widget ID from your Asyntai Dashboard. Do not paste the example code as-is.

ขั้นตอนที่ 4: ตรวจสอบการติดตั้ง

After saving, open your SHOPLINE store 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 you saved the code in the Custom Code app and that it is enabled. Confirm the Footer placement and that all page types are selected. Clear your browser cache or view in incognito mode, since SHOPLINE may cache pages for a few minutes. Check the browser console (F12) for any JavaScript errors.

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

If you're not comfortable using the Custom Code app, SHOPLINE's Customer Support team can assist with adding custom scripts to your store. You can also contact Asyntai support for guidance on installing the chatbot on your SHOPLINE store.