How to Add Asyntai AI Chatbot to Snipcart

Step-by-step guide for Snipcart-powered sites

平台：

步骤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: Find Where Snipcart Is Installed on Your Site

Snipcart isn't a hosted store platform with an admin dashboard for your pages. Instead, you add Snipcart to your own website's HTML by including its stylesheet and script in your markup, usually just before the closing </body> tag. Asyntai installs the exact same way, in the exact same place:

Open the site where Snipcart is running. This might be a static site, a Jekyll, Hugo, or Eleventy project, a Webflow HTML export, or a plain custom HTML site.
Locate the file that already contains your Snipcart script tag (the snippet that loads snipcart.js).
This is usually a shared layout, template, or footer partial that is included on every page, so you only edit it once.

注意： Because Snipcart lives in your own markup, there is no separate admin panel to log into. Anywhere your Snipcart snippet already loads is exactly where the Asyntai widget belongs.

Step 3: Paste the Asyntai Code Before the Closing Body Tag

Add your Asyntai embed code right next to your existing Snipcart script, just before the closing </body> tag:

Open the HTML file, template, or shared layout that contains your Snipcart snippet.
Scroll down to find the closing </body> tag.
Paste your Asyntai embed code just before </body>, alongside the Snipcart script tag.
Save the file.

  <!-- Your existing Snipcart script -->
  <script async src="https://cdn.snipcart.com/themes/v3.0.0/default/snipcart.js"></script>

  <!-- Asyntai chat widget -->
  <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>
</body>

提示： Put the Asyntai script in the same shared layout or footer partial as your Snipcart snippet. That way the chatbot loads on every page automatically, and you never have to touch individual pages.

Step 4: Rebuild and Deploy Your Site

If your site is generated by a static site builder, you need to rebuild and redeploy so the new code goes live:

For a static site generator (Jekyll, Hugo, Eleventy, and similar), run your build command and deploy the updated files.
For a plain custom HTML site, simply upload the edited file to your web host.
For a Webflow HTML export or other hosted static files, re-upload the export containing your change.
Wait for your deploy or CDN cache to finish updating.

注意： If your host or CDN caches pages aggressively, you may need to clear the cache or wait a few minutes before the widget appears on the live site.

Step 5: Verify Installation

After deploying, open your site 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 your site was rebuilt and redeployed after the edit. Confirm the Asyntai script sits before the closing </body> tag. Clear your browser cache or view in incognito mode, and check the browser console (F12) for any JavaScript errors.

需要帮助？

Because Snipcart is added directly to your own site's code, installing Asyntai is as simple as pasting one more script tag next to it. If you're not comfortable editing your site's HTML or templates, your web developer can add the code in seconds. You can also contact Asyntai support for guidance on installing the chatbot on your Snipcart-powered site.

Developer-friendly: Since Snipcart itself is a developer tool added via a script tag, dropping in the Asyntai snippet fits naturally into your existing build and deploy workflow.