Cómo crear un enlace clicable para abrir el widget de chat de Shopify: Una guía paso a paso

La burbuja de chat predeterminada de Shopify Inbox está bien, pero no siempre encaja con el diseño que tanto te ha costado conseguir para tu tienda. Simplemente flota ahí, a veces tapando información clave o desentonando con tu imagen de marca. Quizás quieras un diseño más limpio, o poner un enlace de "Chatea con nosotros" directamente en tu página de contacto, en el pie de página o en una página de producto donde sabes que los compradores tendrán preguntas.

Y si has buscado en Google cómo solucionar esto, probablemente hayas encontrado un montón de publicaciones antiguas en foros con trucos que ya no funcionan. Métodos como añadir "/?chat" al final de una URL están obsoletos y ya no son fiables.

Para eso está esta guía. Te guiaremos a través de un proceso sencillo, paso a paso, utilizando un pequeño fragmento de JavaScript moderno. Es la forma más fiable de crear un enlace clicable para abrir tu widget de chat de Shopify desde cualquier parte de tu sitio, devolviéndote el control sobre el diseño de tu tienda.

Qué necesitarás antes de empezar

Antes de empezar, asegurémonos de que tienes todo listo. No te preocupes, la lista es corta:

• Una tienda de Shopify con la aplicación Shopify Inbox instalada y funcionando.

• Acceso de administrador a tu cuenta de Shopify para poder entrar en el código de tu tema.

• Unos 10-15 minutos de tu tiempo.

Por qué los métodos antiguos ya no funcionan

Shopify actualiza constantemente su plataforma, lo cual es genial, pero también significa que los trucos y soluciones no oficiales pueden dejar de funcionar de repente. Esos antiguos parámetros de URL como "?show_chat" eran ingeniosos trucos que funcionaron durante un tiempo, pero desde entonces Shopify ha cambiado la forma en que aplicaciones como Inbox se cargan en tu escaparate. Intentarlos hoy en día suele llevar a enlaces rotos y clientes confundidos.

La razón técnica es que el widget de chat ahora a menudo se carga en lo que se llama un shadow DOM o un iframe. Puedes imaginarlo como una pequeña caja segura en tu página web que se mantiene separada de todo lo demás. Esta configuración hace que sea difícil para una simple URL llegar dentro de esa caja y decirle al widget que se abra.

Por eso necesitamos un enfoque moderno con JavaScript. El método que te vamos a mostrar es mucho más estable. En lugar de intentar un truco con la URL, encuentra el botón de chat real en la página, dondequiera que esté escondido, y simula un clic. Funciona exactamente como si una persona real abriera el chat, lo que lo convierte en una solución mucho más fiable a largo plazo.

Cómo crear un enlace de chat de Shopify clicable en 4 pasos

Todo el proceso se reduce a dos cosas: añadir un enlace a tu página y luego insertar un pequeño script en tu tema para que funcione. No se necesita experiencia como desarrollador, te guiaré en cada clic.

Paso 1: Haz una copia de seguridad de tu tema

De acuerdo, antes de tocar cualquier código, hagamos lo más inteligente: hacer una copia de seguridad de tu tema. Esta es tu red de seguridad. Si algo sale mal, puedes restaurar la copia de seguridad con un solo clic y hacer como si nada hubiera pasado.

• Desde tu panel de administración de Shopify, ve a Tienda online > Temas.

• Encuentra tu tema actual (el que dice "Publicado"). Haz clic en el icono de tres puntos (...) junto al botón de personalizar.

• Elige Duplicar en el menú.

Shopify creará una copia exacta. Ahora puedes editar el original sin preocuparte, sabiendo que tienes una versión segura lista por si la necesitas.

Panel de administración de Shopify donde puedes encontrar la sección de temas para hacer una copia de seguridad de tu tema.

Paso 2: Añade tu enlace o botón personalizado

