How to Add Asyntai AI Chatbot to SHOPLINE

Step-by-step guide for SHOPLINE stores

Платформа:

Крок 1: Отримайте код для вставки

Спочатку перейдiть до вашої Панелi керування Asyntai та прокрутiть вниз до роздiлу "Код для вставки". Скопiюйте унiкальний код для вставки, який виглядатиме так:

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

Примітка: Код вище є лише прикладом. Ви повиннi скопiювати власний унiкальний код для вставки з вашої Панелi керування, оскiльки вiн мiстить ваш особистий ID вiджета.

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

Примітка: 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>

Порада: 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.

Важливо: Remember to replace YOUR_WIDGET_ID with your own unique widget ID from your Asyntai Dashboard. Do not paste the example code as-is.

Крок 4: Перевірка встановлення

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.

Не бачите віджет? 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.

Потрібна допомога?

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.