Cómo añadir un widget de comentarios a Wix

Primero, el requisito del plan

Wix nunca escribe la frase "custom code requires plan X." Escribe otras dos que, juntas, dicen lo mismo. La documentación para desarrolladores indica que un sitio debe estar publicado y tener un dominio conectado para que se ejecute el código personalizado. El centro de ayuda dice que conectar tu propio dominio requiere comprar un dominio y un plan para sitios web de Wix. Por tanto, un sitio gratuito en wixsite.com no puede usar Código personalizado. El panel está visible, pero el código nunca se ejecuta.

Eso sí, no hace falta contratar un plan superior. Wix enumera Light, Core, Business y Business Elite, y señala que "All plans allow you to have a custom domain," así que el plan básico cumple el requisito. Light es el plan de entrada de esa gama, lo que describe su posición en la lista y no su precio: Wix no publica importes en dólares en las páginas de ayuda consultadas aquí y dice que los precios Premium varían según la ubicación geográfica. Por eso, esta guía no puede ordenar los planes por precio con rigor. El requisito es el dominio personalizado, y todos los planes de pago lo admiten. Los sitios de Wix Studio tienen una gama de planes Studio aparte que sigue la misma lógica. Consulta los importes reales en tu propia cuenta, donde se muestran los precios de tu ubicación.

Qué vas a instalar

Aquí tienes el propio widget, funcionando en esta página. Publica algo si quieres ver el proceso completo. Si se inserta correctamente, tiene el mismo aspecto en una página de Wix, porque para entonces es simplemente un div en tu sitio.

Por qué el elemento Insertar código no permite ejecutarlo

Hay dos editores y dos rutas distintas al mismo elemento, así que identifica el tuyo antes de seguir instrucciones. En Wix Editor: Agregar elementos, luego Insertar código, luego Inserciones populares, luego Insertar HTML, luego Introducir código y Aplicar. En Wix Studio: Agregar elementos, luego Insertar y redes sociales, luego Insertar código, luego Introducir código y Aplicar. Studio es el que tiene el grupo Insertar y redes sociales; el Editor clásico coloca lo mismo en Inserciones populares y lo llama Insertar HTML. En ambos casos aparece un recuadro en el lienzo, pegas HTML, el HTML se muestra y parece el lugar obvio para cualquier cosa que deba ocupar un punto concreto.

La propia documentación de Wix dice lo contrario: el elemento HTML crea un entorno aislado, un iframe, sin acceso directo a los demás elementos de tu página. Los widgets que necesitan acceder al resto de la página no funcionan dentro de él. Dentro de ese recuadro no estás en tu sitio. Estás en un origen aislado de Wix que se muestra dentro de tu diseño.

Eso impide que un widget de comentarios funcione por dos motivos. El widget lee location.hostname y lo compara con los dominios registrados para el id de tu sitio, lo que evita que alguien copie tu código de inserción y lo use en su propio sitio. Dentro del iframe, ese nombre de host pertenece a Wix, así que la comprobación falla. Por separado, el inicio de sesión con Google valida el origen de la página que lo solicita, y ese origen es el entorno aislado, no tu dominio. Ninguno de los dos problemas admite un parche. El aislamiento existe precisamente para que el código de su interior no pueda hacerse pasar por tu página.

El fallo es silencioso, y eso es lo que te hace perder una tarde. No aparece ningún error en rojo en el editor. Solo un recuadro vacío en el sitio publicado, o una ventana de inicio de sesión que se abre, se cierra y deja al visitante sin sesión iniciada.

Los creadores de sitios difieren en este punto, y por eso un mismo widget se instala de forma distinta en cada plataforma. El elemento de inserción de Webflow no está aislado, así que allí el div donde se inserta el widget va directamente en la página: la instalación en Webflow es la versión corta de esta historia.

La instalación que funciona

Código personalizado permite insertar código en tres lugares: <head>, el inicio del cuerpo y el final del cuerpo. Ninguno de ellos es "debajo del cuerpo de la entrada". Así que el script crea su propio elemento para insertar el widget y lo coloca donde tú quieres. Ese es todo el truco, y requiere unas cinco líneas además del cargador.

