How to Add Asyntai AI Chatbot to SHOPLINE

Step-by-step guide for SHOPLINE stores

Nền tảng:

Bước 1: Lấy Mã Nhúng của Bạn

Đầu tiên, đi đến Bảng điều khiển Asyntai và cuộn xuống phần "Mã Nhúng". Sao chép mã nhúng duy nhất của bạn sẽ trông như thế này:

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

Lưu ý: Mã ở trên chỉ là ví dụ. Bạn phải sao chép mã nhúng duy nhất của riêng mình từ Bảng điều khiển vì nó chứa ID tiện ích cá nhân của bạn.

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

Lưu ý: 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>

Mẹo: 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.

Quan trọng: Remember to replace YOUR_WIDGET_ID with your own unique widget ID from your Asyntai Dashboard. Do not paste the example code as-is.

Bước 4: Xác minh Cài đặt

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.

Không thấy tiện ích? 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.

Cần Trợ giúp?

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.