Saltar al contenido principal

Integración Web — Widget de chat

WhataFarma ofrece 4 formas diferentes de integrar el chatbot y el botón de WhatsApp en la página web de tu farmacia. Cada una se adapta a un caso de uso distinto. Solo tienes que copiar un script y pegarlo en tu web.

Panel de integración web en WhataFarma

¿Cómo funciona?​

Todas las integraciones se basan en un único archivo JavaScript alojado en los servidores de WhataFarma:

https://chat.whatafarma.com/widget.js

Este script se configura mediante atributos data-* directamente en la etiqueta <script>. No necesitas instalar nada ni modificar código de tu web — solo pegar el script antes del cierre </body> de tu página.

Requisito para las integraciones con chat

Las integraciones que incluyen el chatbot de IA (estándar, extendida y combinada) necesitan que subas el archivo whatafarma-proxy.php a tu servidor web, por ejemplo en la carpeta /chat2/. Este archivo actúa como proxy entre el widget y el backend de WhataFarma. El equipo de WhataFarma te lo proporciona y te ayuda con la instalación.

La integración Solo WhatsApp no necesita proxy ni backend.

Las 4 integraciones disponibles​

1. Integración estándar​

Widget estándar flotante

La integración más sencilla y la recomendada para la mayoría de webs. Muestra un botón flotante en la esquina inferior derecha de la página. Al pulsarlo, se abre la ventana del chatbot donde el cliente puede escribir su consulta directamente.

Ideal para: Páginas de inicio, páginas de producto, cualquier sección de tu web donde quieras ofrecer asistencia inmediata.

Script de ejemplo:

<script
  src="https://chat.whatafarma.com/widget.js?v=13"
  data-wf-widget="1"
  data-alias="tu-farmacia"
  data-api-base="https://www.tufarmacia.com"
  data-api-path="/chat2/whatafarma-proxy.php"
  data-channel="server"
  data-title="🧠 Tu Farmacia"
  data-theme="verde"
></script>

2. Integración extendida​

Widget extendido con preguntas sugeridas

Versión ampliada del chat que se abre mostrando una pantalla de preguntas sugeridas (FAQ) antes de que el cliente escriba. Las preguntas se pueden personalizar completamente y al pulsar una, se envía automáticamente al chatbot.

Ideal para: Crear una página dedicada tipo /asistente o /ayuda en tu web, donde el cliente pueda explorar las consultas más habituales.

Script de ejemplo:

<script
  src="https://chat.whatafarma.com/widget.js?v=13"
  data-wf-widget="1"
  data-alias="tu-farmacia"
  data-api-base="https://www.tufarmacia.com"
  data-api-path="/whatafarma-proxy.php"
  data-channel="server"
  data-title="🧠 Tu Farmacia"
  data-theme="verde"
  data-start-view="faq"
  data-faq-title="✨ Ideas rápidas para empezar"
  data-saludo="👋 ¡Hola! Puedo ayudarte con lo más habitual. Escribe tu pregunta abajo 👇"
  data-faq='[
    {"q":"🕒 ¿Cuál es el horario?","send":true},
    {"q":"📍 ¿Dónde estáis? Dame la dirección","send":true},
    {"q":"💊 ¿Tenéis disponible el producto ...?","send":false},
    {"q":"☎️ ¿Tenéis WhatsApp o teléfono?","send":true}
  ]'
></script>

Personalización de las preguntas sugeridas:

Las preguntas se definen en el atributo data-faq como un array JSON. Cada pregunta tiene dos campos:

CampoDescripción
qEl texto de la pregunta que verá el cliente. Puedes usar emojis.
sendSi es true, al pulsar se envía automáticamente al chatbot. Si es false, se copia al campo de texto para que el cliente la complete antes de enviar.
¿Cuándo usar send: false?

Usa send: false para preguntas abiertas donde el cliente necesita completar la frase. Por ejemplo: "💊 ¿Tenéis disponible el producto ...?" — el cliente pulsa y luego escribe el nombre del producto antes de enviar.

3. Solo WhatsApp (Click to Chat)​

Muestra un botón flotante de WhatsApp en la esquina inferior de la web. Al pulsarlo, abre WhatsApp (web o app) con un mensaje pre-rellenado dirigido al número de la farmacia. No necesita proxy ni backend — es la integración más sencilla de todas.

Ideal para: Farmacias que quieren ofrecer contacto directo por WhatsApp sin chatbot, o como complemento en páginas donde el chatbot no es necesario.

Script de ejemplo:

<script
  src="https://chat.whatafarma.com/widget.js?v=13"
  data-wf-widget="1"
  data-alias="tu-farmacia"
  data-whatsapp="+34612345678"
  data-title="WhatsApp · Tu Farmacia"
  data-theme="verde"
  data-saludo="Hola, vengo desde la web y necesito ayuda con"
></script>

El texto de data-saludo se usa como mensaje inicial pre-rellenado cuando el cliente abre WhatsApp. El cliente puede editarlo antes de enviarlo.

4. Chatbot + WhatsApp (combinada)​

Chatbot y WhatsApp juntos

La integración más completa. Muestra los dos iconos a la vez: el chatbot de IA y el botón de WhatsApp. El cliente elige cómo quiere comunicarse: puede usar el chatbot para consultas rápidas o abrir WhatsApp para hablar directamente con la farmacia.

Ideal para: Farmacias que quieren ofrecer todas las opciones de contacto en un solo lugar.

Script de ejemplo:

<script
  src="https://chat.whatafarma.com/widget.js?v=13"
  data-wf-widget="1"
  data-alias="tu-farmacia"
  data-api-base="https://www.tufarmacia.com"
  data-api-path="/chat2/whatafarma-proxy.php"
  data-channel="server"
  data-title="🧠 Tu Farmacia"
  data-theme="verde"
  data-start-view="faq"
  data-faq-title="✨ Ideas rápidas para empezar"
  data-saludo="👋 ¡Hola! Puedo ayudarte con lo más habitual. Escribe tu pregunta abajo 👇"
  data-faq='[
    {"q":"🕒 ¿Cuál es el horario?","send":true},
    {"q":"📍 ¿Dónde estáis?","send":true},
    {"q":"💊 ¿Tenéis disponible el producto ...?","send":false},
    {"q":"☎️ ¿Tenéis WhatsApp o teléfono?","send":true}
  ]'
  data-whatsapp="+34612345678"
></script>

Tabla comparativa​

IntegraciónChatbot IAWhatsAppNecesita proxyCaso de uso
Estándar✅—SíLa mayoría de webs
Extendida✅—SíPágina de ayuda o asistente
Solo WhatsApp—✅NoContacto directo por WhatsApp
Chatbot + WhatsApp✅✅SíMáximas opciones de contacto

Referencia de atributos​

Todos los atributos que puedes usar en el script:

AtributoDescripciónObligatorio
data-wf-widgetActiva el widget. Siempre "1".✅
data-aliasIdentificador único de tu farmacia en WhataFarma.✅
data-api-baseURL base del dominio donde está el proxy (ej: https://www.tufarmacia.com).Solo chat
data-api-pathRuta al archivo proxy (ej: /chat2/whatafarma-proxy.php).Solo chat
data-channelCanal de comunicación. Siempre "server".Solo chat
data-titleTítulo que aparece en la cabecera del widget.Opcional
data-themeTema de color del widget (verde, etc.).Opcional
data-start-viewVista inicial: "chat" (por defecto) o "faq" (preguntas sugeridas).Opcional
data-saludoMensaje de bienvenida del chatbot o texto pre-rellenado de WhatsApp.Opcional
data-faq-titleTítulo de la sección de preguntas sugeridas.Opcional
data-faqArray JSON con las preguntas sugeridas (campos q y send).Opcional
data-whatsappNúmero de WhatsApp con prefijo internacional (ej: +34612345678).Solo WhatsApp

¿Dónde pego el script?​

Pega el script justo antes del cierre </body> de tu página HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Mi Farmacia</title>
</head>
<body>

  <!-- Tu contenido normal -->

  <!-- 👇 Pega aquí el script de WhataFarma -->
  <script
    src="https://chat.whatafarma.com/widget.js?v=13"
    data-wf-widget="1"
    ...
  ></script>

</body>
</html>
Plataformas populares
  • WordPress / WooCommerce: Usa el plugin WhatafarmaWP que lo hace automáticamente, o pega el script en el bloque de "HTML personalizado" del footer.
  • PrestaShop: Usa el módulo de PrestaShop o pega el script en la plantilla del footer.
  • Magento: Usa el módulo de Magento o añade el script en el CMS de bloques estáticos.
  • Otras plataformas (Wix, Shopify, HTML): Busca la opción de "código personalizado" o "embed HTML" y pega el script ahí.

Obtener tu script personalizado​

No necesitas escribir el script a mano. Desde el panel de WhataFarma, en Integraciones > Integración Web, tienes los 4 scripts ya generados con los datos de tu farmacia. Solo tienes que pulsar "Copiar" y pegarlo en tu web.