1. Registra el dominio conectado, el que Wix ya eligió por ti

   En otros creadores de sitios, este paso exige decidir: el host de pruebas o el de producción, el dominio raíz o www, una de las varias direcciones en las que responde el sitio. Wix elimina esa decisión y, por una vez, eso ayuda. El código personalizado no se ejecuta hasta que el sitio está publicado en un dominio conectado. Por tanto, el dominio que activa la función es el mismo que debe reconocer el widget, y solo hay uno. Añade ese nombre de host en el panel de BootSignal exactamente como aparece en la barra de direcciones, con www incluido, y el panel generará el id del sitio que necesita el fragmento de abajo. La dirección de wixsite.com no es una alternativa que debas registrar: es la dirección en la que estás mientras el código personalizado sigue inactivo.

2. Abre Código personalizado en el panel del sitio

   Este apartado está en el panel del sitio, no en el lienzo del editor, y la ruta es idéntica en Wix Editor, Wix Studio y Wix Harmony. Ve a Configuración, busca Código personalizado en Desarrollo e integraciones y haz clic en + Agregar código personalizado en la parte superior derecha.

3. Pega ambos fragmentos en una sola entrada

   El cargador y el script que inserta el widget van en el mismo cuadro de texto. Asigna a data-site-id el id de tu sitio y a TARGET un selector CSS del elemento debajo del cual debe aparecer el hilo. Pon a la entrada un nombre que reconozcas después, como "Comentarios de BootSignal".

   Fragmento de códigoCopiar

   <script src="https://bootsignal.com/bootsignal.js"
           data-site-id="YOUR_SITE_ID" data-lang="en" defer></script>
   
   <script>
   (function () {
     // CSS selector for the element the thread should be appended to.
     var TARGET = '#comments';
     var timer;
   
     function mount() {
       var host = document.querySelector(TARGET);
       if (!host) return;
       if (host.querySelector('[data-bootsignal="comments"]')) return;
       var el = document.createElement('div');
       el.setAttribute('data-bootsignal', 'comments');
       // One thread per URL. On Wix Blog this is the post slug.
       el.setAttribute('data-thread-id', location.pathname);
       host.appendChild(el);
       // Ask the loader to scan again, in case it already ran.
       if (window.BootSignal && window.BootSignal.activate) window.BootSignal.activate();
     }
   
     function schedule() { clearTimeout(timer); timer = setTimeout(mount, 150); }
   
     // Wix warns its renderer may re-render elements, so watch instead of firing once.
     schedule();
     new MutationObserver(schedule).observe(document.body, { childList: true, subtree: true });
   })();
   </script>

4. Elige las páginas y la posición

   En Agregar código a las páginas, elige Todas las páginas, incluidas las futuras, o Elegir páginas específicas si solo el blog necesita hilos. En Colocar código en, elige Cuerpo - final. Con Todas las páginas seleccionado, Wix ofrece otra opción: en sus propias palabras, cargar el código "only once per visit, or on each page your visitor opens." Wix documenta la opción, pero no cuándo elegir cada alternativa, así que trátala como un ajuste, no como una regla: empieza con una vez por visita y, si un hilo aparece al cargar la página directamente, pero no al llegar desde un índice, cambia a cada página y vuelve a publicar.

5. Aplica, publica y abre el sitio publicado

   El código personalizado no surte efecto en el editor y solo se ejecuta en el sitio publicado. Además, los fragmentos no aparecen como elementos en el lienzo, así que no hay nada que ver hasta que el sitio esté publicado. Aplica, publica, abre la URL real y desplázate hasta el lugar elegido.

La capa de seguridad de diciembre de 2025

Hay algo más que conviene mencionar junto a "pegar y publicar", porque determina si el código pegado llega a ejecutarse. La página de código personalizado de Wix incluye este aviso: "In December 2025, Wix introduced new frontend security measures for custom code on Wix sites. This means that some code snippets that previously worked may now be blocked until the provider updates them. This change affects all types of custom code, including dashboard custom code, embedded code, and Velo code." Nada de eso se dirige a nosotros en particular. Se aplica a todos los scripts de terceros que alguien haya pegado alguna vez en un sitio de Wix.

