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>

참고: 위의 코드는 예시일 뿐입니다. 개인 위젯 ID가 포함된 고유한 임베드 코드를 대시보드에서 복사해야 합니다.

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.

위젯이 보이지 않나요? 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.