Tu cotizador, en cualquier sitio.

Lleva el cotizador de Cord al portal de tus clientes con una línea de código. Tu marca, tu catálogo, aprobación y pago en línea — todo dentro de su ecosistema, sin que salgan de su web.

Empezar gratis Ver el código

Signup gratis. En el plan Gratis el link público lleva el discreto "vía Cord"; lo quitas y dejas solo tu marca desde Ajustes › Developers, donde también defines la allowlist de dominios autorizados para embeber.

$npm install @flouviahq/elements

Disponible en npm · @flouviahq/elements · v1.0.0

portal.tucliente.com/cotizacion en vivo
▲ Cotizador de Cord, embebido en vivo

Para empresas B2B que ya tienen su propio portal pero no quieren construir —ni mantener— un cotizador que negocie precios, dé seguimiento y facture automáticamente (CFDI para negocios en México).

Pegar. Listo. Sin backend.

Un script y un <div>. El cotizador aparece con tu marca, se ajusta solo a la altura del contenido y hereda el estilo de la página anfitriona — o ve 100% headless y construye tu propia interfaz sobre nuestro estado.

01
Pega el snippetEn la página donde quieras el cotizador. Funciona en cualquier stack: WordPress, React, Webflow, HTML plano.
02
Aparece con tu marcaColor, logo y datos fiscales salen de tu cuenta de Cord. Cero configuración extra en el sitio anfitrión.
03
Tu cliente aprueba y pagaAprobación, contraoferta y pago en línea — sin salir del portal. Tú recibes el evento en tiempo real.
index.html
1<!-- En cualquier sitio HTML -->
2<script src="https://cordhq.app/embed.js" async></script>
3<div data-cord-token="abc123"></div>

UNA LÍNEA DE CÓDIGO

Pegar. Listo. Sin backend.

Un script y un <div>. El cotizador aparece como un <iframe> servido por Cord, muestra un skeleton mientras carga y se ajusta solo a la altura del contenido vía postMessage. No hay servidor que mantener ni datos que sincronizar: el token público de la cotización es todo lo que necesitas.

  • Funciona en cualquier stack: WordPress, HTML plano, lo que sea
  • Altura automática — el embed mide su contenido y le avisa a tu página
  • Skeleton con shimmer mientras carga y fade-in al estar listo: nada de cajas vacías
index.html Altura automática
<script src="…/embed.js"></script> <div data-cord-token="…">
Cotización lista$196,469.20
Una línea de códigoiframe seguro

NATIVO EN TU FRAMEWORK

Un paquete de npm. Tipado, tematizable y headless si quieres.

Instala @flouviahq/elements 1.0 y úsalo como un componente más. En React importas <CordCotizador> con callbacks tipados; en Vue, Astro, Svelte o HTML usas el Web Component <cord-cotizador>. Los tipos de TypeScript se generan del build real (no se escriben a mano), así que nunca divergen del SDK. Y si prefieres construir tu propia interfaz, el hook useQuoteBuilder() te da el estado del cotizador sin una sola línea de nuestra UI.

  • import { CordCotizador } from '@flouviahq/elements/react'
  • Web Component <cord-cotizador token="…"> para Vue, Astro, Svelte y HTML — también SDKs para Framer y Webflow
  • Appearance API real: tematiza el iframe (color, fuente, radios) o pasa appearance.baseTheme:"none" para 100% headless
@flouviahq/elements v1.0.0
HTMLReactWeb Component
<script src="…/embed.js">
npm i @flouviahq/elementsReact · Vue · Astro

TU MARCA · SEGURO POR DISEÑO

El cotizador completo, no un widget de juguete.

Dentro del embed va el mismo cotizador de tu cuenta: tu color, tu logo y tus datos, calculados por el MISMO motor que usa el resto de Cord (nunca un total que diverja). El cliente aprueba, rechaza, negocia el precio o paga sin salir de su portal, y tú controlas el acceso con llaves separadas: una pública (pk_, solo para crear cotizaciones y leer catálogo) para el navegador, y una secreta (sk_) para tu backend — más la allowlist de dominios (CSP frame-ancestors) que blinda contra clickjacking.

  • Llaves pk_ (públicas, de scope acotado) y sk_ (secretas) — nunca expongas tu CRM completo en el navegador
  • Aprobación, contraoferta, chat, firma legal SHA-256 y pago en línea, todos embebidos
  • Allowlist de dominios por cuenta: solo tú decides dónde puede vivir
portal.tucliente.com frame-ancestors
MVTu cotizaciónRevisar
Cemento gris 50kg × 120$21,840.00
Total con IVA$196,469.20
Aprobar cotización
cord:approved · COT-0148Evento nativo

