How to Add Asyntai AI Chatbot to VTEX

Step-by-step guide for VTEX stores

แพลตฟอร์ม:

ขั้นตอนที่ 1: รับโค้ดฝังตัวของคุณ

ก่อนอื่น ไปที่แดชบอร์ด Asyntai ของคุณและเลื่อนลงไปที่ส่วน "Embed Code" คัดลอกโค้ดฝังตัวเฉพาะของคุณซึ่งจะมีลักษณะดังนี้:

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