Añadir un chatbot a tu sitio WordPress sin plugin: el método ligero que no ralentiza tus páginas

Por qué "sin plugin" importa en WordPress

Cada plugin que instalas en WordPress es un impuesto sobre cada carga de página. Algunos lo merecen. La mayoría de los plugins de chatbot, no.

El motivo es estructural. Un plugin de chat típico registra un hook PHP en wp_enqueue_scripts, envía sus propios bundles de CSS y JavaScript, suele cargar una copia de jQuery, lanza llamadas de analítica antes de que el visitante haya hecho nada y se ejecuta en cada página — inicio, entrada del blog, contacto, checkout — se abra o no la ventana de chat. El peso en la red está entre 200 y 500 KB. Multiplica por cada visitante y, sin darte cuenta, has cambiado la velocidad del sitio por una función que la mayoría de las personas no utiliza.

Esta guía muestra el enfoque opuesto: una única etiqueta <script> asíncrona — por debajo de 5 KB comprimida — que se carga después de que la página sea interactiva, no toca los Core Web Vitals y se comporta igual en cualquier tema. Ningún plugin que actualizar, ninguna sorpresa de compatibilidad tras la próxima versión de WordPress, ningún impacto en la puntuación de Lighthouse. Tres minutos para instalar, cuatro rutas distintas entre las que elegir y un truco opcional de carga condicional que reduce el impacto a casi cero en las páginas donde el bot no es estrictamente necesario.

El artículo asume que tienes un sitio en WordPress (Gutenberg o clásico) y que ya has creado un bot en Simple Chat — si no lo has hecho, la guía de cinco minutos te lleva paso a paso.

Por qué la mayoría de plugins de chatbot ralentiza tu sitio

Las fichas del repositorio de WordPress.org rara vez declaran el peso real del plugin, así que conviene entender qué pasa por dentro. En casi cualquier plugin de chat aparecen cuatro centros de coste:

• jQuery duplicado. Muchos plugins de chat siguen dependiendo de jQuery, incluso cuando tu tema lo abandonó hace tiempo. WordPress deduplica la copia core, pero las librerías adicionales del plugin (jQuery UI, jQuery Migrate, addons específicos) se cargan igualmente — 30–90 KB extra por página.
• CSS de framework pesado. Hojas de estilo de 50–150 KB, a menudo un design system completo del que el bot usa un único botón.
• Interfaz cargada en avance. Avatares, fuentes, sprites de emojis e iconos SVG descargados en el primer paint, aunque el visitante todavía no haya hecho clic en el botón de chat.
• Analítica sobre cada acción. Hover, scroll, tiempo en página, beacons al unload. Muchas peticiones pequeñas, todas en la ruta crítica en conexiones más débiles.

La consecuencia sobre los Core Web Vitals es la parte que más daño hace al SEO. Las métricas con las que Google evalúa las páginas — Largest Contentful Paint, Interaction to Next Paint, Cumulative Layout Shift — son justo las que un plugin de chat tiende a empeorar. Las auditorías Lighthouse públicas muestran de forma habitual instalaciones de plugins de chat que añaden 100–300 ms al LCP en pruebas mobile con throttling, y una penalización similar al Total Blocking Time cuando el JS de la chat compite con el JS del tema durante la hidratación.

El daño no es teórico. La señal Page Experience de Google entra en el ranking de búsqueda. El bot pasa a ser el motivo por el que una entrada de tu blog pierde una posición en los resultados. Casi nadie lo conecta: se nota que "el sitio va más lento", pero el plugin sigue haciendo su trabajo visible y permanece instalado.

No es culpa real del vendor del chatbot: distribuye el plugin así para que cualquiera sin perfil técnico pueda instalarlo con un clic. El problema es que detrás de ese "un clic" se esconde todo el coste de arriba.

La alternativa ligera: el script de embed

Un script de embed es una sola etiqueta <script> que descarga un pequeño loader desde la CDN del proveedor. En Simple Chat el loader pesa unos 3 KB comprimidos. Hace cuatro cosas:

1. Lee el ID del bot de un atributo data- sobre la etiqueta.
2. Dibuja un botón de chat en una esquina de la página, con el color de tu marca.
3. Espera a que el visitante haga clic antes de montar el iframe completo de la chat (el iframe se carga bajo demanda, unos 35–40 KB, nunca en el primer paint).
4. Se mantiene apartado hasta que pasa algo.

Ese último punto es la noticia. Las instalaciones por plugin cargan el motor de la chat, el avatar, las fuentes y el mensaje de bienvenida antes de que el visitante haya mostrado interés. El script de embed hace lo contrario: el botón es prácticamente lo único que toca la página hasta que llega el clic, y hasta ese botón se carga con async defer, dándole al navegador todo el tiempo para acabar de pintar tu hero.

