How to Add Asyntai AI Chatbot to SHOPLINE

Step-by-step guide for SHOPLINE stores

Plateforme :

Étape 1 : Obtenir votre code d'intégration

Tout d'abord, rendez-vous sur votre Tableau de bord Asyntai et faites défiler jusqu'à la section « Code d'intégration ». Copiez votre code d'intégration unique qui ressemblera à ceci :

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

Note : Le code ci-dessus n'est qu'un exemple. Vous devez copier votre propre code d'intégration depuis votre Tableau de bord car il contient votre identifiant de widget personnel.

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

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

Astuce : 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.

Important : Remember to replace YOUR_WIDGET_ID with your own unique widget ID from your Asyntai Dashboard. Do not paste the example code as-is.

Étape 4 : Vérifier l'installation

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.

Vous ne voyez pas le widget ? 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.

Besoin d'aide ?

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.