La página para desarrolladores enlazada desde el aviso enumera los cambios concretos. fetch y XMLHttpRequest se sustituyen por versiones protegidas que, en palabras de Wix, "Can't be replaced or reassigned." Los intentos de escribir en las cookies de Wix mediante document.cookie fallan sin avisar. window.open en el mismo dominio devuelve un objeto vacío. Los iframes que el código del frontend crea en el mismo dominio se aíslan automáticamente, y el atributo srcdoc queda bloqueado. URL, JSON, String, Object, addEventListener y removeEventListener, EventTarget y las API de Service Worker quedan protegidos contra modificaciones. setTimeout y setInterval rechazan una cadena como primer argumento.

Si comparas esa lista con el fragmento anterior, verás cómo se ha adaptado a esas condiciones. Crea un div sencillo, lo añade, observa el documento y pasa a setTimeout una función en lugar de una cadena. No modifica nada de ámbito global ni crea un iframe propio. Aun así, conviene tener presente la lista: es lo primero que debes revisar cuando un script que funcionaba en un sitio de Wix el año pasado deja de funcionar en ese mismo sitio este año. Además, cualquier widget, sea de quien sea, que modifique fetch en tiempo de ejecución o escriba cookies a mano tiene los días contados en este entorno.

Cómo elegir un selector que Wix no cambie de nombre

Wix genera los nombres de clase y los id de los elementos de forma dinámica, y su propia documentación advierte que el CSS o JavaScript dirigido a esos identificadores puede dejar de funcionar al volver a publicar el sitio. #comp-abc123 es un selector con fecha de caducidad. Si usas uno, cópialo de las herramientas de desarrollo en el sitio publicado y vuelve a comprobarlo después de cualquier cambio importante en el editor.

La alternativa más estable se apoya en contenido que controlas tú, en lugar del marcado que controla Wix. Escribe un texto de referencia en un elemento de texto donde deba aparecer el hilo, y luego busca ese texto y sustitúyelo. El texto es tuyo, así que se conserva al volver a publicar y ningún visitante llega a verlo.

<script>
(function () {
  // Type this exact text into a Wix text element where the thread belongs.
  var MARKER = '[[comments]]';
  var timer;

  function slot() {
    var all = document.body.getElementsByTagName('*');
    for (var i = 0; i < all.length; i++) {
      var n = all[i];
      if (!n.children.length && n.textContent.trim() === MARKER) {
        return n.closest('[id^="comp-"]') || n.parentElement || n;
      }
    }
    return null;
  }

  function mount() {
    var host = slot();
    if (!host) return;
    host.textContent = '';
    var el = document.createElement('div');
    el.setAttribute('data-bootsignal', 'comments');
    el.setAttribute('data-thread-id', location.pathname);
    host.appendChild(el);
    if (window.BootSignal && window.BootSignal.activate) window.BootSignal.activate();
  }

  function schedule() { clearTimeout(timer); timer = setTimeout(mount, 150); }
  schedule();
  new MutationObserver(schedule).observe(document.body, { childList: true, subtree: true });
})();
</script>

Por qué el fragmento observa los cambios en lugar de ejecutarse una sola vez

Wix documenta un detalle de su renderizado que condiciona cualquier inserción manual: el motor de renderizado de Wix "may re-render elements in ways that conflict with direct DOM manipulation, especially during page transitions or viewport changes." Es el propio proveedor quien avisa de que la estructura bajo un nodo que has añadido puede cambiar, y señala las transiciones entre páginas como uno de esos momentos. Lo que Wix no explica en ningún sitio es qué ocurre con un fragmento cuando un visitante pasa del índice de tu blog a una entrada. La opción de carga del paso 4 se presenta del mismo modo, sin recomendación alguna. Por tanto, lo riguroso es asumir que no se garantiza ni cuándo se insertará el widget ni cuánto tiempo permanecerá en su sitio.