POR QUÉ ELEMENTS

El cotizador completo, no un widget de juguete.

Tu marca, no la nuestraColor, logo y razón social de tu cuenta. El cliente ve TU negocio, no a Cord (salvo el discreto "vía Cord" del plan gratis).
Aprobación y contraofertaEl cliente aprueba, rechaza o negocia el precio sin salir de su portal. El chat de la cotización viaja embebido.
Pago en línea integradoCheckout con tarjeta y SPEI dentro del iframe (atributo allow="payment"). Cobras sin redirigir a otra pestaña.
Altura automáticaEl embed mide su contenido y le avisa a tu página vía postMessage. Nada de barras de scroll ni cajas vacías.
Seguro por diseñoAllowlist de dominios por cuenta (CSP frame-ancestors) y llaves públicas pk_ de scope acotado — solo TÚ decides en qué sitios puede embeberse y qué puede tocar una llave expuesta en el navegador.
Eventos en tiempo realTu sitio escucha cord:approved, cord:pay y más — para disparar tu analítica, CRM o lo que sea.
Aprobación con validez legalCada aprobación queda firmada con un hash SHA-256, IP y fecha — con un sello de confianza visible en la misma cotización. En México, además queda lista para timbrarse con CFDI 4.0.
SDK tipado, o 100% headlessUsa el cotizador tal cual, o descártalo por completo y construye tu propia interfaz con useQuoteBuilder() — tipos de TypeScript generados del código real, no escritos a mano.
Mismo motor que la appTotales e impuestos corren por el MISMO engine.ts que usa el resto de Cord — el total que muestra tu embed jamás diverge del de tu cuenta.
Server SDK + webhooks verificados@flouviahq/elements/server para Node: lee los mismos datos desde tu backend y verifica firmas de webhooks con constructEvent — sin implementar HMAC a mano.
Eventos · cord-cotizador 5 en vivo
readyiframe montado
approvedCOT-0148
messagenuevo comentario
paycheckout listo
Mismos 5 en todos los SDKsUn solo contrato
types/index.d.ts Generado 
export interface CordCotizadorProps {
  token: string;
  onApproved?: (d: QuoteEvent) => void;
  onPay?: () => void;
}
Del build real, no a manoNunca desincronizado

DETALLES QUE IMPORTAN

Lo fino, resuelto de fábrica

ready, approved, rejected, message y pay — los mismos en el iframe, el Web Component y el hook de React.

Salen del build real del SDK — si algo cambia, tu editor lo refleja al instante, sin un .d.ts desincronizado.

El postMessage de eventos se dirige al origen exacto de tu allowlist, no a cualquier ventana que esté escuchando.

¿Prefieres no embeber? Comparte el link.

Cada cotización vive también en su propia página pública /q/{token} — el mismo cotizador, sin tocar código. El embed es para cuando quieres que viva dentro de tu sitio.

Ver una cotización real ↗

PREGUNTAS FRECUENTES

Lo que preguntan los developers sobre Elements.

No. Es un iframe embebido (o el paquete @flouviahq/elements para React/Vue/Web Component) que habla directo con Cord — pegas el snippet y no necesitas servidor adicional. Si sí tienes backend, el Server SDK (@flouviahq/elements/server) te da acceso a los mismos datos y a webhooks verificados con firma HMAC.

Sí. El hook useQuoteBuilder() expone todo el estado del cotizador (líneas, totales, cliente, envío) sin renderizar nuestra UI — construyes tu propia interfaz con tus componentes y solo usas la lógica.

Sí, generados directo del código fuente del build (no escritos a mano) — si un tipo cambia en el SDK, tu editor lo refleja de inmediato, sin que el paquete y sus .d.ts se desincronicen.

Sí, desde un plan de pago puedes quitar el "vía Cord" y dejar solo tu marca desde Ajustes › Developers. En el plan Gratis se muestra ese aviso discreto.

El Web Component funciona en cualquier HTML, Astro o Vue; hay un wrapper nativo de React (@flouviahq/elements/react), SDKs para Framer y Webflow, y un loader de una línea (embed.js) para WordPress o sitios sin framework.

API REST API REST Cord deja de ser solo una pantalla para humanos y se convierte en un sistema con el que tus otros sistemas pueden hablar.

EMPIEZA HOY

Lleva tu cotizador
a donde están tus clientes.

Crea tu cuenta gratis y embebe tu primer cotizador hoy mismo.

Empezar gratis

Sin tarjeta · Plan gratis para siempre