Explain VTEX Legacy CMS installation in the Connect VTEX guide

_i18n/en/integrations/connect-vtex.md

@@ -44,22 +44,6 @@ connected domains connected to your VTEX account. Make sure you choose the exact
 
 Based on the domain you chose, Hellotext will construct Product and SKU urls for the AI Agents.
 
-#### Pixel Installation
-
-In this step, you are asked to install the Hellotext pixel on your VTEX account. Installing the pixel
-unlocks insight into what your customers do on the website, including:
-
-- Page Views
-- Product Views
-- Cart Modifications (additions or removals)
-- Order Placement
-
-#### Automatic Push installation
-
-The Hellotext VTEX integration also installs and configures Push notifications through its storefront pixel. Push is available on Pro and Enterprise. Complete the pixel installation above; you do not need to upload a separate worker or add another Hellotext.js initialization.
-
-If the pixel was installed before Push became available, make sure the Hellotext app is up to date and wait for the updated pixel to reach the live storefront. Follow [Set up Push notifications]({% link _integrations/setup-push-notifications.md %}) for subscription controls and verification.
-
 <a name="checkout"></a>
 
 #### Checkout Funnel Tracking
@@ -94,6 +78,63 @@ Once saved, Hellotext will identify shoppers as soon as they enter their email o
 
 Fore more information. Checkout the source code of <a href="https://github.com/hellotext/vtex-checkout">vtex-checkout</a>.
 
+#### Pixel Installation
+
+In this step, Hellotext detects which technology your VTEX storefront is built on and shows you the matching installation:
+
+- **Store Framework (VTEX IO)**: you install the Hellotext app from your VTEX Admin.
+- **Legacy CMS**: you paste the Hellotext script into your store's templates. Follow the steps in [Legacy CMS installation](#legacy-cms).
+
+If the wizard shows an installation that doesn't match your store, use the link below the steps to switch to the other one.
+
+Installing the pixel unlocks insight into what your customers do on the website, including:
+
+- Page Views
+- Product Views
+- Cart Modifications (additions or removals)
+- Order Placement
+
+<a name="legacy-cms"></a>
+
+#### Legacy CMS installation
+
+VTEX doesn't load apps on storefronts built with Legacy CMS, so the Hellotext app never reaches their pages, even when it's installed. Add the Hellotext script to your store's templates instead:
+
+1. In your VTEX Admin, go to **Storefront** > **Layout** > **CMS** > **HTML Templates**.
+2. Open the subtemplate that every page includes, such as the header or the one that loads your store's scripts. If there isn't a shared one, repeat these steps for each page template.
+3. Paste the following code inside `<head>` or right before `</body>`:
+
+```html
+<!-- Hellotext -->
+<script>
+  ;(function () {
+    var script = document.createElement('script')
+    script.src = 'https://cdn.jsdelivr.net/npm/@hellotext/vtex-legacy-cms@1/dist/storefront.js'
+    script.onload = function () {
+      HellotextLegacyCMS.initialize('YOUR_BUSINESS_ID')
+    }
+    document.head.appendChild(script)
+  })()
+</script>
+```
+
+4. Replace `YOUR_BUSINESS_ID` with your Hellotext business ID, which you can find in Settings > Business on your Hellotext dashboard. The setup wizard shows the code with your ID already filled in.
+5. Save the template.
+
+The script tracks page views, product views and cart changes, and identifies shoppers who are logged in. It also shows Hellotext alerts, attributes orders from your Hellotext campaigns, and lets webchat product carousels add items to the cart.
+
+Don't paste this script into the checkout. The checkout uses the script from [Checkout Funnel Tracking](#checkout).
+
+For more information, check out the source code of <a href="https://github.com/hellotext/vtex-legacy-cms">vtex-legacy-cms</a>.
+
+#### Automatic Push installation
+
+The Hellotext VTEX integration also installs and configures Push notifications through its storefront pixel. Push is available on Pro and Enterprise. Complete the pixel installation above; you do not need to upload a separate worker or add another Hellotext.js initialization.
+
+Automatic Push installation works with the Hellotext app on Store Framework stores. The Legacy CMS script doesn't install Push notifications.
+
+If the pixel was installed before Push became available, make sure the Hellotext app is up to date and wait for the updated pixel to reach the live storefront. Follow [Set up Push notifications]({% link _integrations/setup-push-notifications.md %}) for subscription controls and verification.
+
 <a name="affiliate"></a>
 
 #### Affiliate Setup

