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.

Start for freeView code

Free signup. On the Free plan, the public link carries a discreet "via Cord"; you can remove it and leave only your brand from Settings › Developers, where you also define the allowlist of domains authorized to embed.

$npm install @flouviahq/elements

Available on npm · @flouviahq/elements · v1.0.0

portal.tucliente.com/cotizacionlive
▲ Cord Quote Builder, embedded live

For 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 invoices (CFDI e-invoicing for Mexico).

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 — or go fully headless and build your own UI on top of our state.

01
Paste the snippetOn the page where you want the quote builder. Works on any stack: WordPress, React, Webflow, plain HTML.
02
Appears with your brandColor, logo, and tax details come from your Cord account. Zero extra setup on the host site.
03
Your client approves and paysApproval, counteroffers, and online payment — without leaving the portal. You receive the event in real time.
index.html
1<!-- En cualquier sitio HTML -->
2<script src="https://cordhq.app/embed.js" async></script>
3<div data-cord-token="abc123"></div>

ONE LINE OF CODE

Paste. Done. No backend.

A script and a <div>. The quoter appears as an <iframe> served by Cord, shows a skeleton while loading, and automatically adjusts its height to the content via postMessage. There's no server to maintain or data to sync: the quote's public token is all you need.

  • Works on any stack: WordPress, plain HTML, whatever
  • Auto-height — the embed measures its content and notifies your page
  • Skeleton with shimmer while loading and fade-in when ready: no empty boxes
index.htmlAltura automática
<script src="…/embed.js"></script><div data-cord-token="…">
Cotización lista$196,469.20
Una línea de códigoiframe seguro

NATIVE IN YOUR FRAMEWORK

An npm package. Typed, themeable, headless if you want.

Install @flouviahq/elements 1.0 and use it like any other component. In React you import <CordCotizador> with typed callbacks; in Vue, Astro, Svelte, or HTML you use the <cord-cotizador> Web Component. TypeScript types are generated straight from the real build (never hand-written), so they never drift from the SDK. And if you'd rather build your own interface, the useQuoteBuilder() hook gives you the quoter's state without a single line of our UI.

  • import { CordCotizador } from '@flouviahq/elements/react'
  • Web Component <cord-cotizador token="…"> for Vue, Astro, Svelte, and HTML — plus SDKs for Framer and Webflow
  • Real Appearance API: theme the iframe (color, font, radii), or pass appearance.baseTheme:"none" to go fully headless
@flouviahq/elementsv1.0.0
HTMLReactWeb Component
<script src="…/embed.js">
npm i @flouviahq/elementsReact · Vue · Astro

YOUR BRAND · SECURE BY DESIGN

The full quoter, not a toy widget.

Inside the embed is the exact same quoter from your account: your color, your logo, and your details, computed by the SAME engine the rest of Cord uses (never a total that drifts). The client approves, rejects, negotiates the price, or pays without leaving their portal, and you control access with separate keys: a publishable one (pk_, scoped to creating quotes and reading the catalog) for the browser, and a secret one (sk_) for your backend — plus the domain allowlist (CSP frame-ancestors) that shields against clickjacking.

  • pk_ publishable keys (narrow scope) and sk_ secret keys — never expose your full CRM in the browser
  • Approval, counteroffer, chat, SHA-256 legal signature, and online payment, all embedded
  • Domain allowlist per account: only you decide where it can live
portal.tucliente.comframe-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

WHY ELEMENTS

The complete quote builder, not a toy widget.

Your brand, not oursColor, logo, and business name from your account. The client sees YOUR business, not Cord (except for the discreet "via Cord" on the free plan).
Approval and counteroffersThe client approves, rejects, or negotiates the price without leaving their portal. The quote chat is also embedded.
Integrated online paymentCard and SPEI checkout inside the iframe (allow="payment" attribute). Get paid without redirecting to another tab.
Automatic heightThe embed measures its content and notifies your page via postMessage. No scrollbars or empty boxes.
Secure by designDomain allowlist per account (CSP frame-ancestors) plus scoped pk_ publishable keys — only YOU decide which sites can embed it and what a browser-exposed key can touch.
Real-time eventsYour site listens to cord:approved, cord:pay, and more — to trigger your analytics, CRM, or whatever you need.
Legally verifiable approvalEvery approval is signed with a SHA-256 hash, IP, and timestamp — with a visible trust seal on the quote itself. In Mexico, it's also ready for CFDI 4.0 stamping.
Typed SDK, or fully headlessUse the quote builder as-is, or drop it entirely and build your own UI with useQuoteBuilder() — TypeScript types generated from the real code, not hand-written.
Same engine as the appTotals and taxes run through the exact same engine.ts the rest of Cord uses — the total your embed shows can never drift from the one in your account.
Server SDK + verified webhooks@flouviahq/elements/server for Node: read the same data from your backend and verify webhook signatures with constructEvent — no need to implement HMAC yourself.
Eventos · cord-cotizador5 en vivo
readyiframe montado
approvedCOT-0148
messagenuevo comentario
paycheckout listo
Mismos 5 en todos los SDKsUn solo contrato
types/index.d.tsGenerado
export interface CordCotizadorProps {
  token: string;
  onApproved?: (d: QuoteEvent) => void;
  onPay?: () => void;
}
Del build real, no a manoNunca desincronizado

DETAILS THAT MATTER

The fine print, handled for you

ready, approved, rejected, message, and pay — the same in the iframe, the Web Component, and the React hook.

They come straight from the SDK's real build — if something changes, your editor reflects it instantly, no drifting .d.ts.

Event postMessages target the exact origin from your allowlist — not just any window that happens to be listening.

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.

View a real quote ↗

FREQUENTLY ASKED QUESTIONS

What developers ask about Elements.

No. It's an embedded iframe (or the @flouviahq/elements package for React/Vue/Web Component) that talks directly to Cord — you paste the snippet and need no extra server. If you do have a backend, the Server SDK (@flouviahq/elements/server) gives you the same data plus webhooks verified with an HMAC signature.

Yes. The useQuoteBuilder() hook exposes the quoter's full state (line items, totals, client, submission) without rendering our UI — you build your own interface with your own components and just consume the logic.

Yes, generated straight from the build's source code (never hand-written) — when a type changes in the SDK, your editor reflects it immediately, with no risk of the package and its .d.ts files drifting apart.

Yes, on a paid plan you can remove the "via Cord" notice and leave only your brand from Settings › Developers. The Free plan shows that discreet notice.

The Web Component works in any HTML, Astro, or Vue site; there's a native React wrapper (@flouviahq/elements/react), SDKs for Framer and Webflow, and a one-line loader (embed.js) for WordPress or framework-less sites.

REST APIREST APICord stops being just a screen for humans and becomes a system your other systems can talk to.

START TODAY

Bring your quote builder
to where your clients are.

Create your free account and embed your first quote builder today.

Start for free

No credit card required · Free plan forever