How to Add Asyntai AI Chatbot to Jumpseller

Step-by-step guide for Jumpseller 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 Visual Theme Editor

Jumpseller lets you add custom scripts to your storefront through the Visual Theme Editor, without touching any theme files:

Log in to your Jumpseller Admin Panel
In the left-hand menu, click Themes
Find your active theme and click Customize (or Edit) to open the Visual Theme Editor

หมายเหตุ: The Visual Theme Editor applies your changes to the whole storefront, so the chatbot will appear on every page automatically. No coding knowledge is required for this method.

Step 3: Add the Embed Code to Custom Codes (Recommended)

Inside the Visual Theme Editor, the general theme settings include a Custom Codes section where you can inject scripts into specific locations on the page:

In the Visual Theme Editor sidebar, open the general theme Settings
Locate the Custom Codes section
You will see fields for Top head code, Bottom head code, Top body code, and Bottom body code
Paste your Asyntai embed code into the Bottom body code field
Click Save to apply your changes
Publish the theme if your changes are not live 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>

เคล็ดลับ: Use the Bottom body code field rather than the head fields. Adding the script just before the closing body tag ensures the page loads quickly and the widget initializes reliably.

สำคัญ: The Custom Codes fields do not support Liquid tags. This is not a problem for the Asyntai embed code, which is plain HTML and JavaScript, so you can paste it exactly as it is shown in your Dashboard.

Alternative Method 1: Custom Code Component

If you prefer to place the widget through the drag-and-drop editor, you can use the Custom Code component:

Open the Visual Theme Editor as described above
Navigate to the page where you want to add the component and click Add Component
Choose the Custom Code component from the list
Paste your Asyntai embed code into the component's code field
Click Save and publish your theme

หมายเหตุ: A Custom Code component only loads on the specific page or template where you place it. Use this method if you want the chatbot on certain pages only. Like the Custom Codes fields, this component does not support Liquid tags.

Alternative Method 2: Edit the Theme Code Directly

Advanced users who are comfortable with HTML can add the snippet straight into the theme's layout file using the Code Editor:

Go to Themes in your Jumpseller Admin Panel
Open the Code Editor (also labelled Edit Code) for your active theme
Open the main layout file — the template that wraps every page and contains the closing </body> tag
Paste your Asyntai embed code just before the closing </body> tag
Click Save to apply the change

สำคัญ: Editing theme code directly can break your storefront if done incorrectly. Duplicate your theme first so you have a backup you can restore. If you are not comfortable with code, use the Custom Codes method in Step 3 instead.

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

After saving your changes, open your Jumpseller 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 and published your theme changes. Clear your browser cache or view in incognito mode, as Jumpseller may cache your storefront for a few minutes. Check the browser console (F12) for any JavaScript errors, and confirm you pasted your own widget ID.

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

If you're not comfortable editing themes, Jumpseller's Support team can help you place custom code correctly. You can also contact Asyntai support for guidance on installing the chatbot on your Jumpseller store.

การสนับสนุนระดับมืออาชีพ: Jumpseller offers design and development assistance if you need professional help with theme modifications or more complex customizations.

เอกสาร