Integraciones

Por qué importa

Una web linda que no hace nada es un folleto caro

Hasta acá tenés una web hermosa. El problema: verse bien no es el objetivo. Una web de marketing existe para tres cosas, y todo lo demás está al servicio de eso:

Captar (que la persona deje el dato o escriba), medir (saber qué funciona y qué no) y, cuando aplica, cobrar (vender ahí mismo). Las integraciones son los cables que conectan tu web linda con el mundo real: tu casilla de mail, WhatsApp, Analytics, Meta, tu calendario, tu cuenta de cobros.

La buena noticia

No tenés que programar nada de esto. Cada integración es una receta: un pedacito de código que la IA te genera + un prompt para pedírselo bien. En esta lección tenés las dos cosas, copy-paste, para cada una.

El terreno

El stack de integraciones, de un vistazo

Antes de las recetas, ubicá cada pieza. Clickeá una integración para ver qué hace, cuándo usarla y un ejemplo aterrizado a IEB:

Formularios

Captar

Qué hace: Recibís el dato de la persona (nombre, email, WhatsApp) en tu mail o en una herramienta.
Cuándo la usás: Siempre que la web tenga que generar un lead o un contacto.
Ejemplo IEB: El formulario de “Quiero la demo de IEB” te llega a marketing@ en el momento.

No las pongas todas “por las dudas”

Cada integración suma un cablecito que puede romperse y un poco de peso a la página. Poné solo las que sirven al objetivo de esa web. Casi siempre: un formulario + Analytics. El resto, según el caso.

Receta 1 · Captar

Formularios: que el lead te llegue

El 90% de las webs de marketing necesitan esto: alguien deja su dato y a vos te tiene que llegar. Hay dos caminos según cuánto control querés.

Camino fácil (sin código tuyo): servicios como Formspree o Tally te dan una dirección a la que tu formulario manda los datos, y ellos te lo reenvían por mail. Pegás una línea y listo.

Formulario que manda el lead a tu mail

Camino con más control (Resend): si querés que el mail salga con tu marca y manejar la lógica vos, la IA arma una pequeña “función” en tu proyecto Next.js que recibe el formulario y envía el mail con Resend. Vos no escribís el código: lo pedís.

app/api/contacto/route.ts

import { Resend } from "resend";

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST(req: Request) {
  const { nombre, email, whatsapp } = await req.json();

  await resend.emails.send({
    from: "Web IEB <leads@tudominio.com>",
    to: "marketing@empresa.com",
    subject: `Nuevo lead: ${nombre}`,
    text: `Nombre: ${nombre}\nEmail: ${email}\nWhatsApp: ${whatsapp}`,
  });

  return Response.json({ ok: true });
}

Prompt para el formulario con Resend

Quiero un formulario de contacto en Next.js (App Router) con campos Nombre, Email y WhatsApp.
Creá una API route en /api/contacto que reciba esos datos y envíe un mail a {{marketing@empresa.com}} usando Resend.
La API key de Resend tiene que leerse de una variable de entorno (RESEND_API_KEY), nunca escrita en el código.
En el front, mostrá estado de "enviando", éxito y error. Dejame indicado qué tengo que cargar en las variables de entorno.

Lo que casi siempre se olvida

Después de captar el lead, respondé algo. Un mensaje de “¡Gracias!”, una redirección a WhatsApp o un mail automático. Un formulario que se manda y deja a la persona mirando la nada pierde la mitad de su valor.

Receta 2 · Captar

WhatsApp: la conversación de un click

En Argentina WhatsApp convierte muchísimo. No hace falta ninguna API rara: un simple link wa.me abre el chat con tu número y un mensaje ya escrito. Probá el botón flotante:

Botón flotante de WhatsApp

tu-landing.com

Hola 👋 Quiero info de la cuenta IEB

Clickeá el botón verde 👉

Truco de marketing

Cambiá el mensaje pre-escrito según la página. En la landing del evento: “Quiero info del evento IEB”; en la de un producto: “Quiero abrir una cuenta”. Así ya sabés de dónde viene cada consulta.

Receta 3 · Medir

Google Analytics 4: dejá de adivinar

