Instala el widget de chat de ZapClaw en una tienda Shopify

En resumen: en Shopify agregas el fragmento de código del widget al código del tema, o a un app embed que acepte código personalizado. El chat aparece en las páginas de la tienda.

Lo que necesitas

• Una cuenta de Shopify que pueda editar el código del tema (el dueño, o personal con permiso para editar temas).
• El fragmento de código del widget, en la sección Agents del panel de ZapClaw.
• Shopify restringe los scripts en sus páginas de checkout, así que espera el chat solo en las páginas de la tienda.
• Copia el snippet exacto de tu widget en el área Agents del panel. El id de arriba es un ejemplo: el tuyo es diferente.
• Sitios permitidos. En el panel, agrega la dirección de tu sitio a los sitios permitidos del widget, exactamente como la ven los visitantes. https://www.example.com y https://example.com son dos direcciones distintas. Un sitio que no está en la lista no muestra la burbuja.

<script async src="https://chat.zapclaw.app/loader.js" data-widget-id="YOUR_WIDGET_ID"></script>

Las plataformas cambian el nombre de sus menús de vez en cuando. Si una etiqueta de abajo es distinta en tu pantalla, busca en los ajustes de la plataforma el nombre entre comillas.

Opción 1: el código del tema

1. En el panel de ZapClaw, abre tu widget en Agents y copia el fragmento de código con el botón de copiar.
2. En el admin de Shopify, abre Tienda online (Online Store) y luego Temas. En tu tema activo elige Editar código.
3. Abre layout/theme.liquid y pega el fragmento de código justo encima de la etiqueta de cierre </body>.
4. Haz clic en Guardar y abre tu tienda en una ventana privada.

Opción 2: un app embed

ZapClaw no tiene una app propia en Shopify. Si ya usas una app que agrega código personalizado a la tienda, actívala en Tienda online, Temas, Personalizar, App embeds, y pega el fragmento de código en el campo de código de esa app.

Un tema al que cambies después no lleva el fragmento de código: agrégalo de nuevo en el tema nuevo.

Comprueba que funciona

Abre tu sitio publicado en una ventana privada y busca la burbuja en la esquina que elegiste. ¿Sin burbuja? Revisa que el agente esté publicado, que el widget esté activo, que tu dirección esté en los sitios permitidos y que ningún bloqueador de contenido ni Content Security Policy lo impida.

Si tu sitio tiene una Content Security Policy

La mayoría de los sitios no necesita nada aquí. Un sitio con una Content Security Policy estricta agrega dos entradas a su política, y nada más:

script-src https://chat.zapclaw.app
frame-src https://chat.zapclaw.app

Solo si tu política también restringe connect-src (o no tiene connect-src pero restringe default-src), agrega también connect-src https://chat.zapclaw.app. El loader lee allí el aspecto de tu burbuja antes de dibujarla.

No se necesita ninguna entrada de style-src: el loader aplica los estilos con la API de estilos del navegador, nunca con una etiqueta de estilo en línea.

Modo anónimo

En esta plataforma el widget funciona en modo anónimo. Responde con las bases de conocimiento que marcaste como públicas, recoge un contacto y pasa el caso a una persona. Qué significa el modo anónimo.

Una frase para tu política de privacidad

El widget trata lo que escriben tus visitantes, en tu nombre, así que tu política de privacidad debe decirlo. Puedes adaptar esta frase:

El asistente de chat de este sitio web lo proporciona ZapClaw, que trata los mensajes que escriben los visitantes en nuestro nombre, como nuestro encargado del tratamiento. El chat no guarda cookies en este sitio web, y las conversaciones se conservan durante 90 días.

Otras guías de instalación

• Resumen general, con las líneas de la Content Security Policy y la frase de privacidad.
• WordPress, para un sitio que alojas tú.
• WordPress.com, en los planes que permiten plugins.
• Google Tag Manager, con una etiqueta de HTML personalizado.
• Wix, con Custom Code en un plan de pago.
• Webflow, en el código personalizado de los ajustes del sitio.
• Squarespace, en Code Injection.