How to Add Asyntai AI Chatbot to VTEX

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

Σημείωση: Ο παραπάνω κώδικας είναι απλώς ένα παράδειγμα. Πρέπει να αντιγράψετε τον δικό σας μοναδικό κωδικό ενσωμάτωσης από τον Πίνακα Ελέγχου σας, καθώς περιέχει το προσωπικό σας αναγνωριστικό widget.

Step 2: Add the Code via Legacy CMS Portal Layout (Recommended)

For stores running on the VTEX Legacy CMS Portal, you can add the Asyntai script directly to a site-wide HTML template so it loads on every page:

Log in to your VTEX Admin panel
In the sidebar, go to Storefront → Layout to open the CMS
Open the CMS folder and click HTML Templates
Select the template that renders on every page (for example, your global footer or main layout template that contains the closing </body> tag)
In the Template XHTML editor, paste your Asyntai embed code just before the closing </body> tag
Click Save Template
Wait a few minutes for the CDN cache to clear, then reload your storefront

Συμβουλή: Placing the script in a template that is shared across all pages (such as the footer) means the chatbot loads automatically on your entire store, without editing each page individually.

Σημείωση: When naming a new template, avoid reserved words such as admin, api, app, meta, and a. This method applies to VTEX Legacy CMS Portal stores. If your store runs on VTEX IO / Store Framework, use the Google Tag Manager method below instead.

Alternative Method: Add via the Google Tag Manager App

VTEX provides an official Google Tag Manager app, which is the supported way to inject third-party scripts on both Legacy and VTEX IO stores. This is ideal if you already use GTM for analytics:

In your VTEX Admin, open the Apps section, find Google Tag Manager, and click Install
In the app configuration form, enter your GTM Container ID (it looks like GTM-XXXXXX), which you can find in the Container ID column at tagmanager.google.com, then click Save
By default, VTEX blocks Custom HTML tags in GTM. To allow them, go to https://{accountName}.myvtex.com/admin/apps/[email protected]/setup (replace {accountName} with your account name) and enable the toggle that allows custom HTML tags, then save
In Google Tag Manager, create a new Custom HTML tag and paste your Asyntai embed code into it
Set the tag's trigger to All Pages so the chatbot loads everywhere
Click Submit and then Publish your GTM container

Σημαντικό: VTEX blacklists Custom HTML tags in the Google Tag Manager app by default for performance and security reasons. If you skip the setup toggle in step 3, your Custom HTML tag — and therefore the chatbot — will not run.

Βήμα 3: Επαληθεύστε την Εγκατάσταση

After saving your changes, open your VTEX 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.

Δεν βλέπετε το widget; Make sure you've saved all template changes. Clear your browser cache or view in incognito mode. VTEX caches storefront content on its CDN, so changes might take a few minutes to appear. Check the browser console (F12) for any JavaScript errors.

Χρειάζεστε Βοήθεια;

If you're not comfortable editing template files, VTEX's support team or your VTEX implementation partner can assist with custom HTML requests. You can also contact Asyntai support for guidance on installing the chatbot on your VTEX store.