CORD ELEMENTS
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.
$npm install @flouviahq/elements Para empresas B2B que ya tienen su propio portal pero no quieren construir —ni mantener— un cotizador que negocie precios, dé seguimiento y timbre CFDI en México.
UNA LÍNEA DE CÓDIGO
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.
<!-- En cualquier sitio HTML -->
<script src="https://cord.flouvia.com/embed.js" async></script>
<div data-cord-cotizador data-token="abc123"></div>// npm install @flouviahq/elements
import { CordCotizador } from '@flouviahq/elements/react';
export function Cotizacion({ token }) {
return (
<CordCotizador
token={token}
onApproved={(d) => console.log('Aprobada', d.folio)}
onPay={() => location.assign('/gracias')}
/>
);
}'use client';
// npm install @flouviahq/elements
import { CordCotizador } from '@flouviahq/elements/react';
export default function Cotizacion() {
return (
<CordCotizador
token="abc123"
onApproved={(d) => console.log('Aprobada', d.folio)}
/>
);
}---
// npm install @flouviahq/elements
const { token } = Astro.props;
---
<cord-cotizador token={token}></cord-cotizador>
<script>
import '@flouviahq/elements'; // registra <cord-cotizador>
</script><script setup>
// npm install @flouviahq/elements
import '@flouviahq/elements'; // registra <cord-cotizador>
defineProps({ token: String });
</script>
<template>
<cord-cotizador :token="token" @approved="onApproved" />
</template><!-- Pega esto en un bloque "HTML personalizado" -->
<script src="https://cord.flouvia.com/embed.js" async></script>
<div data-cord-cotizador data-token="abc123"></div>POR QUÉ ELEMENTS
El cotizador completo, no un widget de juguete.
allow="payment"). Cobras sin redirigir a otra pestaña.postMessage. Nada de barras de scroll ni cajas vacías.frame-ancestors). Solo TÚ decides en qué sitios puede embeberse — anti-clickjacking.cord:approved, cord:pay y más — para disparar tu analítica, CRM o lo que sea.PARA DESARROLLADORES
Reacciona a cada acción del cliente.
El contenedor emite CustomEvents sobre tu propio <div>. Conéctalos a tu analítica, redirige tras la aprobación o sincroniza tu CRM — el control queda en tu página.
cord:readyel cotizador cargócord:approvedel cliente aprobó · detail: folio, tokencord:rejectedel cliente rechazócord:messagecomentario o contraofertacord:payinició el pago en línea
document.querySelector('[data-cord-cotizador]')
.addEventListener('cord:approved', (e) => {
// tu cliente aprobó — registra la venta, redirige, etc.
analytics.track('cotizacion_aprobada', e.detail);
});¿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.