Volver al blogTutoriales

Cómo instalar Lia en WordPress/WooCommerce

Lia19 de enero de 2026

WordPress es la plataforma web más usada del mundo, y WooCommerce el plugin de eCommerce más popular. Si tu tienda está en WordPress, este tutorial te guía para instalar Lia paso a paso.

Cubriremos tanto sitios WordPress genéricos como tiendas WooCommerce específicamente.

Requisitos previos

  • Sitio WordPress activo (versión 5.0 o superior recomendada)
  • Acceso al panel de administración (wp-admin)
  • Cuenta en Lia (app.hellolia.es)
  • Si tienes WooCommerce: versión 4.0 o superior

Paso 1: Crea y configura tu cuenta en Lia

  1. Regístrate en app.hellolia.es si aún no lo has hecho
  2. Completa la configuración básica:
    • Nombre del chatbot
    • Mensaje de bienvenida
    • Añade información a la base de conocimiento (envíos, devoluciones, FAQs)
  3. Ve a Configuración > Instalación y copia tu código de widget

Paso 2: Instala el código en WordPress

Hay varias formas de hacerlo. Te explicamos las tres más comunes:

Método 1: Plugin de inserción de código (Recomendado para no técnicos)

Este método es el más sencillo y no requiere tocar archivos del tema.

  1. En tu WordPress, ve a Plugins > Añadir nuevo
  2. Busca "Insert Headers and Footers" (de WPCode)
  3. Instala y activa el plugin
  4. Ve a Code Snippets > Header & Footer
  5. En la sección "Footer", pega el código de Lia
  6. Guarda los cambios

¿Por qué el footer? El código debe cargarse después del contenido de la página para no ralentizar la carga.

Método 2: Editar functions.php (Para usuarios con conocimientos técnicos)

Si prefieres no instalar plugins adicionales:

  1. Ve a Apariencia > Editor de archivos de tema
  2. Selecciona el archivo functions.php de tu tema
  3. Añade este código al final del archivo:
// Añadir Lia Chatbot
function add_lia_chatbot() {
    ?>
    <script>
      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;
      j.src='https://widget.hellolia.es/widget.js?id='+i;
      f.parentNode.insertBefore(j,f);
      })(window,document,'script','liaLayer','TU_API_KEY');
    </script>
    <?php
}
add_action('wp_footer', 'add_lia_chatbot');
  1. Reemplaza TU_API_KEY con tu API key real
  2. Guarda los cambios

Importante: Si actualizas tu tema, perderás este cambio. Considera usar un tema hijo para evitarlo.

Método 3: Editar footer.php directamente

Similar al método anterior pero más directo:

  1. Ve a Apariencia > Editor de archivos de tema
  2. Busca el archivo footer.php
  3. Encuentra la etiqueta </body>
  4. Pega el código de Lia justo antes de </body>
  5. Guarda los cambios

Configuración específica para WooCommerce

Si usas WooCommerce, puedes aprovechar funcionalidades adicionales:

Mostrar el chat solo en páginas de tienda

Modifica el código en functions.php:

function add_lia_chatbot() {
    // Solo mostrar en páginas de WooCommerce
    if (is_woocommerce() || is_cart() || is_checkout()) {
        ?>
        <script>
          (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
          new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
          j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;
          j.src='https://widget.hellolia.es/widget.js?id='+i;
          f.parentNode.insertBefore(j,f);
          })(window,document,'script','liaLayer','TU_API_KEY');
        </script>
        <?php
    }
}
add_action('wp_footer', 'add_lia_chatbot');

Excluir páginas específicas

Si quieres que NO aparezca en ciertas páginas:

function add_lia_chatbot() {
    // No mostrar en la página de mi cuenta
    if (is_account_page()) {
        return;
    }

    ?>
    <script>
      // ... código del widget ...
    </script>
    <?php
}
add_action('wp_footer', 'add_lia_chatbot');

