Botones, Imágenes, Carruseles y Más

¿Qué son los UI Skills?

Los UI Skills son componentes visuales e interactivos que el agente puede enviar en WhatsApp:

• Botones clicables
• Imágenes
• Listas interactivas
• Mapas con ubicaciones
• Carruseles de tarjetas
• Formularios (WhatsApp Flow)

Diferencia:

• Skills: Cómo debe actuar (respuestas de texto)
• UI Skills: Cómo se ve (componentes visuales)

Los 8 Tipos de UI Skills

1. CTA URL Button (Botón con Enlace)

Un botón clicable que abre un enlace en el navegador.

Cuándo usarlo:

• Enlace a documentos
• Reservar cita
• Ver más detalles en web
• Descargar PDF

Configuración:

Title: "Ver Planes de Precios"
URL: https://woztell.com/pricing
Button Text: "Ir a Precios"

2. Image (Imagen)

Una imagen (PNG, JPG) que el agente envía.

Cuándo usarlo:

• Mostrar producto
• Diagrama de proceso
• Screenshot de características
• Infografía

Configuración:

Title: "Nuestros Planes"
Image URL: https://cdn.woztell.com/plans.png

3. Interactive List (Lista Interactiva)

Una lista con opciones que el cliente puede tocar.

Cuándo usarlo:

• Menú de opciones
• Seleccionar categoría
• Elegir entre varios planes
• Filtrar resultados

Configuración:

Title: "¿Qué te interesa?"
Items:
  1. "Pricing" → respuesta: "Véa nuestros planes"
  2. "Features" → respuesta: "Mostrar features"
  3. "Demo" → respuesta: "Agendar demo"
Button Text: "Selecciona una opción"

4. Location (Ubicación)

Un mapa interactivo con dirección.

Cuándo usarlo:

• Mostrar ubicación de oficina
• Sucursales cercanas
• Punto de retiro
• Dirección de evento

Configuración:

Title: "Nuestra Oficina"
Address: "Calle Principal 123, CDMX"
Latitude: 25.6866
Longitude: -100.3161

5. Location Request (Solicitar Ubicación)

Pide al cliente que comparta su ubicación actual.

Cuándo usarlo:

• Encontrar sucursal más cercana
• Calcular envío
• Servicios a domicilio
• Logística

Configuración:

Message: "¿Cuál es tu ubicación para calcular envío?"
Button Text: "Compartir Ubicación"

6. Carousel - Quick Reply (Carrusel de Botones)

Varias opciones horizontales que cliente puede tocar.

Cuándo usarlo:

• Múltiples opciones rápidas
• "Sí" / "No" / "Más tarde"
• Seleccionar horario
• Rating (1-5 estrellas)

Configuración:

Message: "¿Estás satisfecho con nuestro servicio?"
Options:
  - "Sí" → respuesta: "¡Gracias!"
  - "No" → respuesta: "Lamento oír eso"
  - "Otro" → respuesta: "Cuéntame"

7. Carousel - URL (Carrusel de Tarjetas)

Tarjetas con imagen, título y enlace.

Cuándo usarlo:

• Mostrar múltiples productos
• Blog posts recomendados
• Casos de éxito
• Galerías

Configuración:

Tarjeta 1:
  - Image: https://cdn.woztell.com/plan-starter.jpg
  - Title: "Plan Starter"
  - Description: "Para pequeños negocios"
  - URL Button: "Ver Detalles" → https://woztell.com/starter

Tarjeta 2:
  - Image: https://cdn.woztell.com/plan-pro.jpg
  - Title: "Plan Pro"
  - Description: "Para empresas"
  - URL Button: "Ver Detalles" → https://woztell.com/pro

8. WhatsApp Flow (Formulario)

Un formulario interactivo dentro de WhatsApp.

Cuándo usarlo:

• Recopilar datos de cliente (nombre, email, teléfono)
• Encuestas de satisfacción
• Preguntas personalizadas
• Información de contacto

Configuración:

Flow Name: "Información de Contacto"
Fields:
  1. Full Name (required)
  2. Email (required)
  3. Phone (required)
  4. Message (optional)
  5. Callback Time (select: morning/afternoon/evening)

Cómo Crear un UI Skill

Paso 1: Ve a Advanced

En WOZTELL:

Channels
→ Tu canal
→ Meta AI Agent
→ Scroll down
→ "Advanced" (sección expandible)
→ "UI Skills"

Paso 2: Haz Clic en "Add UI Skill"

En la sección "UI Skills", busca el botón azul "Add UI skill".

Paso 3: Selecciona el Tipo

Elige uno de los 8 tipos de componentes.

Paso 4: Completa los Campos

Según el tipo, agrega:

• Título
• Descripción / Mensaje
• URLs (si aplica)
• Imágenes (si aplica)
• Opciones / Items (si aplica)

Paso 5: Prueba y Guarda

Haz clic en "Save". El UI Skill aparecerá en la lista.

Limitación Importante: El Sandbox

¿Por qué? El sandbox de Meta no soporta componentes avanzados.

Solución: Prueba en WhatsApp real:

1. Activa el agente
2. Envía un mensaje que dispare el UI Skill
3. Verás el componente renderizado en tu teléfono

Casos de Uso por Componente

E-commerce (Retail)

SaaS (Software)

Servicios (Consultoría, Reparación)

Mejores Prácticas

1. No Overload (No Sobrecargues)

MAL: Un UI Skill cada mensaje

BIEN: UI Skills solo cuando realmente ayudan

2. Usa Buttons para CTAs Claras

MAL: "¿Quieres reservar? Escribe sí"

BIEN: Botón "Reservar Ahora" que lleva a calendario

3. Imágenes Deben Ser Claras

MAL: Imagen muy pequeña o borrosa

BIEN: Imagen legible, 400x300px mínimo

4. URLs Deben Ser Válidas y HTTPS

MAL: http://woztell.com (inseguro)

BIEN: https://woztell.com (seguro)

5. WhatsApp Flow Solo para Datos Importantes

MAL: Pedir nombre y apellido en un Flow

BIEN: Pedir nombre y email + teléfono

Troubleshooting

Resumen: Cuándo Usar Cada Uno

Próximos Pasos

1. Crea 1-2 UI Skills simples (Button + Quick Reply)
2. Prueba en WhatsApp real (no en sandbox)
3. Verifica que el agente los use cuando debe
4. Itera según feedback de clientes