_i18n/es/integrations/connect-vtex.md

@@ -43,21 +43,6 @@ En este paso, se te pedirá elegir el dominio principal de la tienda para tu apl
 
 Basado en el dominio que elijas, Hellotext construirá las URLs de Productos y SKUs para los Agentes de IA.
 
-#### Instalación del Pixel
-
-En este paso, se te pedirá instalar el píxel de Hellotext en tu cuenta de VTEX. Instalar el píxel desbloquea información de comportamiento sobre lo que hacen tus clientes en el sitio web, incluyendo:
-
-- Vistas de página
-- Vistas de productos
-- Modificaciones del carrito (agregados o eliminaciones)
-- Realización de pedidos
-
-#### Instalación automática de Push
-
-La integración de Hellotext con VTEX también instala y configura las notificaciones push mediante su píxel en la tienda. Push está disponible en Pro y Enterprise. Completa la instalación del píxel anterior; no necesitas subir otro worker ni agregar otra inicialización de Hellotext.js.
-
-Si instalaste el píxel antes de que Push estuviera disponible, asegúrate de que la app de Hellotext esté actualizada y espera a que el píxel actualizado llegue a la tienda publicada. Sigue [Configura las notificaciones push]({% link _integrations/setup-push-notifications.md %}) para agregar controles de suscripción y verificar la configuración.
-
 <a name="checkout"></a>
 
 #### Seguimiento del Embudo de Checkout
@@ -92,6 +77,63 @@ Una vez guardado, Hellotext identificará a los compradores en cuanto ingresen s
 
 Para más información, consulta el código fuente de <a href="https://github.com/hellotext/vtex-checkout">vtex-checkout</a>.
 