La diferencia de peso se acumula. Un plugin de chat habitual envía entre 200 y 500 KB de CSS+JS en el primer paint. El script de embed de Simple Chat son 3 KB. Eso es una reducción de 40 a 100 veces sobre la parte de la página que Google mide con más dureza.

Y un detalle importante: el método es independiente del tema. Funciona en Astra, GeneratePress, Kadence, Avada, Divi, el Twenty Twenty-Four por defecto, los temas a bloques personalizados y los temas hijo hechos a mano por igual. El botón de chat queda en una esquina fija, por encima de tu contenido con el patrón estándar de z-index, y no interfiere nunca con el layout del tema.

Método 1 — Añadirlo desde el functions.php del child theme

Es la ruta para perfiles técnicos. Editas un archivo PHP, pero el cambio es una sola función y una llamada add_action. Usa siempre un child theme — nunca el parent theme — para que una actualización del tema no sobrescriba la modificación.

<?php
/**
 * Inyecta el snippet de embed de Simple Chat justo antes de </body>.
 *
 * Sustituye YOUR_BOT_ID por el UUID de la pestaña Install del panel
 * de Simple Chat. La prioridad 99 mantiene la etiqueta al final del
 * footer, después de la mayor parte de la salida de temas y plugins.
 */
add_action( 'wp_footer', function () {
    if ( is_admin() ) {
        return; // No cargues el widget en /wp-admin/.
    }
    ?>
    <script
        src="https://getsimplechat.com/widget/embed.js"
        data-bot-id="YOUR_BOT_ID"
        async defer></script>
    <?php
}, 99 );

Dónde pegar: abre wp-content/themes/tu-child-theme/functions.php desde el gestor de archivos del hosting, vía SFTP o desde Apariencia → Editor de archivos de tema. Añade el bloque al final del archivo. Guarda.

Por qué wp_footer y no wp_head: al colocarlo en el footer, la etiqueta <script> se lee después del body HTML, cuando el navegador ya ha empezado a pintar el contenido visible. async le dice al navegador que descargue el script en paralelo; defer le dice que lo ejecute cuando termine el parseo. Combinados, el embed tiene coste de render prácticamente nulo.

Dónde está el ID del bot: en el panel de Simple Chat abre el bot y entra en la pestaña Install. El snippet completo está ahí listo para copiar — el atributo data-bot-id guarda el UUID de ese bot.

Método 2 — Desde el campo "Header / Footer scripts" del tema (sin código)

No hace falta que toques PHP. Casi todos los temas WordPress modernos llevan un campo de "código personalizado" o "footer scripts" pensado justo para este tipo de inserción.

La ubicación exacta varía según el tema, pero el patrón es el mismo: encuentras un panel de ajustes que se llama "Header / Footer Scripts", "Custom Code", "Code Injection" o similar, eliges la posición footer y pegas el snippet.

• Astra: Apariencia → Personalizar → Layout → Custom Code → Footer.
• GeneratePress (Premium): Apariencia → Elements → Añadir nuevo → Hook → elige wp_footer.
• Kadence: Personalizar → General → Header / Footer Scripts → Footer Scripts.
• Avada: Avada → Options → Advanced → Code Fields → Space Before </body>.
• Divi: Divi → Theme Options → Integration → Añade código al <body> (bottom).
• Twenty Twenty-Four y otros temas a bloques: Apariencia → Editor → Patterns → parte de plantilla Footer → añade un bloque HTML personalizado al final.

Cuenta como "sin plugin" porque no estás instalando ninguno — estás usando una función nativa del tema. El script acaba en el mismo sitio en el que habría acabado vía wp_footer; el tema solo te ofrece la interfaz para insertarlo.

Pega el snippet exactamente como aparece en el panel de Simple Chat, guarda y recarga el sitio en una ventana de incógnito para comprobar que aparece el botón de chat. Si no aparece, revisa que el campo acepte HTML en bruto (algunos temas codifican la entrada — pasa a "HTML raw" si está disponible).

Método 3 — Mediante un bloque HTML personalizado en el editor

Si solo quieres el chatbot en ciertas páginas — una página de contacto, una página de precios, una landing de producto — el editor de bloques lo gestiona directamente.

En Gutenberg, edita la página donde quieras el bot, añade un bloque nuevo, escribe HTML y elige HTML personalizado. Pega el snippet de embed en el bloque. Actualiza la página.

<!-- Pegar dentro de un bloque HTML personalizado en Gutenberg -->
<script
    src="https://getsimplechat.com/widget/embed.js"
    data-bot-id="YOUR_BOT_ID"
    async defer></script>

