Instala el widget de chat de ZapClaw en un sitio Webflow

En resumen: en Webflow pegas el fragmento de código del widget en el código del pie de los ajustes de código personalizado del sitio y publicas. El código personalizado en todo el sitio exige un plan de sitio de pago.

Lo que necesitas

• Un sitio Webflow en un plan de sitio de pago. El código personalizado en los ajustes del sitio no está disponible en un sitio gratuito.
• Acceso a los ajustes del sitio (el dueño del workspace o un administrador del sitio).
• El fragmento de código del widget, en la sección Agents del panel de ZapClaw.
• 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.

Agrega el fragmento de código en Webflow

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 Webflow, abre Site settings y ve a la pestaña Custom code.
3. Pega el fragmento de código en Footer code, el campo que se carga antes de la etiqueta de cierre </body>.
4. Haz clic en Save changes y luego en Publish en el sitio.

El código personalizado se ejecuta en el sitio publicado, no en el Designer. Para mostrar el chat en una sola página, usa el código personalizado de los ajustes de esa página.

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.
• Shopify, en el código del tema o en un app embed.
• Squarespace, en Code Injection.