+#### Instalación del Pixel
+
+En este paso, Hellotext detecta con qué tecnología está construida tu tienda VTEX y te muestra la instalación que le corresponde:
+
+- **Store Framework (VTEX IO)**: instalas la aplicación de Hellotext desde tu VTEX Admin.
+- **Legacy CMS**: pegas el script de Hellotext en las plantillas de tu tienda. Sigue los pasos de [Instalación en tiendas con Legacy CMS](#legacy-cms).
+
+Si el asistente muestra una instalación que no corresponde a tu tienda, usa el enlace que aparece debajo de los pasos para cambiar a la otra.
+
+Instalar el píxel desbloquea información de comportamiento sobre lo que hacen tus clientes en el sitio web, incluyendo:
+
+- Vistas de página
+- Vistas de productos
+- Modificaciones del carrito (agregados o eliminaciones)
+- Realización de pedidos
+
+<a name="legacy-cms"></a>
+
+#### Instalación en tiendas con Legacy CMS
+
+VTEX no carga aplicaciones en las tiendas construidas con Legacy CMS, así que la aplicación de Hellotext no llega a sus páginas aunque esté instalada. En su lugar, agrega el script de Hellotext a las plantillas de tu tienda:
+
+1. En tu VTEX Admin, ve a **Storefront** > **Layout** > **CMS** > **HTML Templates**.
+2. Abre el subtemplate que se incluye en todas las páginas, por ejemplo el header o el que carga los scripts de tu tienda. Si no tienes uno compartido, repite estos pasos en cada plantilla de página.
+3. Pega el siguiente código dentro del `<head>` o justo antes de `</body>`:
+
+```html
+<!-- Hellotext -->
+<script>
+  ;(function () {
+    var script = document.createElement('script')
+    script.src = 'https://cdn.jsdelivr.net/npm/@hellotext/vtex-legacy-cms@1/dist/storefront.js'
+    script.onload = function () {
+      HellotextLegacyCMS.initialize('YOUR_BUSINESS_ID')
+    }
+    document.head.appendChild(script)
+  })()
+</script>
+```
+
+4. Reemplaza `YOUR_BUSINESS_ID` con tu ID de negocio de Hellotext, que puedes encontrar en **Configuración** > **Negocio** en tu panel de Hellotext. El asistente de configuración te muestra el código con tu ID ya incluido.
+5. Guarda la plantilla.
+
+El script rastrea las vistas de página, las vistas de productos y los cambios en el carrito, e identifica a los clientes que inician sesión. También muestra las alertas de Hellotext, atribuye a Hellotext los pedidos que llegan desde tus campañas y permite agregar productos al carrito desde los carruseles del webchat.
+
+No pegues este script en el checkout. El checkout usa el script de [Seguimiento del Embudo de Checkout](#checkout).
+
+Para más información, consulta el código fuente de <a href="https://github.com/hellotext/vtex-legacy-cms">vtex-legacy-cms</a>.
+
+#### Instalación automática de Push
+
+La integración de Hellotext con VTEX también instala y configura las notificaciones push mediante su píxel en la tienda. Push está disponible en Pro y Enterprise. Completa la instalación del píxel anterior; no necesitas subir otro worker ni agregar otra inicialización de Hellotext.js.
+
+La instalación automática de Push funciona con la aplicación de Hellotext en tiendas con Store Framework. El script para tiendas con Legacy CMS no instala las notificaciones push.
+
+Si instalaste el píxel antes de que Push estuviera disponible, asegúrate de que la app de Hellotext esté actualizada y espera a que el píxel actualizado llegue a la tienda publicada. Sigue [Configura las notificaciones push]({% link _integrations/setup-push-notifications.md %}) para agregar controles de suscripción y verificar la configuración.
+
 <a name="affiliate"></a>
 
 #### Configuración de Afiliado

docs/editorial-work/connect-vtex.md

@@ -0,0 +1,26 @@
+# Connect VTEX: Legacy CMS installation
+
+## Source and state before editing
+
+- Article key: `integrations/connect-vtex.md`. Published routes: `https://help.hellotext.com/connect-vtex` and `https://help.hellotext.com/es/conecta-vtex`; inventory records HTTP 200 for both and `progress.csv` marked the pair `pending`.
+- Complete pre-edit bodies and the shared stub are preserved byte for byte under `originals/connect-vtex/`. SHA-256: Spanish `cbb3dc7c70ef110566fb774c034ff9905582ac7f0c018c39e75022cd6135cd0f`; English `da198f2c29a9a25cb7e70e9108bdfb1853f7a11055a32c5e40b2851a53602d71`; stub `e7215332615582de4717d6ce2ca172497f01be84314751df443e7685eb7f75cf`. The body hashes match `inventory.csv`.
+- Started from Help `origin/main` at `fa6c979b9115b63e111dffe4e2b01903d247f7fb` on `vtex-legacy-cms-guide`. Titles, slugs, languages, navigation, existing anchors (`checkout`, `affiliate`) and publication state are preserved.
+
+## Reader task and article-specific plan
+
+A merchant connecting a VTEX store needs to know which pixel installation applies to their storefront, and how to complete the one the setup wizard shows.
+
+1. Match the wizard's new step order (domains, checkout, install, affiliate): move **Checkout Funnel Tracking / Seguimiento del Embudo de Checkout** before the pixel section. Its text and its `checkout` anchor are unchanged.
+2. Explain in **Pixel Installation / Instalación del Pixel** that the wizard detects the storefront technology: Store Framework (VTEX IO) installs the Hellotext app, Legacy CMS pastes a script. Mention the wizard's link to switch when the detection is wrong.
+3. Add **Legacy CMS installation / Instalación en tiendas con Legacy CMS** with a `legacy-cms` anchor for the wizard's guide link: why the app can't run there, the CMS template steps, the snippet, where it may go (`<head>` or before `</body>`), what it tracks, not to paste it into checkout, and its source code link, matching the checkout section's.
+4. State in **Automatic Push installation / Instalación automática de Push** that automatic Push applies to the app on Store Framework stores, and the Legacy CMS script doesn't install Push.
+5. Visuals: a capture of VTEX's **HTML Templates** editor would help readers find the subtemplate, but no Legacy CMS admin account is available to capture it. The Hellotext wizard step for Legacy CMS is not deployed yet, so it can't be captured from the current interface either. Both captures are recorded as pending; the steps name each control in the text.
+6. Revise Spanish first and adapt English. Build and check both complete articles; the wizard behavior ships in the Rails PR, which should merge before this Help PR.
+
+## Checkpoint
+
+Both translations were revised. The relocated checkout section is identical to the original in both languages; the only removed sentence is the pixel step's former introduction, which the detection explanation replaces. Both pages keep all original headings and Liquid link targets, and add one heading and the `legacy-cms` anchor.
+
+The production-mode Jekyll build and security-header verification passed with Ruby 3.3.12 (3.3.6 is not installed locally). The built pages contain the new headings, the snippet, and resolving `#legacy-cms` and `#checkout` in-page links, with no unrendered Liquid; `docs/` is absent from `_site`. Browser review at desktop and mobile widths is pending on the Netlify deploy preview.
+
+The linked `hellotext/vtex-legacy-cms` repository is internal on GitHub at this checkpoint; the source code link only works for the public once the repository is public.

docs/editorial-work/originals/connect-vtex/_i18n/en/integrations/connect-vtex.md

@@ -0,0 +1,123 @@
+When you connect your VTEX store to Hellotext with our Exchange app, you can:
+
+- Sync customer data into customer profiles so Hellotext can use it for segmentation, messaging, playbooks, and reporting.
+- Install the Hellotext pixel to track customer activity on your website and turn that activity into signals for attribution, recommendations, playbooks, campaigns, and ROI measurement.
+
+### What you'll need
+
+- A Hellotext account.
+- API Base URI (for example: `https://hellotext.myvtex.com/` or `hellotext`)
+- A VTEX account
+- A VTEX application key and application token
+
+### Setup Authentication
+
+#### VTEX application keys
+
+The My Keys page in VTEX lists all of the internal app keys. To access this page, go to **Account Settings** > and click on **API Keys**, then click on **Generate Key**.
+
+<img src="images/integrations/vtex/en/installation.png" alt="" width="768" />
+
+#### Generate a new application key
+
+Application keys allow the external system to access your account, so your VTEX account must have this role: License Manager / Services access control / Save user.
+
+1. Click the Generate New button.
+2. In the Label field, enter the application key's purpose. It will help you identify the Hellotext key easily if you have other internal API keys.
+3. Add **Roles** by clicking on it, which grants admin privilege to the API key.
+4. Click on Generate.
+5. You will see a link generated for the token. Copy the URL and paste it into your browser to obtain the key and the application token.
+6. Copy the Key and the Application Token and save them in a safe place. They are only shown once.
+
+#### Add the credentials to Hellotext
+
+1. Log in to Hellotext and go to the business account you want to integrate the VTEX store into.
+2. Go to Settings > Integrations and click on New Integration.
+3. Choose VTEX in the list of available integrations.
+
+Follow the wizard to set up your account. Make sure you copy and paste the App Key and App Token.
+
+#### Domain Setup
+
+In this step. You will be asked to choose the primary storefront domain for your application when you have many
+connected domains connected to your VTEX account. Make sure you choose the exact domain your catalog is hosted on.
+
+Based on the domain you chose, Hellotext will construct Product and SKU urls for the AI Agents.
+
+#### Pixel Installation
+
+In this step, you are asked to install the Hellotext pixel on your VTEX account. Installing the pixel
+unlocks insight into what your customers do on the website, including:
+
+- Page Views
+- Product Views
+- Cart Modifications (additions or removals)
+- Order Placement
+
+#### Automatic Push installation
+
+The Hellotext VTEX integration also installs and configures Push notifications through its storefront pixel. Push is available on Pro and Enterprise. Complete the pixel installation above; you do not need to upload a separate worker or add another Hellotext.js initialization.
+
+If the pixel was installed before Push became available, make sure the Hellotext app is up to date and wait for the updated pixel to reach the live storefront. Follow [Set up Push notifications]({% link _integrations/setup-push-notifications.md %}) for subscription controls and verification.
+
+<a name="checkout"></a>
+
+#### Checkout Funnel Tracking
+
+The Hellotext pixel tracks activity on the storefront but cannot run inside VTEX's checkout module, which is a separate application. To capture shopper identity during checkout (email, phone, name) and enable abandoned checkout attribution, add the Hellotext checkout script to your store.
+
+1. Go to your admin dashboard on VTEX. i.e. `shop.myvtex.com/admin`. Replace `shop` with your VTEX account name.
+2. On the left side, scroll down to **Store Settings** > **Checkout** > click on **Settings**.
+3. On the settings page for Checkout, click the **gear icon** on the site configuration you want to edit.
+4. Click on the **Code** tab at the top of the page.
+5. In the file list, select **checkout6-custom.js**.
+6. Paste the following code at the end of the file:
+
+```javascript
+// Hellotext Checkout Funnel
+(function () {
+  var script = document.createElement("script");
+  script.src =
+    "https://cdn.jsdelivr.net/npm/@hellotext/vtex-checkout@1/dist/funnel.js";
+  script.onload = function () {
+    Hellotext.initialize("YOUR_BUSINESS_ID");
+  };
+  document.head.appendChild(script);
+})();
+```
+
+7. Replace `YOUR_BUSINESS_ID` with your Hellotext business ID, which you can find in Settings > Business on your Hellotext dashboard.
+
+Click Save.
+
+Once saved, Hellotext will identify shoppers as soon as they enter their email or phone during checkout, even if they do not complete the purchase.
+
+Fore more information. Checkout the source code of <a href="https://github.com/hellotext/vtex-checkout">vtex-checkout</a>.
+
+<a name="affiliate"></a>
+
+#### Affiliate Setup
+
+In this step. You are asked to setup Hellotext as an affiliate on your VTEX account.
+This helps Hellotext receive real-time notifications about changes to your catalog, including price change, inventory or
+products added and removed from the storefront to help keep recommendations accurate and up-to date.
+
+1. Go to your admin dashboard on VTEX. i.e. `shop.myvtex.com/admin`. Replace `shop` with your VTEX account name.
+2. On the left side, scroll down to **Store Settings** > **Orders** > click on **Settings**.
+3. On the settings page for Orders, next to **General** tab, click on **Affiliates**
+4. Click on **New Affiliate** button on the top-right of the page.
+
+Fill in the Affiliate form with the following information
+
+- Name: **Hellotext**
+- ID: Any identifier of your own choosing. VTEX limits identifiers to 3 characters. This helps you quickly identify Hellotext if you have many Affiliates.
+- Sales Channel: Choose the sales channel which you want Hellotext to receive notifications from. Type `1` which is your primary Sales channel.
+- Note: If you have catalogs on multiple sales channels, you need to repeat this process for all the active sales channels your catalog is on.
+- Email: Type in **support@hellotext.com**.
+- Search Endpoint: This will be revelaed to you on the Setup Wizard.
+
+Once completed. Click on Save.
+
+For more information view an affiliate <a href="https://help.vtex.com/docs/tutorials/configuring-affiliates">setup on VTEX.</a>
+
+After the connection is ready, review [product catalog synchronization]({% link _integrations/product-catalog-sync.md %}) to verify product identity, variants, prices, images, and availability before launching product-based playbooks.