Cómo usar un enlace profundo para abrir la ventana de chat (sin editar el código del tema)

Puedes abrir la ventana de chat mediante un enlace profundo sin modificar el código de tu tema. En el editor de temas de Shopify, solo tienes que añadir el hashtag #shoply-ai-chatbot a cualquier botón, icono o elemento de texto. Cuando los clientes hagan clic en estos elementos, la ventana de chat se abrirá automáticamente.

Ejemplo en directo: demo.shoplyai.ai

Pasos:

Edita el botón, texto o icono que quieras en el editor de temas.
Establece el enlace o la URL como #shoply-ai-chatbot.

Ejemplos:

Usa un botón para abrir la ventana de chat:

Usa un texto con enlace para abrir la ventana de chat:

Abrir el chat con una pregunta rellenada previamente

¿Quieres abrir la ventana de chat y enviar automáticamente una pregunta? Puedes hacerlo mediante un fragmento hash (recomendado) o un parámetro de consulta de URL.

Es perfecto para crear enlaces directos a temas habituales, como la política de envíos, la política de devoluciones o consultas sobre productos.

Recomendado: fragmento hash (sin recargar la página)

Usa el fragmento hash #shoply_question=. Como el hash se procesa completamente en el navegador, al hacer clic en este enlace no se recargará la página y se conservará cualquier historial de chat existente.

Formato:

plaintext


https://your-store.com#shoply_question=your question here

Ejemplos:

Política de envíos: https://your-store.com#shoply_question=What is your shipping policy?
Devoluciones: https://your-store.com#shoply_question=How do I return an item?
Estado del pedido: https://your-store.com#shoply_question=Where is my order?
Descubrimiento de productos: https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

Puedes combinarlo con cualquier página de tu tienda. Por ejemplo, para abrir el chatbot con una pregunta en una página de producto concreta:

plaintext


https://your-store.com/products/blue-jacket#shoply_question=What sizes are available?

Anterior: parámetro de consulta de URL

El parámetro de consulta ?shoply_question= sigue siendo compatible para mantener la compatibilidad con versiones anteriores. Ten en cuenta que añadir un parámetro de consulta a una URL en la que el cliente ya se encuentra provocará una recarga de la página.

Formato:

plaintext


https://your-store.com?shoply_question=your question here

Nota: recuerda codificar tu pregunta en la URL cuando utilices caracteres especiales o espacios. La mayoría de los navegadores lo hará automáticamente, pero si añades enlaces mediante programación, usa una codificación URL adecuada (por ejemplo, los espacios se convierten en %20).

Cuando un cliente haga clic en cualquiera de los dos tipos de enlace, la ventana de chat se abrirá automáticamente y la pregunta se enviará al chatbot de IA para ofrecer una respuesta inmediata.

Casos de uso:

Añadir un enlace «Preguntar sobre los envíos» en el pie de página
Crear códigos QR que abran el chatbot con preguntas concretas
Incluir enlaces útiles en tus campañas de correo electrónico o confirmaciones de pedido
Añadir enlaces de ayuda contextuales en las páginas de producto (por ejemplo, «Preguntar sobre las tallas»)

Cómo usar un enlace profundo para abrir la ventana de chat (es necesario editar el código de la plantilla del tema)

En la sección anterior hemos explicado cómo usar el hashtag (enlace profundo) para activar la ventana de chat añadiéndolo directamente a cualquier botón, icono o texto desde el editor de temas, sin editar el código de tu tema.

Sin embargo, si quieres tener total flexibilidad para añadir el enlace profundo en cualquier lugar de tu tienda (por ejemplo, para crear un icono nuevo en la cabecera), tendrás que editar el código de la plantilla.

A continuación encontrarás ejemplos sencillos de código HTML que puedes usar para crear iconos nuevos en la plantilla de tu tema:

Ejemplos de código

1. Icono de chat

El código siguiente añade un icono de chat:

plaintext


