Claves de API
Configura las claves de API públicas para los widgets de soporte de Next.js y React.
Consigue tu clave pública
Abre tu panel en Ajustes → Desarrolladores y crea o copia una clave pública.
Configura las variables de entorno
NEXT_PUBLIC_FLUXO_API_KEY=pk_live_xxxxxxxxxxxxEl SDK busca VITE_FLUXO_API_KEY (Vite), NEXT_PUBLIC_FLUXO_API_KEY
(Next.js) o FLUXO_API_KEY cuando tu empaquetador la expone explícitamente
al código del navegador. Create React App, Remix y los empaquetadores
genéricos no exponen automáticamente variables de entorno del servidor, así
que en esos casos pasa publicKey desde su configuración de cliente
documentada.
Claves públicas frente a privadas
| Tipo | Prefijo | Para qué sirve | Segura en el navegador |
|---|---|---|---|
| Pública | pk_live_*, pk_test_* | Integrar el widget | Sí |
| Privada | sk_live_*, sk_test_* | API entre servidores | No |
Usa solo claves públicas en el código del widget en el frontend.
Dominios permitidos
Las claves públicas solo funcionan en los dominios de la lista de permitidos.
- Las claves de producción (
pk_live_*) exigen que el dominio esté en la lista. - Las claves de prueba (
pk_test_*) admiten HTTP en localhost, pero localhost debe seguir estando en los dominios permitidos de la clave. - Permitir un dominio principal permite también sus subdominios.
Usa orígenes completos o dominios a secas, por ejemplo:
example.comhttps://staging.example.comhttp://localhost:3000
Resolución de problemas
Error de configuración en el widget
Comprueba que:
- el nombre de la variable de entorno es el correcto para tu framework
- la clave sigue activa
- has reiniciado la aplicación tras cambiar las variables
Dominio no permitido
Comprueba que:
- el dominio aparece en Ajustes → Desarrolladores → Dominios permitidos
- las claves de producción usan HTTPS
¿Te resultó útil esta página?
Abre una incidencia de documentación ya rellenada para que el equipo pueda actuar.