Conexiones y tutoriales

Todo lo que necesitás para pasar de la demo a un Clientany conectado de verdad: canales de mensajería, tiendas y avisos. Cada guía está pensada para hacerse en menos de 30 minutos.

La arquitectura del drop

ClienteWhatsApp / IG / TG

Meta / Telegramplataformas

Vercel/api/*-webhook

Logs + Slacky tu futura DB

Tu deploy en Vercel ya incluye tres funciones serverless activas:

Endpoint	Qué hace
`POST /api/lead`	Recibe el formulario de la landing, valida el email y avisa por Slack si configuraste el webhook.
`GET/POST /api/whatsapp-webhook`	Verificación de Meta + recepción de mensajes de WhatsApp, con auto-respuesta opcional.
`POST /api/telegram-webhook`	Recibe los mensajes de tu bot de Telegram y responde automáticamente.

💡 Todos los mensajes recibidos quedan visibles en Vercel → tu proyecto → Logs (filtrá por función). Es tu "bandeja" provisoria hasta que conectes una base de datos.

▲Deploy y dominio propio

⏱ 10 minutos

Deployá el proyecto.
Arrastrá la carpeta clientany-vercel a vercel.com/new, o usá la CLI: vercel --prod. Anotá tu URL (ej: clientany-abc.vercel.app) — la vas a usar en todos los tutoriales de acá abajo.
Verificá que todo esté vivo.
Abrí / (landing), /app (demo) y /docs (esta página). Probá el formulario del final de la landing: debería responder "¡Listo!".
Conectá tu dominio.
En Vercel: Settings → Domains → Add. Escribí tu dominio (ej: clientany.com.ar) y elegí la opción recomendada. Vercel te muestra los registros DNS a crear.
Actualizá el DNS en tu proveedor.
En donde compraste el dominio (NIC.ar, GoDaddy, Cloudflare…), creá el registro A → 76.76.21.21 para la raíz y el CNAME → cname.vercel-dns.com para www. El SSL se emite solo en unos minutos.

⚠️ Cada vez que cambies archivos, volvé a arrastrar la carpeta (o hacé push si lo conectaste a GitHub). El deploy tarda ~30 segundos.

🔑Variables de entorno

Referencia rápida — se cargan en Vercel → Settings → Environment Variables

Variable	Para qué sirve	Dónde la conseguís
`LEAD_WEBHOOK_URL`	Aviso instantáneo de cada lead y mensaje a Slack/Discord	Tutorial Avisos de leads
`WHATSAPP_VERIFY_TOKEN`	Texto secreto para que Meta verifique tu webhook	Lo inventás vos (ej: `clientany-2026-seguro`)
`WHATSAPP_TOKEN`	Token de acceso para enviar/responder mensajes	Meta for Developers → tu app → WhatsApp → API Setup
`WHATSAPP_PHONE_ID`	ID del número desde el que respondés	Misma pantalla de API Setup ("Phone number ID")
`TELEGRAM_BOT_TOKEN`	Token de tu bot	@BotFather en Telegram
`TELEGRAM_SECRET`	Valida que los POST vengan de Telegram	Lo inventás vos

💡 Después de agregar o cambiar variables, hacé Redeploy (Deployments → ⋯ → Redeploy) para que las funciones las tomen.

💬Conectar WhatsApp (Cloud API oficial de Meta)

⏱ 25–30 minutos · gratis para empezar (número de prueba incluido)

La Cloud API es la vía oficial: sin riesgo de baneo, con webhooks serverless que encajan perfecto con Vercel.

Creá la app en Meta.
Entrá a developers.facebook.com → My Apps → Create App → tipo Business. Nombrala (ej: "Clientany") y asociala a tu Business Portfolio (si no tenés uno, el asistente te lo crea).
Agregá el producto WhatsApp.
En el panel de la app: Add Product → WhatsApp → Set up. Meta te da un número de prueba gratis y un token temporal: ya podés mandar mensajes de test a hasta 5 números verificados.
Cargá las variables en Vercel.
De la pantalla WhatsApp → API Setup copiá el Phone number ID → WHATSAPP_PHONE_ID y el token → WHATSAPP_TOKEN. Inventá también tu WHATSAPP_VERIFY_TOKEN. Redeploy.
Configurá el webhook.
En WhatsApp → Configuration → Webhook → Edit:
```
Callback URL:  https://TU-DOMINIO.vercel.app/api/whatsapp-webhook
Verify token:  el mismo texto que pusiste en WHATSAPP_VERIFY_TOKEN
```
Al tocar Verify and save, Meta hace un GET a tu función y ésta le devuelve el challenge. Si las variables están bien, verifica al instante ✓.
Suscribite a los eventos.
En la misma pantalla, en Webhook fields, tocá Manage y suscribí messages (mensajes entrantes). Opcionalmente message_status ya lo logueamos también.

Probalo.

Mandale un WhatsApp al número de prueba desde tu teléfono (previamente agregado como destinatario de test en API Setup). En Vercel → Logs vas a ver el mensaje, y si cargaste el token, el bot te contesta solo 🎉. También podés enviar desde la API:

curl -X POST "https://graph.facebook.com/v21.0/PHONE_ID/messages" \
  -H "Authorization: Bearer TU_TOKEN" -H "Content-Type: application/json" \
  -d '{"messaging_product":"whatsapp","to":"549XXXXXXXXXX","type":"text","text":{"body":"Hola desde Clientany 🚀"}}'

Pasá a producción.
Cuando quieras usar tu número real: agregá el número en API Setup → Add phone number, verificalo por SMS, y generá un token permanente (Business Settings → System Users → Add → Generate Token con permiso whatsapp_business_messaging). Reemplazá WHATSAPP_TOKEN y listo.

⚠️ El token de la pantalla de API Setup dura 24 h — sirve para probar. Para producción usá siempre el token permanente de System User (paso 7).

💡 Un número conectado a la Cloud API deja de funcionar en la app de WhatsApp Business del teléfono. Probá primero con el número de test.

📸Conectar Instagram + Messenger

⏱ 20 minutos · usa la misma app de Meta que WhatsApp

Requisitos previos.
Tu cuenta de Instagram debe ser Business (no personal ni creator) y estar vinculada a una página de Facebook. Se configura desde la app de Instagram: Configuración → Herramientas para empresas.
Agregá el producto Messenger.
En tu app de Meta: Add Product → Messenger → Set up. Conectá tu página de Facebook y generá el Page Access Token.
Activá la mensajería de Instagram.
En Messenger → Instagram Settings, vinculá la cuenta de Instagram Business. Además, en la app de Instagram activá Configuración → Mensajes → Permitir acceso de herramientas conectadas.
Apuntá los webhooks.
Podés reusar el mismo endpoint: en Messenger → Webhooks configurá la Callback URL https://TU-DOMINIO.vercel.app/api/whatsapp-webhook con tu mismo verify token, y suscribí messages y messaging_postbacks para la página, y el objeto instagram para DMs.
Probá y pedí permisos definitivos.
En modo desarrollo solo los administradores de la app pueden escribir. Para abrirlo al público, pedí en App Review los permisos pages_messaging e instagram_manage_messages (Meta suele aprobarlo en pocos días mostrando un video del flujo).

💡 Los DMs de Instagram y Messenger llegan con otra estructura de payload que WhatsApp. La función actual los loguea igual; cuando armes el backend real, separá el parsing por objeto (whatsapp_business_account vs page vs instagram).

✈️Conectar Telegram

⏱ 5 minutos · la conexión más fácil de todas

Creá el bot.
En Telegram, hablale a @BotFather → /newbot → elegí nombre y usuario (ej: ClientanyBot). Te devuelve el token.
Cargá las variables.
En Vercel: TELEGRAM_BOT_TOKEN = el token de BotFather, TELEGRAM_SECRET = un texto secreto que inventes. Redeploy.

Activá el webhook.

Pegá esto en el navegador (reemplazando lo tuyo):

https://api.telegram.org/botTU_TOKEN/setWebhook?url=https://TU-DOMINIO.vercel.app/api/telegram-webhook&secret_token=TU_SECRET

Debería responder {"ok":true,"result":true}.

Probalo.
Escribile a tu bot desde Telegram. Te responde el mensaje automático y el texto queda en los logs de Vercel ✓.

🛍️Conectar Shopify

⏱ 15 minutos · para carritos abandonados y datos de pedidos

Creá una app personalizada.
En el admin de tu tienda: Configuración → Apps y canales de venta → Desarrollar apps → Crear app. Nombrala "Clientany".
Dale permisos de lectura.
En Configuration → Admin API integration marcá: read_orders, read_checkouts, read_customers, read_products. Guardá e instalá la app: te da el Admin API access token (empieza con shpat_) — guardalo, se muestra una sola vez.
Creá los webhooks de carritos.
En Configuración → Notificaciones → Webhooks agregá:
```
Evento: Creación de checkouts   → URL: https://TU-DOMINIO.vercel.app/api/lead
Evento: Actualización de checkouts → URL: https://TU-DOMINIO.vercel.app/api/lead
```
Con esto, cada checkout que arranca (y no se paga) te llega como evento — la materia prima del recuperador de carritos.

Probá la API de pedidos.

Para leer pedidos desde tu futuro backend:

curl "https://TU-TIENDA.myshopify.com/admin/api/2025-07/orders.json?status=any&limit=5" \
  -H "X-Shopify-Access-Token: shpat_XXXX"

💡 Un checkout abandonado es un checkout creado que después de ~45 min no tiene pedido asociado. Esa lógica de espera va en tu backend (o en un cron de Vercel) — ver Roadmap.

🔌Conectar WooCommerce

⏱ 15 minutos

Generá las claves REST.
En WordPress: WooCommerce → Ajustes → Avanzado → API REST → Añadir clave. Descripción "Clientany", permisos Lectura. Copiá el Consumer key y el Consumer secret.

Probá la conexión.

curl "https://TU-TIENDA.com/wp-json/wc/v3/orders?per_page=5" \
  -u "ck_XXXX:cs_XXXX"

Creá los webhooks.
En WooCommerce → Ajustes → Avanzado → Webhooks → Añadir webhook:
```
Tema: Pedido creado      → URL de entrega: https://TU-DOMINIO.vercel.app/api/lead
Tema: Pedido actualizado → URL de entrega: https://TU-DOMINIO.vercel.app/api/lead
```
Estado: Activo. WooCommerce firma cada envío con el "Secreto" que definas — validalo en tu backend cuando pases a producción.
Carritos abandonados.
Woo no trae webhook nativo de carritos. Opciones: el plugin gratuito Cart Tracking for WooCommerce, o leer wc/v3/orders?status=pending cada 15 min con un cron. La segunda no requiere plugins.

☁️Conectar Tiendanube

⏱ 20 minutos

Creá tu cuenta de Partner.
Registrate en partners.tiendanube.com (es gratis) y entrá al panel de partners.
Creá la app.
Apps → Crear aplicación. Completá nombre ("Clientany") y en URL de redirección poné https://TU-DOMINIO.vercel.app/api/lead (después la cambiás por tu endpoint OAuth real). Anotá el App ID y el Client Secret.
Autorizá tu propia tienda.
Visitá https://www.tiendanube.com/apps/APP_ID/authorize con la sesión de tu tienda iniciada y aceptá los permisos (leé read_orders, read_products, read_customers).

Canjeá el código por el token.

curl -X POST "https://www.tiendanube.com/apps/authorize/token" \
  -d "client_id=APP_ID&client_secret=SECRET&grant_type=authorization_code&code=CODE"

Te devuelve access_token + user_id (el ID de la tienda).

Suscribí los webhooks.

curl -X POST "https://api.tiendanube.com/v1/USER_ID/webhooks" \
  -H "Authentication: bearer ACCESS_TOKEN" -H "Content-Type: application/json" \
  -d '{"event":"order/created","url":"https://TU-DOMINIO.vercel.app/api/lead"}'

Repetí con order/paid y checkout/abandoned (¡Tiendanube sí tiene evento nativo de carrito abandonado! 🎉).

🔔Avisos de leads y mensajes en Slack / Discord

⏱ 5 minutos · hace que TODO lo anterior te avise al instante

Opción Slack.
En api.slack.com/apps → Create App → From scratch → activá Incoming Webhooks → Add New Webhook to Workspace → elegí el canal (ej: #ventas). Copiá la URL https://hooks.slack.com/services/…
Opción Discord.
En tu servidor: Ajustes del canal → Integraciones → Webhooks → Nuevo webhook. Copiá la URL y agregale /slack al final para que acepte el mismo formato: https://discord.com/api/webhooks/…/slack
Cargala en Vercel.
LEAD_WEBHOOK_URL = la URL que copiaste. Redeploy. Desde ahora, cada lead de la landing, cada WhatsApp y cada Telegram entrante te aparece como mensaje 🔔.

🗺️Roadmap: de demo a producto real

Lo que ya tenés resuelve la captura y los avisos. Para competir de verdad con Whaticket, el orden recomendado de construcción es:

Base de datos.
Sumá Vercel Postgres o Supabase (gratis para empezar). Guardá ahí cada mensaje/lead que hoy va a los logs: tablas contacts, conversations, messages, deals.
Bandeja real.
Reemplazá los datos de ejemplo de /app por fetch a tus propias APIs (/api/conversations). Para tiempo real, Supabase Realtime o polling cada 5 s alcanza para arrancar.
Envío desde la bandeja.
El composer del CRM llama a /api/send, que rutea por canal: Graph API para WhatsApp/IG/Messenger, Bot API para Telegram.
Recuperador de carritos.
Un Vercel Cron Job cada 15 min busca checkouts sin pago de +45 min y dispara la plantilla de WhatsApp con el cupón.
IA.
Conectá la API de Anthropic u OpenAI en /api/ai-reply: contexto = catálogo de la tienda + historial del cliente. Regla de oro: la IA responde, pero deriva a humano ante palabras como "reclamo" o "cancelar".
Multi-tenant.
Cuando quieras venderlo a otros: auth (Clerk/Auth0), un workspace_id en cada tabla, y facturación con Mercado Pago o Stripe.

💜 Consejo: no construyas todo antes de vender. Con los webhooks + Slack ya podés atender clientes reales "a mano" y validar que pagan, mientras armás la bandeja real.