How to Add Asyntai AI Chatbot to Jumpseller

Step-by-step guide for Jumpseller stores

平台：

步骤1：获取您的嵌入代码

首先，前往您的 Asyntai 仪表板并向下滚动到"嵌入代码"部分。复制您的专属嵌入代码，格式如下：

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

注意： 以上代码仅为示例。您必须从仪表板复制您自己的专属嵌入代码，因为其中包含您的个人小部件 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.

文档