Cómo instalar un chatbot en Webflow con el Footer code

Qué necesitas antes de empezar

Necesitas un plan de pago de Webflow y permiso para cambiar los ajustes del sitio y publicarlo. El plan gratuito (Starter) no permite añadir código personalizado.

Webflow organiza los planes por sitio y por espacio de trabajo, y la combinación exacta que desbloquea el código personalizado ha ido cambiando. Si al entrar en la pestaña de código ves un aviso para mejorar el plan, ese es el motivo.

La interfaz de Webflow está en inglés, así que en esta guía usamos los nombres tal como los verás en pantalla.

El código que vas a pegar

En la pantalla de instalación del panel de Ada tienes el código ya completo con el identificador de tu asistente. Cópialo desde ahí. Este es el formato, con TU_CODIGO en el lugar de tu identificador:

<script src="https://ada-assistant.com/wozzo-chat.js" data-public-url="TU_CODIGO" defer></script>

Es una sola línea y cabe de sobra en el límite de caracteres que Webflow pone a cada campo de código.

Paso a paso en Webflow

El código global se pone una vez en los ajustes del sitio y Webflow lo añade a todas las páginas al publicar. No lo pongas en un bloque Embed dentro de una página: solo saldría en esa.

1. Abre los ajustes del sitio

   Desde tu panel de Webflow, entra en Site settings del sitio donde quieres el chat.

2. Ve a la pestaña de código

   Abre la pestaña Custom code.

3. Pega el código en el pie

   Baja hasta el campo Footer code, el que se inserta antes de </body>, y pega el código de Ada.

4. Guarda los cambios

   Pulsa Save changes.

5. Publica el sitio

   Pulsa Publish y elige los dominios en los que publicar: tu dominio propio y, si quieres probar antes, el subdominio webflow.io.

Cómo comprobarlo

Abre tu dominio publicado en una ventana de incógnito. A los pocos segundos tiene que aparecer la burbuja del chat abajo, en una esquina.

• Prueba en dos páginas distintas, por ejemplo la portada y una página de servicios o de un artículo del CMS.
• Hazle una pregunta concreta de tu negocio y mira que responde con tu información.
• Si quieres ir a lo seguro, clic derecho > Ver código fuente y busca «wozzo-chat.js».
• En el panel de Ada verás cuándo el asistente se ha cargado en tu dominio.

Errores habituales en Webflow

Si diseñas webs para clientes, puedes dejar el código puesto antes de entregar el proyecto: la persona del negocio solo tiene que entrar en el panel de Ada para revisar las respuestas y las conversaciones.

Cómo aprovecha Ada el contenido de tu web en Webflow

Ada lee tu web publicada, incluidas las páginas del CMS de Webflow (blog, casos, servicios), siempre que estén enlazadas desde el sitio. Cuanto más clara sea tu web, mejores serán las respuestas.

• Si tienes una página de preguntas frecuentes, el asistente la usará como fuente principal.
• Las colecciones con fichas (servicios, propiedades, cursos) funcionan muy bien porque cada ficha tiene su propia página.
• Lo que no está en la web, como condiciones que solo das por email, puedes añadirlo como texto en el panel.

Tienes el detalle en chatbot entrenado con tu web.

Cómo hacer que el chat encaje con tu diseño

El aspecto del chat se ajusta desde el panel de Ada, no desde Webflow: eliges el color principal, el color del texto y el fondo para que combine con tu marca. Así no tienes que tocar estilos ni volver a publicar.

Quien usa Webflow suele cuidar mucho el diseño, así que merece la pena dedicar cinco minutos a estos ajustes antes de enseñarle la web al cliente:

Si llevas varias webs de clientes, cada una tiene su propio asistente con su código, sus fuentes y su estilo. El código que pegas en Webflow es lo único que cambia entre un proyecto y otro.

Y si tus clientes escriben por WhatsApp

Con el plan Premium, el mismo asistente responde también en tu WhatsApp con la API oficial de Meta, sin perder la app WhatsApp Business del móvil. Lo explicamos en chatbot para WhatsApp.

Preguntas frecuentes