Conectores
Un conector vincula un servicio que ya usas, como Stripe, Supabase o GitHub, con WebTwizz. Conectas una cuenta una vez y queda guardada en tus conectores. Desde entonces, cualquiera de tus proyectos puede usarla, y cada proyecto solo tiene los conectores que elijas para él.
Cuando un proyecto usa un conector:
- Las claves del servicio se guardan como secretos del proyecto, para que el código de tu sitio web pueda usarlas.
- Todo lo que tu sitio web necesita cargar para ese servicio, como una etiqueta de analítica o una ventana de chat, se añade al código de tu proyecto automáticamente. Consulta Código en tu proyecto.
- El editor muestra los datos del servicio para ese proyecto: ingresos, errores, visitantes y commits.
- La IA puede consultar el servicio mientras trabaja y configurarlo por ti.
Algunos conectores no añaden nada a tu sitio web. Permiten que la IA trabaje en otra aplicación mientras crea tu sitio web, por ejemplo, leyendo una página de Notion o una incidencia de Linear. Consulta Aplicaciones que la IA puede usar.
Dónde están los conectores
Tus conectores, en el panel de control
Haz clic en Conectores en la barra lateral del panel de control, dentro de Biblioteca. Esta página reúne todas las cuentas que has conectado en todos tus proyectos.
- Conectado muestra los servicios en los que tienes una cuenta y los proyectos que usan cada uno. Haz clic en uno para abrirlo.
- Añadir un conector muestra los demás servicios. Haz clic en un servicio para conectarlo.
- Busca o filtra la lista con Conectado, Todo o una categoría de la izquierda.
- ¿Necesitas un servicio que no aparece aquí? Haz clic en Solicitar un conector.
También puedes buscar un conector por su nombre desde Buscar (⌘K / Ctrl+K) en el panel de control.
La página de un conector muestra tus Cuentas de ese servicio y los Proyectos que usa cada una, con los ajustes de cada proyecto. Abrir te lleva al proyecto y Quitar elimina el conector de ese proyecto.
Lo que usa un proyecto, en Ajustes
En el editor, abre Ajustes y elige Conectores.
- En este proyecto muestra lo que usa el proyecto. Haz clic en un conector para abrirlo.
- Añadir a este proyecto muestra los demás servicios. Haz clic en un servicio para añadirlo. Si ya conectaste una cuenta, el servicio muestra Usa tu y el nombre de la cuenta. Un clic basta para añadirlo con esa cuenta.
- Todos tus conectores abre la página del panel de control.
Conectar un servicio
Algunos servicios se conectan al iniciar sesión. Otros necesitan una clave que debes pegar.
| Cómo | Conectores |
|---|---|
| Iniciar sesión | Stripe, GitHub, Sentry, PostHog, Google Analytics, Google Sheets, Google Calendar, Google Search Console, Supabase, Resend, OpenRouter y las aplicaciones que la IA puede usar |
| Pegar una clave | OpenAI, Anthropic, Gemini, Groq, Loops, Intercom (un App ID), Cal.com, ElevenLabs, HubSpot, Twilio, WhatsApp, Razorpay, Paystack, PayPal, servidor MCP |
Algunos ofrecen ambas opciones: Pegar claves para Stripe, Pega un ID de medición para Google Analytics y Pegar una clave para Resend y OpenRouter.
Desde un proyecto:
- Abre Ajustes > Conectores y haz clic en el servicio.
- Haz clic en Conectar.
- Los servicios con inicio de sesión se abren en una ventana nueva. Autoriza el acceso allí y volverás al conector.
- Los servicios con clave abren la página donde creas la clave en una ventana independiente. Copia la clave allí y vuelve: WebTwizz la toma del portapapeles, la verifica y conecta el servicio. Es posible que tu navegador te pida permiso para pegar una vez. También puedes hacer clic en Pegar o pegar la clave directamente en el campo. Si un servicio necesita dos valores, como un ID y un secreto, te pide el siguiente después del primero. Si el servicio rechaza una clave, verás No se aceptó esa clave.
- Si hay algo que elegir, como un repositorio de GitHub o un proyecto de Sentry, el conector se abre en Terminar de conectar con el selector. Elige una opción y listo.
Desde el panel de control, haz clic en un servicio dentro de Añadir un conector, o abre su página y haz clic en Conectar. La cuenta se guarda sin añadirse a ningún proyecto. Puedes añadirla después desde Ajustes > Conectores de ese proyecto.
¿Aún no tienes una clave de IA? Los formularios de OpenAI, Anthropic, Gemini y Groq incluyen Iniciar sesión con OpenRouter, que te da acceso a todos los modelos en un solo paso. Consulta OpenRouter.
Supabase y Google Sheets son fuentes de datos, por lo que su botón Conectar abre el panel Datos. Un proyecto solo puede tener una fuente de datos a la vez. Consulta Datos y CMS.
Limitar una cuenta a un proyecto
Solo este proyecto conecta una cuenta que únicamente este proyecto puede usar. No aparecerá como opción en tus otros proyectos. Se marca como Solo este proyecto en el proyecto y Solo un proyecto en el panel de control. Es útil para la cuenta de Stripe de un cliente o una clave que no quieras reutilizar.
Dentro de un conector
Haz clic en un conector dentro de En este proyecto. Junto a su nombre hay enlaces que abren lo que este proyecto usa en el servicio, como Abrir Stripe o Abrir Sentry. Debajo, de arriba abajo:
- Resumen: los datos del servicio para este proyecto, como pagos de Stripe, errores de Sentry o solicitudes de incorporación de cambios de GitHub. Haz clic en una fila para ver sus detalles sin salir de la vista. Muchas filas tienen botones para tareas habituales, como Reembolsar un pago, Resolver un error o Fusionar una solicitud de incorporación de cambios, así que rara vez necesitas abrir el sitio web del servicio. Las acciones que no se pueden deshacer piden confirmación. Mostrar más carga la siguiente parte de una lista, y las tablas y pestañas se abren en el panel Datos.
- Cuenta: la cuenta que usa este proyecto y También se usa en, con los otros proyectos que la usan. Gestionar abre la cuenta en los conectores de tu panel de control. La mayoría de las cuentas basadas en claves también tienen Reemplazar clave.
- Ajustes: lo que elige este proyecto, como el repositorio, el proyecto de Sentry o el modelo de IA. Los cambios se guardan al hacerlos.
- Sitio web publicado: para los conectores que añaden algo a tu sitio web publicado, indica si está Ejecutando, si espera a que uses Publica para actualizar o si se inicia Después de publicar.
- Quitar de este proyecto: haz clic en Quitar y luego en ¿Quitar del proyecto? para confirmar. Sus claves se eliminan de este proyecto. Tus otros proyectos conservan la cuenta.
La página de cada conector en esta documentación muestra su resumen y sus ajustes.
Cambiar o quitar una cuenta
- Cambiar de cuenta en un proyecto: cuando tienes más de una cuenta de un servicio, la fila Cuenta incluye Cambiar de cuenta. Su menú muestra tus otras cuentas y Conectar otra cuenta. El proyecto cambia de cuenta y sus claves se reemplazan.
- Cambiar el nombre de una cuenta: en la página del conector del panel de control, haz clic en el nombre de la cuenta, escribe y pulsa
Enter. - Reemplazar una clave: haz clic en Reemplazar clave en la cuenta y pega la nueva. Todos los proyectos que usan esa clave pasan a usar la nueva. Razorpay, PayPal e Intercom no tienen esta opción porque sus valores cambian juntos: conecta los nuevos como otra cuenta y luego cambia de cuenta.
- Quitar una cuenta de todos los proyectos: en la página del conector del panel de control, haz clic en Quitar en la cuenta y luego en Quitar seguido de su nombre. Se desconecta de todos los proyectos que la usan, y todo lo que esos sitios web hagan con ella deja de funcionar hasta que vuelvas a conectar una cuenta.
Quitar una cuenta nunca elimina nada del servicio. Tus clientes de Stripe, tu repositorio de GitHub y tus eventos de Sentry siguen donde están.
Si un servicio deja de aceptar el inicio de sesión guardado, la cuenta muestra Hay que volver a conectarlo con el botón Volver a conectar. Si necesita un permiso que la cuenta no concedió, el resumen indica que el servicio necesita un permiso más, con Volver a conectar.
Dónde se guardan las claves
Los conectores que usa tu sitio web añaden sus claves como secretos en Ajustes > Secretos y las mantienen actualizadas. Aparecen en De servicios conectados. Tu vista previa las usa de inmediato. Vuelve a publicar para que tu sitio web publicado también las reciba. Consulta Secretos.
La página de cada conector indica los secretos que añade. Las claves que solo necesita WebTwizz, como una clave de servicio de HubSpot o un Auth Token de Twilio, nunca se añaden a tu sitio web.
Código en tu proyecto
Algunos conectores necesitan código en cada página: Google Analytics y PostHog cuentan las visitas, Sentry detecta errores, HubSpot añade su seguimiento, Intercom muestra su Messenger y Google Search Console añade la etiqueta que demuestra que el sitio web es tuyo. WebTwizz mantiene todo en un archivo de tu proyecto, webtwizz-connectors.tsx, y lo añade al diseño raíz de tu sitio web. La analítica propia de tu sitio web, en Ajustes > Analítica, se incorpora una vez que publicas el sitio web. No tienes que tocar nada.
- Se actualiza cuando añades, cambias o quitas uno de estos conectores, y cada vez que publicas. Si un proyecto no tiene el archivo, lo recibe en la siguiente publicación.
- Todo, excepto Messenger de Intercom, se ejecuta solo en tu sitio web publicado, para que tus propias visitas y errores en la vista previa no se cuenten. Messenger también aparece en la vista previa para que puedas probarlo.
- Forma parte de tu código, así que se envía a GitHub y se incluye en las descargas como cualquier otro archivo. WebTwizz lo gestiona, por lo que los cambios manuales se reemplazan. Cambia los ajustes del conector en su lugar.
- Si el código de tu sitio web ya carga uno de estos servicios por su cuenta, WebTwizz lo excluye del archivo para que nunca se cargue dos veces.
Conectores en el chat
La IA sabe qué conectores usa el proyecto y trabaja con ellos por ti.
Tarjetas de conexión
Cuando pides algo que necesita un servicio, como un formulario de contacto que te envíe correos, la IA añade una tarjeta de conexión, como Conectar Resend. Haz clic en ella para conectar sin salir del chat. Si ya tienes una cuenta de ese servicio, la tarjeta la ofrece por su nombre, junto con Conectar otra cuenta de Resend.
Para un servicio que no tiene conector, la IA añade los secretos que necesita a Ajustes > Secretos sin valores, para que puedas pegarlos en Necesita un valor.
Tarjetas en tiempo real
Pregunta cómo va algo y la IA puede responder con una tarjeta del servicio en tiempo real: una fila por servicio con la cifra principal, Ajustes y Abrir, y detalles que se pueden desplegar. Las cifras vienen directamente del servicio, por lo que la IA nunca las vuelve a escribir ni las adivina.
Cómo consulta la IA un servicio
La IA consulta tus servicios conectados cuando resulta útil: los errores de Sentry antes de corregir uno, los visitantes del mes pasado en Google Analytics o si tu dominio de Resend está verificado. Cada consulta aparece como una fila en el chat con el logotipo del servicio, como Usando Linear. Mientras trabaja, el logotipo parpadea.
Cuando termina, la fila indica lo que encontró. Haz clic para ver los detalles.
Para indicarle tú a la IA qué servicio usar, escribe @ en el cuadro del chat y elígelo en Conectores. Escribe / y abre una de las aplicaciones que la IA puede usar en MCP para elegir una de sus herramientas.
Pide permiso antes de hacer cambios
Las consultas se realizan automáticamente. Para hacer un cambio en tu cuenta del servicio, la IA pide permiso con Aceptar y Rechazar: marcar un error de Sentry como resuelto, reembolsar un pago o cambiar los ajustes de inicio de sesión de Supabase. Los correos de prueba de Resend y Loops solo llegan a tu propia bandeja de entrada, por lo que no piden permiso.
En el modo Chat, la IA puede consultar los conectores, pero no puede cambiar nada a través de ellos. La única excepción son las aplicaciones que la IA puede usar y los servidores MCP: una herramienta que podría cambiar algo te pide permiso primero y solo se ejecuta si aceptas.
GitHub y Stripe tienen sus propias herramientas: la IA trabaja con tu repositorio a través de git y con tu cuenta de Stripe a través de su herramienta de Stripe. Los datos de tu sitio web pasan por las herramientas del panel Datos. La página de cada conector explica qué puede hacer la IA con él.
Todos los conectores
Datos
| Conector | Para qué sirve | Cómo lo conectas |
|---|---|---|
| WebTwizz Cloud | Base de datos, inicios de sesión, almacenamiento de archivos, tareas y registros | Incluido. La IA lo añade, o puedes añadirlo desde el panel Datos |
| Supabase | Base de datos e inicios de sesión en tu propia cuenta de Supabase | Inicia sesión desde el panel Datos |
| Google Sheets | Una hoja de cálculo como fuente de datos de tu sitio web | Inicia sesión con Google desde el panel Datos |
Pagos
| Conector | Para qué sirve | Cómo lo conectas |
|---|---|---|
| Stripe | Pagos y suscripciones | Inicia sesión o pega las claves |
| Razorpay | Pagos en India: UPI, tarjetas y banca en línea | Pega un Key ID y un Key Secret |
| Paystack | Pagos en Nigeria, Ghana, Kenia y más países | Pega una clave secreta y una clave pública |
| PayPal | Pagos con PayPal y tarjetas en todo el mundo | Pega un ID de cliente y un secreto |
Analítica
| Conector | Para qué sirve | Cómo lo conectas |
|---|---|---|
| Google Analytics | Quién visita tu sitio web | Inicia sesión con Google o pega un ID de medición |
| Google Search Console | Cómo le va a tu sitio web en las búsquedas de Google | Inicia sesión con Google |
| PostHog | Qué hacen los visitantes, con reproducciones de sesiones e indicadores de funciones | Inicia sesión |
| Sentry | Detectar y corregir errores | Inicia sesión |
Correo electrónico
| Conector | Para qué sirve | Cómo lo conectas |
|---|---|---|
| Resend | Correos desde tu propio dominio | Inicia sesión o pega una clave de API |
| Loops | Listas de correo y correos para tus usuarios | Pega una clave de API |
| Klaviyo | Permite que la IA consulte los resultados de tu marketing por correo | Inicia sesión |
Soporte, CRM y mensajería
| Conector | Para qué sirve | Cómo lo conectas |
|---|---|---|
| Intercom | Chat en vivo en cada página | Pega un App ID |
| HubSpot | Los clientes potenciales de tu sitio web en HubSpot | Pega una clave de servicio |
| Twilio | Mensajes de texto y códigos de inicio de sesión por teléfono | Pega tu Account SID y Auth Token |
| Mensajes de WhatsApp desde tu número de empresa | Pega un token y los ID |
Reservas y voz
| Conector | Para qué sirve | Cómo lo conectas |
|---|---|---|
| Cal.com | Permitir que los visitantes reserven una cita contigo | Pega una clave de API |
| Google Calendar | Reservas directamente en tu calendario | Inicia sesión con Google |
| Calendly | Permite que la IA encuentre tus enlaces de reserva | Inicia sesión |
| ElevenLabs | Un agente de voz con el que los visitantes pueden hablar | Pega una clave de API |
IA
| Conector | Para qué sirve | Cómo lo conectas |
|---|---|---|
| OpenAI | Modelos GPT en tu sitio web | Pega una clave de API |
| Anthropic | Claude en tu sitio web | Pega una clave de API |
| Gemini | Modelos Gemini en tu sitio web | Pega una clave de API |
| OpenRouter | Cientos de modelos con una sola cuenta | Inicia sesión o pega una clave de API |
| Groq | Modelos abiertos muy rápidos | Pega una clave de API |
Código
| Conector | Para qué sirve | Cómo lo conectas |
|---|---|---|
| GitHub | Tu código en tu propio repositorio | Inicia sesión |
Aplicaciones que la IA puede usar
Permiten que la IA trabaje en otra aplicación mientras crea tu sitio web. No se añade nada a tu sitio web y son gratis en todos los planes. Consulta Aplicaciones que la IA puede usar para conocer cada una.
Notion, Linear, Cloudflare, Zapier, Make, monday.com, ClickUp, Miro, Webflow, Wix, Klaviyo, Calendly, Todoist, Context7, Exa, Firecrawl, Hugging Face, Microsoft Learn y cualquier otro servicio a través de un servidor MCP.