Sin Analytics, no sabés cuánta gente entra, de dónde viene ni qué hace. Es lo primero que se pone en toda web. GA4 te da un código (un “Measurement ID” tipo G-XXXXXXX) y vos lo pegás. En Next.js la forma limpia es el componente oficial.

app/layout.tsx

import { GoogleAnalytics } from "@next/third-parties/google";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="es">
      <body>{children}</body>
      {/* Reemplazá por tu Measurement ID de GA4 */}
      <GoogleAnalytics gaId="G-XXXXXXX" />
    </html>
  );
}

Prompt para conectar Google Analytics 4

Conectá Google Analytics 4 a esta web Next.js usando @next/third-parties/google.
Mi Measurement ID es {{G-XXXXXXX}}. Que cargue en todas las páginas.
Dejá listo, además, un evento que se dispare cuando alguien envía el formulario de contacto, para poder medir conversiones.
Explicame en una línea dónde voy a ver esos datos.

Qué mirar primero

No te ahogues en métricas. Para empezar alcanza con tres: visitas, de dónde vienen (fuente/medio) y conversiones (cuántos dejaron el dato). Con eso ya sabés si la campaña sirve.

Receta 4 · Medir

Meta Pixel: para que la pauta aprenda

Si pautás en Instagram o Facebook, el Pixel es lo que le avisa a Meta quién visitó tu web y quién convirtió. Con eso el algoritmo aprende a mostrarle tu aviso a gente parecida a la que ya te dejó el dato, y podés hacer retargeting (volver a impactar al que entró y no convirtió).

app/layout.tsx

import Script from "next/script";

// Pegá esto en el layout. Reemplazá TU_PIXEL_ID por el tuyo.
<Script id="meta-pixel" strategy="afterInteractive">
  {`!function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', 'TU_PIXEL_ID');
  fbq('track', 'PageView');`}
</Script>

Prompt para instalar el Meta Pixel

Instalá el Meta Pixel en esta web Next.js. Mi Pixel ID es {{TU_PIXEL_ID}}.
Que registre PageView en todas las páginas, cargando el script de forma optimizada (afterInteractive).
Además, dispará el evento "Lead" cuando alguien envía el formulario de contacto.
Recordame que tengo que verificar el dominio en el Administrador de Eventos de Meta.

GA4 y Pixel no son lo mismo

GA4 es tu tablero para entender el tráfico. El Pixel es para que la publicidad de Meta funcione mejor. Si pautás en Meta, querés los dos.

Receta 5 · Captar

Calendly: que agenden la reunión solos

Cuando el siguiente paso es una llamada o una demo, no hagas que la persona escriba para coordinar. Calendly muestra tus horarios libres y deja que reserve sola. Lo embebés directo en la página.

components/calendly.tsx

// Embed simple por iframe. Reemplazá por tu link de Calendly.
export function AgendarDemo() {
  return (
    <iframe
      src="https://calendly.com/tu-usuario/demo-ieb"
      title="Agendá una demo"
      className="h-[680px] w-full rounded-xl border border-border"
      loading="lazy"
    />
  );
}

Prompt para embeber Calendly

