Brief: formulario de solicitud de demo + página de replay

Sitio en Framer. No hay Vercel ni backend propio. Todo vive en Framer y Attio.

Parte 1 — Componente FormularioDemo

Componente de código en Framer, reutilizable en varias páginas.

Campos visibles

No pedir teléfono.

Opciones del select País

Exactamente estas 18, en este orden, sin opción preseleccionada, con placeholder "Selecciona tu país":

Chile · Colombia · Argentina · Bolivia · Ecuador · Brazil · México · Perú · Panamá · El Salvador · Honduras · Guatemala · Costa Rica · Puerto Rico · Estados Unidos · España · Venezuela · Otro

Brazil con z. México y Perú con tilde. Los valores deben coincidir carácter por carácter con Attio o el dato se pierde en silencio.

Consentimiento

Checkbox obligatorio, desmarcado por defecto:

Acepto que Xerpa me contacte por correo sobre esta solicitud y guarde mis datos según su política de privacidad.

Botón

Quiero una demo

Textos del bloque

Encabezado: ¿Quieres ver esto con la data de tu banco?

Bajada: Agendamos 45 minutos con tus equipos de datos, producto y canales. Trabajamos sobre casos reales de tu institución.

Parte 2 — Property controls

El componente expone dos propiedades editables desde el panel derecho de Framer, para poder reutilizarlo en varias páginas sin duplicar código.

import { addPropertyControls, ControlType } from "framer"

FormularioDemo.defaultProps = {
  origenDetalle: "Sin definir",
  destino: "https://getxerpa.com/thank-you-page",
}

addPropertyControls(FormularioDemo, {
  origenDetalle: {
    type: ControlType.String,
    title: "Origen",
    defaultValue: "Sin definir",
    placeholder: "Replay webinar TE Q3 2026",
    description: "De qué página viene el lead. Se ve en Attio.",
  },
  destino: {
    type: ControlType.Link,
    title: "Destino",
    description: "A dónde redirige después de enviar",
  },
})

import { addPropertyControls, ControlType } from "framer"

FormularioDemo.defaultProps = {
  origenDetalle: "Sin definir",
  destino: "https://getxerpa.com/thank-you-page",
}

addPropertyControls(FormularioDemo, {
  origenDetalle: {
    type: ControlType.String,
    title: "Origen",
    defaultValue: "Sin definir",
    placeholder: "Replay webinar TE Q3 2026",
    description: "De qué página viene el lead. Se ve en Attio.",
  },
  destino: {
    type: ControlType.Link,
    title: "Destino",
    description: "A dónde redirige después de enviar",
  },
})

import { addPropertyControls, ControlType } from "framer"

FormularioDemo.defaultProps = {
  origenDetalle: "Sin definir",
  destino: "https://getxerpa.com/thank-you-page",
}

addPropertyControls(FormularioDemo, {
  origenDetalle: {
    type: ControlType.String,
    title: "Origen",
    defaultValue: "Sin definir",
    placeholder: "Replay webinar TE Q3 2026",
    description: "De qué página viene el lead. Se ve en Attio.",
  },
  destino: {
    type: ControlType.Link,
    title: "Destino",
    description: "A dónde redirige después de enviar",
  },
})

El default Sin definir es intencional: si alguien inserta el componente y olvida llenar el campo, en Attio aparece esa etiqueta y se detecta enseguida.

Parte 3 — Envío

Al enviar, el componente hace un POST directo a esta URL:

https://hooks.attio.com/w/b97d1fc5-38a8-4afd-86e4-3d0d731e0a9d/84af5064-0491-44ab-a24f-8eea37d94e74

https://hooks.attio.com/w/b97d1fc5-38a8-4afd-86e4-3d0d731e0a9d/84af5064-0491-44ab-a24f-8eea37d94e74

https://hooks.attio.com/w/b97d1fc5-38a8-4afd-86e4-3d0d731e0a9d/84af5064-0491-44ab-a24f-8eea37d94e74

Con Content-Type: application/json.

Si CORS bloquea el envío desde el navegador, avisar antes de construir una alternativa. No montar Vercel ni ningún backend sin consultar.

Payload

{
  "nombre": "Eduardo",
  "apellido": "Arenas",
  "email": "eduardo.arenas@santander.cl",
  "empresa": "Banco Santander",
  "cargo": "Product Owner",
  "pais": "Chile",
  "necesidad": "Conocer comportamientos de clientes",
  "consentimiento": true,
  "fecha": "2026-08-28",
  "fuente": "Web",
  "origen_detalle": "Replay webinar TE Q3 2026",
  "utm_source": "",
  "utm_medium": "",
  "utm_campaign": "",
  "utm_content": "",
  "referrer": "",
  "pagina": "https://getxerpa.com/recursos/webinars/..."
}

{
  "nombre": "Eduardo",
  "apellido": "Arenas",
  "email": "eduardo.arenas@santander.cl",
  "empresa": "Banco Santander",
  "cargo": "Product Owner",
  "pais": "Chile",
  "necesidad": "Conocer comportamientos de clientes",
  "consentimiento": true,
  "fecha": "2026-08-28",
  "fuente": "Web",
  "origen_detalle": "Replay webinar TE Q3 2026",
  "utm_source": "",
  "utm_medium": "",
  "utm_campaign": "",
  "utm_content": "",
  "referrer": "",
  "pagina": "https://getxerpa.com/recursos/webinars/..."
}

