Resumen
Integración profunda B2B para React, Vue, Web Components y Vanilla JS.
¿Qué son los Elements?
Cord Elements es el SDK oficial (@flouviahq/elements) que te permite integrar toda la experiencia de interacción comercial de Cord directamente en tu propio portal web corporativo.
En lugar de enviar al cliente a cordhq.app, tus clientes pueden ver cotizaciones, negociar en el chat interno, aprobar y firmar documentos, o pagar facturas sin abandonar tu marca. Todo ocurre de forma segura bajo tus propios dominios.
Métodos de Integración
Dependiendo de tu stack tecnológico, Cord ofrece tres maneras de consumir Elements:
1. El SDK de NPM (Recomendado)
Para aplicaciones modernas construidas en React, Next.js, Vue, o Nuxt, puedes instalar el paquete oficial de NPM. Este paquete provee componentes nativos, hooks (useQuoteBuilder) y tipos completos de TypeScript.
Instalación:
npm install @flouviahq/elementsExplora nuestras guías específicas:
2. Etiqueta Script (embed.js)
Para sitios sin bundlers, WordPress, o arquitecturas legacy, puedes cargar el entorno usando una sola etiqueta script y definir atributos data- en tu HTML.
<script src="https://cordhq.app/embed.js" async></script>
<div data-cord-token="tok_A1B2C3D4E5"></div>Este script se encarga de inyectar dinámicamente un iframe y ajustar automáticamente su altura para evitar barras de desplazamiento.
3. Framer y Webflow
El SDK también exporta wrappers específicos listos para ser pegados como Code Components en editores visuales modernos. Revisa la documentación de Web Components para más detalles.
Arquitectura de Seguridad
Cord Elements utiliza seguridad de grado bancario. Por defecto, tu clave publicable (pk_live_...) expuesta en el frontend nunca podrá leer el directorio de tus clientes (para evitar fugas de datos de CRM). Si deseas funciones avanzadas, puedes operar el SDK a través de un backend proxy.
Explora la sección de Seguridad CSP para configurar tus dominios permitidos (allowlist) y evitar ataques de Clickjacking.