Paso 3: Verifica la instalación

  1. Abre tu sitio en una nueva ventana o en modo incógnito
  2. El icono del chat debería aparecer en la esquina inferior derecha
  3. Haz clic y prueba con algunas preguntas:
    • "¿Cuál es el horario de atención?"
    • "¿Hacéis envíos a Canarias?"
    • "Quiero hacer una devolución"

Paso 4: Ajusta el diseño para WordPress

WordPress tiene muchos temas diferentes, y a veces el widget puede necesitar ajustes.

Ajustar la posición si hay conflictos

Si tu tema tiene elementos fijos en la esquina (botón de WhatsApp, cookie banners, etc.), puedes ajustar la posición del widget desde Lia:

  1. Ve a Configuración > Widget en tu dashboard de Lia
  2. Ajusta el margen inferior y lateral
  3. O cambia la posición a la esquina izquierda

Ajustar el z-index si se oculta

Si el widget aparece detrás de otros elementos, puedes añadir CSS personalizado:

  1. Ve a Apariencia > Personalizar > CSS adicional en WordPress
  2. Añade:
#lia-widget-container {
    z-index: 999999 !important;
}

Paso 5: Configuración móvil

WordPress/WooCommerce recibe mucho tráfico móvil. Verifica que el chat funciona bien:

  1. Abre tu tienda en el móvil
  2. Comprueba que el botón del chat es visible y accesible
  3. Verifica que al abrir el chat se puede escribir cómodamente
  4. Prueba a escribir un mensaje y recibir respuesta

Si el chat interfiere con otros elementos en móvil, ajusta los márgenes desde el dashboard de Lia.

Paso 6: Integración con plugins populares

Con WPML (sitio multiidioma)

Si usas WPML para tener tu sitio en varios idiomas:

  1. En Lia, ve a Configuración > Idiomas
  2. Configura respuestas en cada idioma
  3. El widget detectará automáticamente el idioma de la página

Con caché (WP Super Cache, W3 Total Cache, etc.)

Los plugins de caché no deberían afectar al widget, pero si tienes problemas:

  1. Excluye el script de Lia del minificado/combinado de JS
  2. O añade una excepción para el dominio widget.hellolia.es

Con plugins de seguridad (Wordfence, etc.)

Si el widget no carga, verifica que tu plugin de seguridad no está bloqueando:

  1. El dominio widget.hellolia.es
  2. Scripts externos en general

Añade el dominio a la lista blanca si es necesario.

Solución de problemas

El chat no aparece

  1. Limpia la caché de tu sitio (y del navegador)
  2. Verifica que el código está correctamente instalado
  3. Comprueba la consola del navegador (F12) para errores
  4. Verifica que no hay conflictos con otros plugins

El chat aparece pero no en todas las páginas

  1. Si usaste código condicional, revisa las condiciones
  2. Algunos temas no cargan el footer en todas las páginas
  3. Verifica que el plugin de inserción de código está configurado para "todas las páginas"

Conflictos de estilo con el tema

  1. Usa el inspector del navegador para identificar el conflicto
  2. Añade CSS específico para corregirlo
  3. Contacta con soporte de Lia si necesitas ayuda

Lentitud al cargar

  1. El script de Lia se carga de forma asíncrona, no debería afectar
  2. Si notas lentitud, verifica con herramientas como GTmetrix que el problema es el widget
  3. En la mayoría de casos, la lentitud viene de otros factores

Siguientes pasos

Con Lia instalado en tu WordPress/WooCommerce:

  1. Completa la base de conocimiento con información específica de tu tienda
  2. Configura el escalado para recibir alertas cuando se necesite intervención humana
  3. Personaliza el widget para que coincida con tu marca
  4. Revisa las analíticas después de unos días de uso

Conclusión

Instalar Lia en WordPress es sencillo, independientemente de tu nivel técnico. El método del plugin es el más seguro para usuarios no técnicos, mientras que editar functions.php da más control a desarrolladores.

Una vez instalado, el verdadero valor viene de configurar bien el chatbot con información específica de tu negocio.

¿Tienes dudas sobre la instalación en WordPress? Nuestro equipo de soporte está disponible para ayudarte. Visita hellolia.es.

wordpresswoocommerceintegración