Tu Primer FlowApp

En este tutorial, crearás un FlowApp de formulario de contacto simple desde cero. Al final, tendrás un formulario funcional que recolecta consultas y crea contacts automáticamente.

Tiempo: 5 minutos
Dificultad: Principiante
Qué aprenderás: Crear FlowApps, agregar campos, publicar y ver respuestas

---

Qué Construirás

Un formulario de contacto que recolecta:

• Nombre
• Email
• Mensaje
• Cómo te conocieron

Cuando alguien envía, obtendrás:

• Un registro de respuesta con todas sus respuestas
• Un contacto creado automáticamente en tu Centro de Contactos
• Opcional: Notificación por email

---

Paso 1: Crea un Nuevo FlowApp

1. Inicia sesión en app.iozen.ai
2. Desde tu panel de espacio de trabajo, haz clic en Nuevo FlowApp
3. Nómbralo “Formulario de Contacto”
4. Haz clic en Crear

Llegarás al editor de IntakeBot, un lienzo en blanco listo para tus preguntas.

---

Paso 2: Agrega tus Campos

Agreguemos las preguntas que queremos hacer.

Agrega un Campo de Nombre

1. Haz clic en Agregar Campo (o el botón +)
2. Selecciona Texto como tipo de campo
3. Configura:
   • Etiqueta: “¿Cuál es tu nombre?”
   • Nombre del campo: nombre (usado internamente)
   • Requerido: Sí
4. Haz clic en Guardar

Agrega un Campo de Email

1. Haz clic en Agregar Campo
2. Selecciona Email como tipo de campo
3. Configura:
   • Etiqueta: “¿Cuál es tu email?”
   • Nombre del campo: email
   • Requerido: Sí
4. Haz clic en Guardar

El tipo de campo Email valida automáticamente que los envíos incluyan una dirección de email válida.

Agrega un Campo de Mensaje

1. Haz clic en Agregar Campo
2. Selecciona Área de texto (para texto largo)
3. Configura:
   • Etiqueta: “¿Cómo podemos ayudarte?”
   • Nombre del campo: mensaje
   • Requerido: Sí
4. Haz clic en Guardar

Agrega un Campo de Fuente

1. Haz clic en Agregar Campo
2. Selecciona Selección (desplegable)
3. Configura:
   • Etiqueta: “¿Cómo nos conociste?”
   • Nombre del campo: fuente
   • Opciones: Agrega estas opciones:
     • Búsqueda en Google
     • Redes sociales
     • Amigo/Referido
     • Otro
   • Requerido: No
4. Haz clic en Guardar

---

Paso 3: Vista Previa de tu Formulario

Antes de publicar, ve cómo luce tu formulario:

1. Haz clic en Vista previa en la esquina superior derecha
2. Se abre una ventana de vista previa mostrando tu IntakeBot
3. Intenta llenarlo para probar la experiencia
4. Cierra la vista previa cuando termines

Tip: La interfaz conversacional muestra una pregunta a la vez. Esto aumenta las tasas de completado comparado con formularios tradicionales.

---

Paso 4: Personaliza la Experiencia (Opcional)

Mensaje de Bienvenida

1. Haz clic en Configuración → Mensajes
2. Edita el Mensaje de bienvenida: “¡Hola! Nos encantaría saber de ti. Empecemos con algunas preguntas rápidas.”
3. Edita el Mensaje de agradecimiento: “¡Gracias por escribirnos! Te responderemos en las próximas 24 horas.”

Marca

1. Haz clic en Configuración → Diseño
2. Sube tu logo
3. Elige los colores de tu marca
4. Previsualiza los cambios

---

Paso 5: Publica tu FlowApp

¡Hora de lanzar!

1. Haz clic en Publicar en la esquina superior derecha
2. Tu FlowApp ahora está activo
3. Copia el Enlace para compartir que aparece

Puedes compartir este enlace vía:

• Email
• Redes sociales
• Mensaje de texto
• Donde quieras recolectar respuestas

---

Paso 6: Pruébalo tú Mismo

1. Abre el enlace para compartir en una nueva pestaña del navegador (o ventana incógnita)
2. Llena el formulario como si fueras un visitante
3. Envía tu respuesta

---

Paso 7: Ve tu Respuesta

Regresa al panel de tu FlowApp:

1. Haz clic en la pestaña Registros
2. Verás tu respuesta de prueba
3. Haz clic para ver los detalles completos

Revisa el Contacto

1. Ve a Contactos en la barra lateral izquierda
2. Verás que se creó un nuevo contacto automáticamente
3. Haz clic para ver la respuesta vinculada

Esta es la magia: Cada respuesta crea datos estructurados Y construye tu base de datos de contacts, sin trabajo extra requerido.

---

Paso 8: Embebe en tu Sitio Web (Opcional)

¿Quieres el formulario en tu sitio web en lugar de un enlace separado?

1. Ve a Configuración → Embeber
2. Elige tu estilo de embed:
   • En línea: El formulario aparece en una sección de la página
   • Popup: El formulario se abre en un modal
   • Widget: Botón flotante en la esquina
3. Copia el código de embed
4. Pégalo en el HTML de tu sitio web

---

Lo que Has Logrado

En solo 5 minutos, has construido un FlowApp que:

✅ Recolecta información de contacto conversacionalmente
✅ Valida direcciones de email automáticamente
✅ Crea contacts en tu Centro de Contactos
✅ Almacena respuestas como records estructurados
✅ Puede compartirse vía enlace o embeberse en tu sitio

---

Siguientes Pasos

Ahora que tienes los fundamentos, prueba esto:

• Agrega Inteligencia IA: Deja que la IA haga preguntas de seguimiento
• Configura un Tablero de Proceso: Da seguimiento a consultas por etapas (Nuevo → Contactado → Cerrado)
• Agrega Reglas de Enrutamiento: Asigna automáticamente solicitudes urgentes a miembros específicos del equipo
• Construye un Formulario de Solicitud de Cotización: Ejemplo más complejo con lógica condicional

---

Tips de Experto

Tip 1: El Orden de los Campos Importa

Pon las preguntas fáciles primero (nombre, email) para generar impulso. Guarda las preguntas más largas para después.

Tip 2: Mantenlo Corto

Cada campo que agregas reduce las tasas de completado. Solo pregunta lo que realmente necesitas.

Tip 3: Usa Lógica Condicional

Muestra/oculta campos según respuestas anteriores. Si alguien selecciona “Otro” en cómo te conocieron, muestra un seguimiento pidiéndoles que especifiquen.

Tip 4: Prueba en Móvil

La mayoría de las personas completarán tu formulario en su teléfono. Previsualiza en móvil para asegurarte de que se vea bien.