Webflow

Custom code, IDs estables y colecciones CMS.

Webflow permite inyectar código sin plan Enterprise ni exportar el sitio.

Instalación

  1. Abre el proyecto y ve a Site settings → Custom code.
  2. En Head code, pega:
<script
  src="https://cdn.growthlab.ecomlabs.dev/sdk/v1/bootstrap.js"
  data-site-id="site_TU_ID_PUBLICO"
  async
></script>
  1. Guarda y pulsa Publish. El código personalizado solo se aplica al publicar: en el editor y en la vista previa de diseño no se ejecuta, así que no intentes verificar desde ahí.

Verificar

Abre tu dominio publicado, navega una página y vuelve al panel: Sitios → Instalación → Verificar. La comprobación consulta si llegaron eventos reales, no si el <script> aparece en el HTML.

Si Webflow sirve tu sitio en tu-proyecto.webflow.io mientras pruebas, registra también ese dominio en Sitios → Dominios, o la verificación devolverá wrong_domain: el colector rechaza eventos de hosts que no has registrado, que es lo que impide que otro incruste tu site id en su web.

Seleccionar elementos en el editor visual

Webflow genera clases propias (w-button, div-block-12) que cambian al reordenar elementos en el diseñador. El editor visual guarda para cada cambio un selector primario más alternativas, atributos, texto aproximado y la ruta en el DOM, y aplica el cambio solo si la coincidencia es inequívoca.

Aun así, dale a los elementos que vas a testear un identificador estable:

  1. Selecciona el elemento.
  2. En el panel de ajustes, escribe un ID descriptivo (hero-cta, pricing-primary).
  3. Úsalo como ancla en el experimento.

Un cambio anclado a un ID sobrevive a cualquier reordenación del diseñador.

Colecciones CMS

Los elementos generados desde una colección repiten la misma estructura para cada ítem. Si apuntas a uno concreto, el editor guardará un selector con nth-child, que se rompe en cuanto cambia el orden de la colección.

Para experimentos sobre listados, apunta al contenedor y usa CSS personalizado en la variante, no a un ítem individual.

Interacciones de Webflow

Las interacciones (Webflow IX) manipulan estilos en tiempo de ejecución. Si una variante cambia una propiedad que una interacción también anima, gana la interacción.

Cuando ocurra, cambia una clase en lugar de un estilo en línea: el CSS personalizado de la variante se aplica con la especificidad suficiente y no compite con la animación.