How to Add Asyntai AI Chatbot to Jumpseller

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

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

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

Quan trọng: 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

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

Quan trọng: 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.

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

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.

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

Cần Trợ giúp?

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.

Hỗ trợ chuyên nghiệp: Jumpseller offers design and development assistance if you need professional help with theme modifications or more complex customizations.

Tài liệu