<a href="#shoply-ai-chatbot"
   style="display:inline-flex;align-items:center;margin-right:13px">
    <svg viewBox="64 64 896 896" style="height:28px;width:28px;fill:orange">
        <path
            d="M868.2 377.4c-18.9-45.1-46.3-85.6-81.2-120.6a377.26 377.26 0 00-120.5-81.2A375.65 375.65 0 00519 145.8c-41.9 0-82.9 6.7-121.9 20C306 123.3 200.8 120 170.6 120c-2.2 0-7.4 0-9.4.2-11.9.4-22.8 6.5-29.2 16.4-6.5 9.9-7.7 22.4-3.4 33.5l64.3 161.6a378.59 378.59 0 00-52.8 193.2c0 51.4 10 101 29.8 147.6 18.9 45 46.2 85.6 81.2 120.5 34.7 34.8 75.4 62.1 120.5 81.2C418.3 894 467.9 904 519 904c51.3 0 100.9-10.1 147.7-29.8 44.9-18.9 85.5-46.3 120.4-81.2 34.7-34.8 62.1-75.4 81.2-120.6a376.5 376.5 0 0029.8-147.6c-.2-51.2-10.1-100.8-29.9-147.4zm-66.4 266.5a307.08 307.08 0 01-65.9 98c-28.4 28.5-61.3 50.7-97.7 65.9h-.1c-38 16-78.3 24.2-119.9 24.2a306.51 306.51 0 01-217.5-90.2c-28.4-28.5-50.6-61.4-65.8-97.8v-.1c-16-37.8-24.1-78.2-24.1-119.9 0-55.4 14.8-109.7 42.8-157l13.2-22.1-9.5-23.9L206 192c14.9.6 35.9 2.1 59.7 5.6 43.8 6.5 82.5 17.5 114.9 32.6l19 8.9 19.9-6.8c31.5-10.8 64.8-16.2 98.9-16.2a306.51 306.51 0 01217.5 90.2c28.4 28.5 50.6 61.4 65.8 97.8l.1.1.1.1c16 37.6 24.1 78 24.2 119.8-.1 41.7-8.3 82-24.3 119.8zM681.1 364.2c-20.4 0-37.1 16.7-37.1 37.1v55.1c0 20.4 16.6 37.1 37.1 37.1s37.1-16.7 37.1-37.1v-55.1c0-20.5-16.7-37.1-37.1-37.1zm-175.2 0c-20.5 0-37.1 16.7-37.1 37.1v55.1c0 20.4 16.7 37.1 37.1 37.1 20.5 0 37.1-16.7 37.1-37.1v-55.1c0-20.5-16.7-37.1-37.1-37.1z" />
    </svg>
</a>

2. Icono de estrella de IA

El código siguiente añade una estrella de IA:

plaintext


<a href="#shoply-ai-chatbot" style="display:inline-flex;align-items:center">
    <img style="height:28px;width:28px" src="https://[CFN_PRODUCTION_ASSET]/AIStar.svg" alt="Shoply Chatbot"  />
</a>

3. Método de llamada a función

Además de usar hashtags, también puedes colocar la llamada a la función openShoplyAIChatBot() en el atributo onclick de cualquier botón o icono para que la ventana de chat aparezca cuando los clientes hagan clic en él.

plaintext


<button onclick="openShoplyAIChatBot()" style="border-radius:20px;margin:10px;cursor:pointer;background:black">
    <span style="font-size:13px;color:white;margin:5px">Click to Chat</span>
</button>

¿Necesitas ayuda?

Puedes usar cualquiera de los ejemplos anteriores e insertar el código junto al icono de búsqueda en el archivo sections/header.liquid para añadir el enlace profundo del chat a la cabecera de tu tienda.

Sin embargo, si no te sientes del todo cómodo editando el código de la plantilla de tu tema, ¡no te preocupes!

No dudes en reservar una reunión con nosotros y estaremos encantados de ayudarte a configurar el icono perfecto en el lugar ideal para que encaje con el estilo único de tu tienda.

¿Cómo ocultar el icono flotante?

Una vez que configures el enlace profundo para abrir la ventana de chat, quizá quieras ocultar el icono flotante. Además, los propietarios de tiendas suelen comentar que tener demasiados iconos flotantes en sus sitios web puede resultar abrumador. Entendemos tus preocupaciones. Por eso hemos incorporado una función para ocultar el icono de chat.

En la sección «Customize AI Chat» de la consola de administración de la aplicación, dentro de la configuración Select a Chat Icon, ahora puedes seleccionar la opción:

«Hide floating icon and use deep link to open chat».

Esto te permite ocultar el icono flotante y, al mismo tiempo, mantener la posibilidad de abrir la ventana de chat mediante un enlace profundo.