CORD ELEMENTS
Your quote builder, embedded anywhere.
Bring Cord's quote builder to your clients' portal with one line of code. Your brand, your catalog, approval and online payment — all inside their ecosystem, without leaving their site.
$npm install @flouviahq/elements For B2B companies that already have their own portal but don't want to build —or maintain— a quote builder that negotiates prices, tracks opens, and issues CFDI invoices in Mexico.
ONE LINE OF CODE
Paste. Done. No backend.
A script and a <div>. The quote builder appears with your brand, auto-adjusts its height, and inherits the host page's style.
<!-- 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>WHY ELEMENTS
The complete quote builder, not a toy widget.
allow="payment" attribute). Get paid without redirecting to another tab.postMessage. No scrollbars or empty boxes.frame-ancestors). Only YOU decide which sites can embed it — anti-clickjacking.cord:approved, cord:pay, and more — to trigger your analytics, CRM, or whatever you need.FOR DEVELOPERS
React to every client action.
The container emits CustomEvents on your own <div>. Connect them to your analytics, redirect after approval, or sync your CRM — you keep control on your page.
cord:readythe quote builder loadedcord:approvedthe client approved · detail: folio, tokencord:rejectedthe client rejectedcord:messagecomment or counteroffercord:payonline payment started
document.querySelector('[data-cord-cotizador]')
.addEventListener('cord:approved', (e) => {
// tu cliente aprobó — registra la venta, redirige, etc.
analytics.track('cotizacion_aprobada', e.detail);
});Prefer not to embed? Share the link.
Each quote also lives on its own public page /q/{token} — the exact same builder, zero code. Embedding is for when you want it to live inside your site.