Cómo abrir la ventana de chat con un enlace

Puedes abrir la ventana de chat usando un enlace profundo sin modificar el código de tu tema. En el Editor de Temas de Shopify, simplemente añade 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 vivo: demo.shoplyai.ai

Pasos:

Edita el botón, texto o icono deseado en el editor de tu tema.
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 chat con preguntas específicas del producto

Añade un botón “Question About This Product?” a una página de producto para ayudar a los compradores a hacer preguntas sobre ese artículo. Configura su enlace como #shoply_product_questions. Al hacer clic, se abre el chat con el nombre del producto, un breve destaque del producto y preguntas generadas automáticamente relevantes para ese producto.

En el Editor de Temas de Shopify, abre la plantilla de producto y añade o edita un botón o texto con enlace que admita una URL.
Establece la etiqueta como “Question About This Product?” y el enlace como #shoply_product_questions.
Guarda, visita una página de producto y haz clic en el enlace para revisar las preguntas del producto.

Si tu tema no ofrece una configuración adecuada de botón o enlace, añade este enlace en el HTML de la plantilla de producto:

html


<a href="#shoply_product_questions">Question About This Product?</a>

Usa este enlace en una página de producto para que Shoply tenga el contexto del producto. También puedes compartir una URL completa del producto que termine en #shoply_product_questions.

Prueba el chat de preguntas de producto para Bent 85 Skis . Las sugerencias incluyen preguntas sobre el peso de los esquís, el núcleo, el perfil rocker y el arte del topsheet. Los compradores pueden seleccionar una sugerencia o escribir su propia pregunta.

Para ver ejemplos de dónde usar estos enlaces, consulta preguntas de producto impulsadas por IA en nuestra guía para reemplazar tu página de FAQ.

Estas preguntas de producto se generan automáticamente. Las preguntas iniciales que configures en Customize AI Chat se aplican en cambio a la apertura estándar del chat.

Abrir chat con una pregunta precargada

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

Esto es perfecto para crear enlaces directos a temas comunes como la política de envío, 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 conserva cualquier historial de chat existente.

Formato:

plaintext


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

Ejemplos:

Política de envío: 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 combinar esto con cualquier página de tu tienda. Por ejemplo, para abrir el chatbot con una pregunta en una página de producto específica:

plaintext


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

Heredado: parámetro de consulta en la URL

El parámetro de consulta ?shoply_question= sigue siendo compatible por retrocompatibilidad. 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 la URL de tu pregunta cuando uses caracteres especiales o espacios. La mayoría de los navegadores gestionarán esto automáticamente, pero si estás añadiendo enlaces de forma programática, usa una codificación de URL adecuada (por ejemplo, los espacios se convierten en %20).

Cuando un cliente hace 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, proporcionando una respuesta instantánea.

Casos de uso:

Añade un enlace “Ask about shipping” en tu pie de página
Crea códigos QR que abran el chatbot con preguntas específicas
Incluye enlaces útiles en tus campañas de correo electrónico o confirmaciones de pedido
Añade enlaces de ayuda contextual en páginas de producto (por ejemplo, “Ask about sizing”)

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

En la sección anterior, hablamos sobre cómo usar el hashtag (enlace profundo) para activar la ventana de chat añadiéndolo a cualquier botón, icono o texto directamente 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, creando un nuevo icono en el encabezado), tendrás que editar el código de la plantilla.

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

Ejemplos de código

1. Icono de chat

El siguiente código 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 siguiente código 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 de función openShoplyAIChatBot() en el atributo onclick de cualquier botón/icono, para que los clientes vean la ventana de chat cuando hagan clic en el botón/icono.

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 al encabezado de tu tienda.

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

No dudes en reservar una reunión con nosotros , y con gusto te ayudaremos a configurar el icono perfecto en el lugar ideal para que combine 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, puede que quieras ocultar el icono flotante. Además, los propietarios de tiendas a menudo mencionan que tener demasiados iconos flotantes en sus sitios web puede resultar abrumador. ¡Entendemos tus preocupaciones! Por eso hemos introducido una función para ocultar el icono de chat.

En la sección “Customize AI Chat” de la consola de administración de la app, 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 mientras sigues permitiendo que la ventana de chat se abra mediante un enlace profundo.