El método queda limitado a la página: el script solo se ejecuta cuando esa página concreta se visita. Está bien si quieres un bot dedicado en una landing, o si estás probando el widget en una página única antes de extenderlo a todo el sitio.

El límite es la otra cara de la ventaja: tendrás que añadir el bloque a cada página que quieras cubrir. Para instalaciones en todo el sitio, los Métodos 1, 2 o 4 son mejores. Usa el Método 3 cuando el alcance sea realmente a nivel de página — por ejemplo, un bot de "horarios festivos" que solo vive en la página de contacto durante diciembre.

Método 4 — A través de Google Tag Manager

Si ya usas Google Tag Manager para analítica o etiquetas de marketing, añadir el chatbot por GTM es la opción más limpia. Sin editar el tema, sin bloques página a página, y de propina te llevas las condiciones de disparo de GTM.

En tu workspace de GTM:

1. Clic en Tags → Nueva → HTML personalizado.
2. Pega el snippet de embed exactamente como aparece en el panel de Simple Chat.
3. Configura el activador. Para uso en todo el sitio, elige All Pages. Para uso acotado, elige Some Pages y añade una condición (Page Path contiene /contacto, o Page Hostname igual a tienda.ejemplo.com, etc.).
4. Guarda y luego Submit para publicar el workspace.

Ventajas frente a los otros métodos:

• No se toca ningún archivo del tema. Tu desarrollador se queda enfocado en el tema; marketing gestiona la instalación de la chat desde GTM.
• Flexibilidad de disparadores. Muestras el bot solo en ciertas rutas, solo tras un temporizador de 15 segundos, solo a usuarios que repiten visita — cualquier condición que GTM exponga como trigger.
• Tests A/B. Pausas la etiqueta, la lanzas al 50 % del tráfico, comparas conversiones antes y después — todo dentro de la interfaz de GTM.

Un aviso: gestión del consentimiento. Si tu sitio usa un consent manager (Cookiebot, Iubenda, Complianz, la familia de plugins GDPR para WordPress), el widget de chat debe respetar la elección de consentimiento del visitante. La cookie de sesión de Simple Chat es funcional y no de tracking, pero si tu jurisdicción o tu política la clasifica como no estrictamente necesaria, vincula la etiqueta de GTM al grupo de consentimiento estadístico o funcional en vez de dispararla sin condiciones.

Carga condicional (avanzado)

Hasta un script de embed tan ligero como 3 KB tiene un coste distinto de cero. Si vas detrás de cada milisegundo — en una home que ya saca 95+ en Lighthouse, o en un flujo de checkout donde no quieres ningún JS de terceros — puedes diferir el propio embed detrás de un disparador de interacción del usuario.

El patrón funciona así: añades un pequeño script inline que inyecta la etiqueta de embed solo cuando ocurre una señal real. Tres disparadores útiles:

<!-- Pegar en <footer> o en un bloque HTML personalizado -->
<script>
(function () {
    var loaded = false;
    function loadSimpleChat() {
        if (loaded) return;
        loaded = true;
        var s = document.createElement('script');
        s.src = 'https://getsimplechat.com/widget/embed.js';
        s.async = true;
        s.defer = true;
        s.setAttribute('data-bot-id', 'YOUR_BOT_ID');
        document.body.appendChild(s);
    }

    // Trigger 1 — carga en el primer scroll (casi todos los visitantes hacen scroll pronto).
    window.addEventListener('scroll', loadSimpleChat, { once: true, passive: true });

    // Trigger 2 — carga tras 8 segundos en la página.
    setTimeout(loadSimpleChat, 8000);

    // Trigger 3 — carga al primer clic o pulsación de tecla.
    window.addEventListener('click',   loadSimpleChat, { once: true });
    window.addEventListener('keydown', loadSimpleChat, { once: true });
})();
</script>

Gana el disparador que se active primero; los siguientes son inofensivos porque la guarda loaded los corta. El resultado es un botón de chat que aparece en menos de un segundo desde la primera interacción real — lo bastante rápido para que el visitante no perciba retraso — manteniendo la carga inicial completamente libre de JS de chat.

En páginas pensadas para tráfico de asistentes IA, crawlers o pre-renders de previsualización al compartir, es la configuración más limpia: el bot está para las personas que interactúan, e invisible para los bots que no.

Cuándo no usar este truco. En páginas de alta intención donde el visitante necesita el bot deprisa — páginas de precios, páginas de soporte, una landing "Habla con nosotros" — los 8 segundos son demasiado. Ahí usa la instalación estándar (Métodos 1–4). La carga condicional brilla en páginas de lectura (entradas de blog, documentación, marketing) donde el bot es un extra agradable, no la acción principal.