Por eso el fragmento no depende de que la página se cargue de nuevo ni de que el div permanezca donde se colocó. Usa un observador en lugar de una única ejecución: el observador detecta contenido nuevo en la página, el temporizador agrupa una ráfaga de mutaciones en un solo intento y la función de montaje termina de inmediato si ya hay un hilo en el destino. El cargador marca lo que ha insertado, así que una nueva búsqueda nunca genera una segunda copia. data-thread-id se lee de location.pathname al crear el div, de modo que cada entrada obtiene su propio hilo sin tocar las plantillas. Si un nuevo renderizado elimina el div, esa eliminación es también una mutación que el observador detecta.

Cuánto cuesta además de Wix

Wix te cobra por el plan de cada sitio. BootSignal cobra por dominio registrado, que en un sitio de Wix equivale a esa misma unidad: $20 al mes o $200 al año por dominio registrado. Eso incluye los 49 widgets del catálogo y los que se añadan después de que te suscribas, y la factura no cambia cuando cambia el tráfico. Un segundo sitio de Wix supone un segundo dominio en el panel, no un plan superior. Encontrarás los detalles en la página de precios.

Hay un detalle sobre los dominios específico de Wix que causa problemas durante las pruebas, no durante la instalación. Si abres el sitio publicado desde su dirección de wixsite.com para comprobar tu trabajo, la verificación del nombre de host no reconocerá esa dirección y el hilo no aparecerá. No hay nada roto: la lista de dominios permitidos está cumpliendo la función para la que registraste un dominio. Haz la comprobación en el dominio conectado, que es la única dirección en la que iba a estar el visitante.

No encontrarás precios de la competencia en esta página, porque una cifra desactualizada en una comparación es peor que no dar ninguna. La sección de alternativas los recoge, con fuentes y fechas de comprobación.

El mismo cargador sirve para los demás

Todos los demás widgets reutilizan el cargador que acabas de pegar y el mismo método de inserción, así que para añadir el segundo solo necesitas copiar la función de montaje con otro valor de data-bootsignal. Feedback encaja bien en Wix: quienes no publican en público a menudo sí te cuentan algo en privado.

Hay un widget que merece una mención especial, ya que los sitios de Wix suelen vender algo. Social Proof Toast solo muestra actividad que tu sitio realmente tiene: comentarios, reacciones, valoraciones y votos ya almacenados para tu dominio. No puede inventarse un comprador en Ohio ni lo intentará. Si todavía no hay actividad, no muestra nada, que es el comportamiento previsto.

Cuando la página publicada aparece vacía

Revisa esta lista en orden. Wix deja claro que no te acompañará en el proceso: "We cannot provide support for external codes that were not created or tested by Wix. If you are experiencing an issue with your code snippet, please contact the provider directly." Saber qué paso ha fallado permite resolver la consulta con un mensaje de dos líneas a nuestro equipo, en lugar de tener que adivinar qué ocurre.

1. ¿Estás en el sitio publicado? El código personalizado nunca se ejecuta en el editor ni en la vista previa.
2. ¿Aparece bootsignal.js en la pestaña Red? Si no aparece, la entrada de Código personalizado no se aplica a esta página.
3. ¿document.querySelector(TARGET) devuelve un elemento en la consola de la página publicada? null significa que el selector es incorrecto o que Wix lo ha cambiado de nombre.
4. ¿Hay algún aviso en la consola sobre un id de sitio o de hilo que falta? El div se insertó, pero faltó un atributo.
5. ¿El dominio de la barra de direcciones coincide con el registrado, con www incluido? Una coincidencia aproximada no basta.
6. ¿Este mismo fragmento funcionaba en este sitio antes de diciembre de 2025? Wix dice que sus nuevas medidas de seguridad del frontend pueden bloquear código que antes funcionaba hasta que el proveedor lo actualice.
7. Inspecciona la zona vacía: si tu div está dentro de un <iframe>, el fragmento se pegó en un elemento Insertar código y nunca funcionará ahí.