Ahora, decide dónde quieres que aparezca tu nuevo enlace de chat. Puedes ponerlo prácticamente en cualquier lugar que acepte HTML, como en una página de contacto, dentro de la descripción de un producto o en el pie de página de tu sitio.

Una vez que hayas elegido un lugar, añade esta simple línea de HTML:

Chatea con nuestro equipo  

Siéntete libre de cambiar "Chatea con nuestro equipo" por lo que tenga más sentido para ti. La parte realmente importante es href="#open-chat". Este es el gancho único que nuestro script buscará para saber cuándo abrir el chat. En realidad, no enlaza a otra página; es solo un identificador para nuestro código.

Paso 3: Añade el código JavaScript a tu tema

Vale, esta es la parte central de la solución. Necesitamos añadir un pequeño script a tu tema que espere a que alguien haga clic en tu nuevo enlace. El mejor lugar para esto es tu archivo "theme.liquid", lo que asegura que el código esté activo en todas las páginas de tu sitio.

1. En tu panel de administración de Shopify, vuelve a Tienda online > Temas.

2. Haz clic en el icono de tres puntos (...) en tu tema publicado y selecciona Editar código.

3. En el menú de archivos de la izquierda, abre la carpeta "Layout" y haz clic en "theme.liquid".

4. Desplázate hasta el final del archivo. Justo antes de ver la etiqueta de cierre ``, pega este fragmento de código:

  

document.addEventListener('DOMContentLoaded', function() {  

  const customChatLinks = document.querySelectorAll('a[href="#open-chat"]');  

  if (customChatLinks.length > 0) {  

    const openShopifyChat = function(event) {  

      event.preventDefault();  

      const chatButton = document.querySelector('#ShopifyChat button[aria-controls="chat-ui"], #dummy-chat-button-iframe');  

      if (chatButton) {  

        chatButton.click();  

      } else {  

        // Fallback for when the button is inside an iframe  

        const iframe = document.querySelector('#dummy-chat-button-iframe');  

        if (iframe && iframe.contentWindow) {  

          const buttonInFrame = iframe.contentWindow.document.querySelector('button');  

          if (buttonInFrame) {  

            buttonInFrame.click();  

          } else {  

            console.warn('Shopify Chat button not found inside iframe.');  

          }  

        } else {  

          console.warn('Shopify Chat button not found.');  

        }  

      }  

    };  

    customChatLinks.forEach(link => {  

      link.addEventListener('click', openShopifyChat);  

    });  

  }  

});  

  

Entonces, ¿qué hace realmente este código? Simplemente espera a que la página se cargue y luego vigila cualquier enlace con href="#open-chat". Cuando alguien hace clic en él, el script evita que la página salte y, en su lugar, encuentra el botón oficial de Shopify Chat y hace "clic" por ti. Así de simple.

Paso 4: Prueba tu nuevo enlace

Pulsa el botón "Guardar" en la esquina superior derecha del editor de código. Ahora, ve a la página donde añadiste tu enlace personalizado y pruébalo. El widget de chat de Shopify Inbox debería abrirse, igual que si hubieras hecho clic en el icono flotante.

Realiza algunas pruebas. Cierra el widget y vuelve a hacer clic en tu enlace para asegurarte de que funciona correctamente.

Problemas comunes y soluciones

Aunque este script es bastante sólido, trabajar con código personalizado a veces puede tener sus peculiaridades. Aquí hay un par de cosas a tener en cuenta.

• ¿Qué pasa si el enlace no funciona? Si tu enlace no funciona, lo más probable es que Shopify haya actualizado el código del widget de chat, cambiando el ID del botón. El selector en nuestro script ("#ShopifyChat button...") está diseñado para manejar variaciones comunes, pero un cambio importante en la plataforma podría romperlo. Esta es la principal desventaja de cualquier código personalizado: podría necesitar un pequeño ajuste en el futuro.

• La accesibilidad es clave: Usa siempre un texto claro y descriptivo para tus enlaces. "Chatea con nuestro equipo de soporte" es mucho más útil para los usuarios con lectores de pantalla que algo vago como "Haz clic aquí".