Pruebas y verificación

Has añadido el snippet. Ves aparecer el botón de chat cuando recargas el sitio en una ventana de incógnito. Bien — la instalación ha ido bien. La siguiente pregunta es: ¿se ha mantenido ligero de verdad?

Tres comprobaciones antes de cantar victoria.

1. Lighthouse, antes y después. Lanza una auditoría Lighthouse desde Chrome DevTools sobre la misma página, modo mobile, throttling simulado, ventana de incógnito. Compara la puntuación de Performance, LCP, TBT y CLS con un baseline tomado antes de instalar. Un embed bien instalado mueve el LCP menos de 50 ms y el TBT menos de 20 ms.

2. La pestaña Network. Abre DevTools → Network, recarga la página, ordena por Size. Busca embed.js: el tamaño transferido debería rondar los 3 KB. El iframe completo de la chat no debe aparecer en la lista hasta que pulses realmente el botón. Si el iframe se carga en el primer paint, algo está saltándose el montaje lazy; comprueba que has pegado el snippet exactamente como te lo dan.

3. La waterfall de WebPageTest. Para una mirada más profunda, pasa la página por webpagetest.org. La waterfall confirma que embed.js se carga después de que el documento se haya parseado y que ningún recurso de la chat bloquea el elemento LCP de la página.

Dos fallos a vigilar: un plugin de chat aún instalado al lado del embed (desinstálalo — tener los dos es el peor de los mundos) y un plugin de caching que minifica o combina el snippet de embed en un archivo roto (mira las optimizaciones WP de abajo).

Optimizaciones específicas de WordPress

Casi siempre hay una capa de caching delante del sitio: WP Rocket, LiteSpeed Cache, W3 Total Cache, FlyingPress, o el built-in del hosting (Kinsta, WP Engine, SiteGround). El snippet convive con todos, pero hay dos ajustes a los que prestar atención.

No combines ni minifiques el snippet de embed. Algunos plugins de caching concatenan scripts inline para reducir peticiones HTTP. Eso rompe el orden async defer y puede mover la llamada del embed antes de wp_footer. En WP Rocket, excluye embed.js de "Combine JavaScript files"; en LiteSpeed, añádelo a la lista de exclusiones de JS. El snippet ya son 3 KB; combinarlo no ahorra nada y rompe el orden.

Añádelo bien a la allowlist de "Delay JS". Si usas el Delay JS de WP Rocket o una opción equivalente, el snippet ya viene diferido — añadirlo otra vez puede causar doble carga. En esos cachés déjalo tal cual.

Sitios multilingües (WPML, Polylang, TranslatePress). Un único bot puede servir todos los idiomas del sitio. Simple Chat detecta el idioma del visitante desde su navegador y responde en él en los tiers Advanced y Ultra — sin configuración extra, sin un bot por idioma. Instalas el snippet una vez, en el footer compartido.

Sobre la CDN. El script de embed ya se sirve desde una CDN; tu CDN no necesita hacer de proxy. No intentes self-hostar embed.js en tu dominio — los auto-updates no te llegarán y te quedarás colgado en una versión antigua.

Plugin vs script de embed: comparativa

El script de embed gana en todos los ejes salvo uno: el plugin te da un panel de ajustes dentro de wp-admin en vez de un panel separado. Si para tu flujo de trabajo ese panel dentro de WP es un requisito no negociable, instala un plugin de chat; en cualquier otro caso, el script es más ligero, más rápido y más fácil de quitar.

Resumen y siguiente paso

Cuatro rutas de instalación sin plugin, todas por debajo de 5 KB, todas más rápidas que cualquier plugin de chat del repositorio de WordPress.

• Método 1 — functions.php para quien se mueve cómodo en PHP.
• Método 2 — campo footer scripts del tema para perfiles no técnicos con un tema moderno.
• Método 3 — bloque HTML personalizado para instalaciones acotadas a páginas concretas.
• Método 4 — Google Tag Manager para despliegues gestionados por marketing y disparadores flexibles.

Una vez instalado, verifica con Lighthouse, mira en la pestaña Network la entrada embed.js de 3 KB, exclúyela de las reglas de combine del plugin de caching, y listo. El chatbot atiende a los visitantes 24/7 sin tirar abajo tus Core Web Vitals.

Probar Simple Chat es gratis — 50 créditos al registrarte, sin tarjeta. Suficientes para activar el bot, probarlo en un sitio de staging, mantener conversaciones reales durante la primera semana y comprobar si el embed sin plugin mantiene tu puntuación Lighthouse donde la quieres. Mira los precios cuando estés listo para escalar.