Skip to content
intoCHAT

VTEX integration

AI chatbot for your VTEX store

Connect your VTEX storefront so the agent searches live products and prices through VTEX's public Intelligent Search, then add the chat with Google Tag Manager or your storefront code. No app key needed.

Create your agent free

Last updated:

How intoCHAT works with VTEX

intoCHAT finds your VTEX account from your storefront and searches products through VTEX's public Intelligent Search, the same search your store uses. It works for Store Framework stores and headless storefronts alike. The chat bubble is added with a short script, through Google Tag Manager or your storefront's own code. The agent reads public catalog data only: no orders, carts, checkout or customer accounts.

Set up intoCHAT on VTEX

  1. Create and train your agent

    Sign up, create an agent and add your store's address on the Knowledge tab so it learns your shipping, returns and help pages. You can also upload files or add Q&A pairs.

  2. Connect your store

    On the Actions tab, choose Connect your website and paste the address shoppers visit, even if it's a custom storefront. intoCHAT detects your VTEX account and adds a Search products action.

  3. Create a Custom HTML tag in Google Tag Manager

    If your store uses VTEX's Google Tag Manager app, open your GTM container and go to Tags > New > Tag Configuration > Custom HTML. Paste the code below and replace YOUR_AGENT_ID with the ID from the Share tab.

  4. Fire it on every page

    Under Triggering, add a new trigger of type DOM Ready that fires on all DOM Ready events, so the page body exists when the widget starts, and save the tag. Check it in Preview mode, then submit and publish the container.

  5. Check your store

    Open your store. The chat bubble appears in the bottom corner, with the colors and position you set on the Appearance tab.

The code for a GTM Custom HTML tag

<script>
  (function () {
    if (document.getElementById('intochat-embed')) return;
    var s = document.createElement('script');
    s.id = 'intochat-embed';
    s.src = 'https://www.intochat.ai/api/embed.js';
    s.setAttribute('data-chatbot-id', 'YOUR_AGENT_ID');
    document.body.appendChild(s);
  })();
</script>

Google Tag Manager removes data attributes from script tags in Custom HTML, so the plain script tag would load without its agent ID. This version sets the attribute in JavaScript. The same code works in a pixel app's body.html or a CMS template.

What the agent does in your VTEX store

  • Searches your catalog live

    Each search runs on VTEX Intelligent Search for your account and returns up to five products with name, brand, price, categories and SKU specifications.

  • Shows product cards

    Answers include cards with the product image, price and a link built from your storefront's own product URLs.

  • Quotes the price shoppers pay

    The agent tells the selling price apart from the list price before discount, so it quotes what the shopper actually pays, in your store's currency.

  • Works with headless storefronts

    Paste the address shoppers visit. intoCHAT reads the product link format from your pages, so links lead to your custom storefront.

  • Answers beyond the catalog

    Train it on your shipping, returns and FAQ pages or files. Q&A pairs take priority over other sources.

  • Collects leads

    A form in the chat asks for an email address or phone number on rules you set, and every new lead triggers an email alert.

Frequently asked questions

What does intoCHAT read from my VTEX store?

Public catalog data from VTEX Intelligent Search for your account: product names, brands, prices, categories and SKU specifications, plus your store's currency from its public sales channel. No app key is needed, and the agent can't see orders, carts, checkout or customer accounts.

Can the agent track orders?

No. Order lookups need private store credentials and proof that the visitor owns the order, which a public connection can't provide. The agent can answer delivery and returns questions from your pages and collect an email address or phone number so your team can follow up.

How do I add the chat without Google Tag Manager?

On Store Framework, a developer can put the same code in the body.html file of a pixel app, which runs in the body of every store page; don't use head.html. On a Legacy CMS store, go to Storefront > Layout > CMS > HTML Templates and paste it just before the closing body tag of each template your pages use. On FastStore or another headless storefront, have your developer add it to the storefront code so it runs on every page.

Why not paste the plain script tag into Google Tag Manager?

GTM strips data attributes from script tags in Custom HTML tags, so the script would load without your agent ID and no chat would appear. The code on this page creates the script element in JavaScript and sets the attribute itself. Where you edit HTML directly, such as a CMS template, the one-line script tag from the Share tab works too.

Does it work with a headless VTEX storefront?

Yes. Connect the address shoppers visit. intoCHAT recognizes the VTEX account from asset addresses on your pages, such as vtexassets.com, and builds product links in the format your storefront uses.

Does the chat slow down my store?

Through Google Tag Manager, the script is inserted after the page has started loading, so it doesn't hold up your content. The chat window runs in its own iframe served by intoCHAT, so its code stays separate from your storefront.

See it answer from your own website

Paste your website address and chat with an agent built from your pages. It takes about a minute.

Create your agent free

Free plan, no credit card needed.