{
  "nombre": "Eduardo",
  "apellido": "Arenas",
  "email": "eduardo.arenas@santander.cl",
  "empresa": "Banco Santander",
  "cargo": "Product Owner",
  "pais": "Chile",
  "necesidad": "Conocer comportamientos de clientes",
  "consentimiento": true,
  "fecha": "2026-08-28",
  "fuente": "Web",
  "origen_detalle": "Replay webinar TE Q3 2026",
  "utm_source": "",
  "utm_medium": "",
  "utm_campaign": "",
  "utm_content": "",
  "referrer": "",
  "pagina": "https://getxerpa.com/recursos/webinars/..."
}

• fuente siempre "Web"

• origen_detalle viene de la property control

• fecha en formato YYYY-MM-DD

• consentimiento booleano, no texto

UTM

Al cargar la página, leer utm_source, utm_medium, utm_campaign, utm_content y utm_term de la query string y guardarlos en sessionStorage. Al enviar, leerlos de ahí. Esto los preserva si la persona navega por el sitio antes de llenar el formulario.

Honeypot

Un input extra llamado hp_field, oculto por CSS (position: absolute; left: -9999px), nunca con type="hidden". Si viene con contenido, no enviar nada y redirigir igual.

Después de enviar

Redirigir a la URL de la property control Destino, esperando a que el POST responda. Si tarda más de 3 segundos, redirigir igual.

Parte 4 — Dónde insertar el componente

Los nombres de las páginas de producto son referenciales. Usar los reales del sitio y ajustar el valor de Origen para que se entienda al filtrar en Attio.

No tocar el formulario nativo de agendar-demo. Ya funciona con su propio webhook.

Parte 5 — Página de replay

La landing del webinar y la página del replay son la misma URL. Después del evento cambia de estado, no de dirección.

Orden de bloques en estado Replay

1. Badge REPLAY + título + bajada + metadata

2. Video embebido

3. De qué se trata

4. Formulario de demo

5. Qué vas a aprender

6. Agenda

7. Expositores

Todos los bloques de contenido se mantienen. Lo único que cambia respecto al estado previo: se agrega el video, el formulario pasa de registro a demo y sube de posición, y se ajustan fechas y tiempos verbales.

Se elimina del texto: el contador, las horas por zona horaria y todo lo que hable en futuro. La agenda se conserva, redactada en pasado.

Se conserva la fecha como registro: "Grabado el 27 de agosto de 2026 · 61 min".

Título

Dime cómo gastas y te diré quién eres

Bajada

Cómo usar la data enriquecida de tus clientes para conocerlos y rentabilizarlos.

Metadata

Mijael Feldman, CEO de Xerpa · Fernando Reyes, CTO de Xerpa · 61 minutos

Video

<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:12px;">
  <iframe src="https://www.youtube-nocookie.com/embed/n6TMbDpUtgI?rel=0&modestbranding=1" title="Dime cómo gastas y te diré quién eres — Webinar Xerpa" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="">
  </iframe>
</div>

<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:12px;">
  <iframe src="https://www.youtube-nocookie.com/embed/n6TMbDpUtgI?rel=0&modestbranding=1" title="Dime cómo gastas y te diré quién eres — Webinar Xerpa" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="">
  </iframe>
</div>

<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:12px;">
  <iframe src="https://www.youtube-nocookie.com/embed/n6TMbDpUtgI?rel=0&modestbranding=1" title="Dime cómo gastas y te diré quién eres — Webinar Xerpa" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="">
  </iframe>
</div>

Bajo el video, en texto secundario:

Esta es la grabación del webinar transmitido en vivo el 27 de agosto de 2026. Puedes verla cuando quieras y compartirla con tu equipo.

De qué se trata

Tu banco tiene todas las transacciones de sus clientes, pero no puede responder preguntas básicas sobre ellos: cuántos tienen mascota, cuántos tienen auto, cuántos son deportistas. La información existe, pero llega sucia, repartida en silos y sin estructura, así que nunca alcanza a llegar a una campaña.

En este webinar mostramos cómo se recupera esa información. Una glosa ilegible como MERPAGO*NTFX LOS GATOS vuelve a ser Netflix, con su categoría, su etiqueta de suscripción y su contexto. Con eso se construyen atributos que describen a cada persona y que se actualizan solos con cada movimiento.

La segunda mitad es una demo en vivo: partimos de un dataset bruto, lo enriquecemos en tiempo real, creamos atributos y armamos un segmento listo para activar en una campaña.

Para quién es: equipos de datos, producto, marketing y canales digitales de bancos, cooperativas y fintechs de Latinoamérica.

Qué vas a aprender

• Cómo una transacción entra con tres campos y sale con doce

• Por qué dos clientes con la misma ficha pueden necesitar productos completamente distintos

• Cómo se construye un atributo a partir de frecuencia, recurrencia y monto

• Por qué un atributo dinámico te dice quién está siendo tu cliente, y uno estático solo quién fue

• Cómo combinar y excluir atributos para llegar a segmentos accionables

• Qué cambia cuando el ejecutivo sabe quién tiene enfrente antes de que la persona se siente

• Por qué el enriquecimiento es la base de cualquier capa conversacional o agéntica que construyas encima

Parte 6 — Marca

• Navy #020E26, Azul #4C6CF4, Periwinkle #718CFF

• Naranja #FF7A00 solo en el botón del formulario

• Tipografía Inter

SEO

• Title tag: Dime cómo gastas y te diré quién eres — Webinar Xerpa

• Schema.org VideoObject con name, description, uploadDate, duration en ISO 8601 y embedUrl

Referencia: mapeo en Attio

Esto lo configura Mijael en el workflow de Attio. No requiere acción del agente, se incluye como contexto.

Lista "Solicitudes de demo", id 0a8bd456-c821-4355-9ef2-4ac2e7454bee.

En People: email → email_addresses (match), nombre+apellido → name, cargo → job_title, empresa → empresa_delcarada (con typo, congelado por Attio).