Agregá una sección "Agendá una demo" que embeba mi Calendly: {{https://calendly.com/tu-usuario/demo-ieb}}.
Que ocupe todo el ancho, se vea bien en mobile y cargue de forma diferida (lazy) para no frenar la página.
Arriba del calendario poné un título y una bajada que invite a reservar.

Combo ganador

Formulario corto + redirección a Calendly. La persona deja el dato (te queda el lead aunque no agende) y de paso reserva la reunión. No pierde nadie.

Receta 6 · Cobrar

Stripe: cobrar de verdad, sin armar un banco

Si la web tiene que vender (un curso, una entrada a un evento, una suscripción), no necesitás un sistema de pagos propio. Stripe te da un Payment Link: creás el producto y el precio en su panel y te da una URL. Ese link es el checkout. Cero código.

Botón de compra (Payment Link)

// El Payment Link lo creás en dashboard.stripe.com → Payment Links.
// Te da una URL. El botón es solo un link a esa URL.
<a
  href="https://buy.stripe.com/tu_payment_link"
  className="inline-flex rounded-lg bg-brand px-5 py-3 font-semibold text-brand-foreground"
>
  Comprar entrada · $25.000
</a>

Si querés algo más integrado (botón propio que arma el checkout dinámicamente, ideal cuando hay varios productos), la IA puede armar Stripe Checkout con una API route. El concepto es el mismo, con más control:

app/api/checkout/route.ts

import Stripe from "stripe";

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);

export async function POST() {
  const session = await stripe.checkout.sessions.create({
    mode: "payment",
    line_items: [{ price: "price_XXXX", quantity: 1 }],
    success_url: "https://tu-web.com/gracias",
    cancel_url: "https://tu-web.com/",
  });
  return Response.json({ url: session.url });
}

Prompt para cobrar con Stripe

Quiero cobrar {{una entrada de $25.000}} en esta web.
Opción A (simple): explicame cómo crear un Payment Link en Stripe y armame el botón que lleva a ese link.
Opción B (integrada): creá una API route /api/checkout que use Stripe Checkout (modo payment) con el price ID {{price_XXXX}},
con success_url a /gracias y cancel_url al inicio. La STRIPE_SECRET_KEY tiene que leerse de variable de entorno.
Decime cuál conviene para mi caso y por qué.

Plata de verdad = más cuidado

Stripe tiene un modo de prueba con tarjetas falsas: usalo siempre antes de activar pagos reales. Y la clave secreta (la que empieza con sk_) nunca, jamás, va escrita en el código ni en el front. Más sobre esto abajo.

Receta 7 · El concepto madre

APIs: el idioma con el que las webs se hablan

Todas las recetas de arriba son, en el fondo, lo mismo: tu web le pide o le manda datos a otro servicio. A eso se le llama usar una API. Entender este concepto te libera: el día que necesites algo que no tiene “botón mágico”, sabés que existe la forma de conectarlo.

La herramienta básica para pedir datos se llama fetch. No necesitás escribirla, pero ver el patrón te ayuda a pedirla bien:

Ejemplo: traer la cotización del dólar

// Pedir datos a una API pública y mostrarlos.
const res = await fetch("https://dolarapi.com/v1/dolares/oficial");
const data = await res.json();

console.log(data.venta); // -> el valor del dólar oficial

Prompt para consumir una API

Quiero mostrar en la web {{la cotización del dólar oficial}}, tomándola de la API {{https://dolarapi.com/v1/dolares/oficial}}.
Mostrá el valor de venta en un cartelito arriba a la derecha, con el formato $ y miles.
Manejá el caso de que la API no responda (mostrá un guion en vez de romper la página) y refrescá el dato cada 10 minutos.

Cuándo conviene una API

Cuando ya hay otro sistema con la data o la acción que querés (un CRM, una planilla conectada, una cotización, un stock). En vez de copiar a mano, le pedís a la IA que conecte los dos. Ese es el salto de “web folleto” a “web que trabaja”.

Regla de oro

Las claves: dónde sí y dónde nunca

Casi toda integración te da una clave (API key, token, secret). Es como la contraseña de tu cuenta en ese servicio. La regla es simple y no negociable:

.env.local

# Las claves van acá, en variables de entorno.
# Este archivo NO se sube a GitHub (va en .gitignore).
RESEND_API_KEY=re_xxxxxxxxxxxx
STRIPE_SECRET_KEY=sk_live_xxxxxxxxxxxx

Lo que NUNCA hay que hacer

Nunca pegues una clave secreta directamente en el código que se ve en el navegador. Si la IA te la escribe ahí, frenála y pedile que la mueva a una variable de entorno. Las claves secretas (Resend, Stripe sk_) viven en el servidor; las públicas (GA4, Pixel) sí pueden ir en el front.

Prompt de seguridad (usalo siempre)

Revisá todas las integraciones de este proyecto y asegurate de que ninguna clave secreta esté escrita en el código del front.
Movelas a variables de entorno (.env.local) y confirmame que .env.local está en el .gitignore.
Listame todas las variables que tengo que cargar y dónde consigo cada una.

Cierre

Antes de dar por terminada la web

Una web profesional no es la que se ve mejor: es la que captura, mide y, si vende, cobra. Pasá esta lista antes de publicar:

¿La web hace su trabajo?

0/7

El test definitivo

Hacé el recorrido completo como si fueras un cliente: entrá, dejá el dato, fijate que te llegue, mirá que Analytics lo registre. Si todo eso pasa, tu web dejó de ser un folleto y empezó a trabajar para vos.