How to Add Asyntai AI Chatbot to VTEX

Step-by-step guide for VTEX stores

Platform:

Stap 1: Uw insluitcode ophalen

Ga eerst naar uw Asyntai Dashboard en scroll naar het gedeelte "Insluitcode". Kopieer uw unieke insluitcode die er als volgt uitziet:

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

Opmerking: De bovenstaande code is slechts een voorbeeld. U moet uw eigen unieke insluitcode kopiëren vanuit uw Dashboard omdat deze uw persoonlijke widget-ID bevat.

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

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

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

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

Stap 3: Installatie verifiëren

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.

Ziet u de widget niet? 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.

Hulp nodig?

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.