How to Add Asyntai AI Chatbot to VTEX

Step-by-step guide for VTEX stores

プラットフォーム:

ステップ1：埋め込みコードを取得する

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

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