• Rendimiento: No te preocupes, este script es increíblemente ligero y no tendrá ningún impacto notable en la velocidad de tu sitio. Es solo un buen recordatorio de que cualquier código personalizado es una cosa más que tienes que gestionar tú mismo.

Más allá del enlace: ¿Qué pasa después?

Solucionar lo del enlace es una gran sensación. Has limpiado el diseño de tu sitio y has facilitado que los clientes se pongan en contacto. Pero... ¿qué pasa después? Una vez que hacen clic en ese enlace, empieza el verdadero trabajo.

Esta es la parte que un simple fragmento de código no puede resolver. ¿Quién está ahí para responder a esos chats? ¿Cuál es el plan si llega un mensaje tarde por la noche? ¿Cómo se las arreglan tus agentes para responder una y otra vez a las mismas preguntas, como "¿Dónde está mi pedido?", sin agotarse? Un enlace personalizado es un gran primer paso, pero la experiencia puede decaer rápidamente si no hay una respuesta rápida y útil al otro lado.

Aquí es donde el soporte manual suele tocar techo, y empiezas a pensar en una forma mejor.

Una plataforma de IA como eesel AI está diseñada para continuar donde lo deja el soporte manual. El Chatbot de IA de eesel AI no solo ayuda a iniciar una conversación, sino que a menudo la resuelve al instante.

Un chatbot de eesel AI proporcionando soporte automatizado y comprobando el estado de entrega de un pedido a través de su integración con Shopify.

Así es como aborda los desafíos que un enlace personalizado por sí solo no puede resolver:

• Configúralo en minutos (en serio): En lugar de enredar con el código del tema, eesel AI se conecta con Shopify en unos pocos clics. La configuración es completamente autoservicio, por lo que puedes tener un agente de IA trabajando para ti en menos tiempo de lo que tardas en prepararte un café.

• Dale todo tu conocimiento: Puedes entrenar a tu IA con todo, desde los artículos de tu centro de ayuda hasta tickets de soporte anteriores e incluso todo tu catálogo de productos de Shopify. Así podrá responder a preguntas detalladas sobre productos, gestionar devoluciones y explicar políticas por sí misma.

• Deja que haga el trabajo por ti: eesel AI se puede configurar con acciones personalizadas para consultar información de pedidos en tiempo real directamente desde Shopify. Cuando un cliente pregunta "¿Dónde está mi pedido?", obtiene una respuesta inmediata y en tiempo real, a cualquier hora del día, sin que un humano tenga que mover un dedo.

• Pruébalo antes de lanzarlo: ¿Te preguntas cómo se comportará realmente una IA con tus clientes? El modo de simulación de eesel AI te permite probar tu configuración con miles de conversaciones pasadas de tus clientes antes de que se ponga en marcha. Obtienes una previsión clara de lo eficaz que será desde el primer día.

Tomando el control del chat con tus clientes

Ahora tienes una forma sólida y moderna de crear un enlace clicable para abrir tu widget de chat de Shopify, dándote más control sobre la apariencia de tu tienda. Es un ajuste fantástico para un sitio más limpio y fácil de usar.

Pero a medida que tu tienda crezca, te darás cuenta de que arreglar el botón de chat es solo el principio. La verdadera victoria está en mejorar toda la experiencia de chat. El código personalizado necesita supervisión, e incluso el equipo de soporte más dedicado no puede estar en todas partes a la vez.

Para las tiendas de Shopify que buscan ofrecer un soporte instantáneo, preciso y acorde a su marca que pueda escalar con su negocio, una solución impulsada por IA es el siguiente paso natural. Es la forma de convertir el servicio al cliente de una tarea diaria en un verdadero activo para el crecimiento.

¿Listo para ver cómo es una experiencia de soporte totalmente automatizada? Prueba eesel AI gratis y crea tu primer chatbot de IA para Shopify en solo unos minutos.