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.

Start for free View code

$npm install @flouviahq/elements

Available on npm · @flouviahq/elements

portal.tucliente.com/cotizacion live

▲ Cord Quote Builder, embedded live

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>

01 Paste the snippet On the page where you want the quote builder. Works on any stack: WordPress, React, Webflow, plain HTML.

02 Appears with your brand Color, logo, and tax details come from your Cord account. Zero extra setup on the host site.

03 Your client approves and pays Approval, counteroffers, and online payment — without leaving the portal. You receive the event in real time.

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.html Altura automática

Cotización lista$196,469.20

Una línea de códigoiframe seguro

NATIVE IN YOUR FRAMEWORK

An npm package. React or Web Component.

Install @flouviahq/elements and use it like any other component. In React you import <CordCotizador> with typed callbacks; in Vue, Astro, or HTML you use the <cord-cotizador> Web Component, which re-emits events as native, un-prefixed CustomEvents. Same iframe underneath, the integration your team prefers.

import { CordCotizador } from '@flouviahq/elements/react'
Web Component for Vue, Astro, Svelte, and HTML
Typed callbacks: onApproved, onRejected, onMessage, onPay, and onReady

@flouviahq/elements v0.2.0

HTMLReactWeb Component

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. The client approves, rejects, negotiates the price, or pays with Stripe without leaving their portal, and you decide which domains can embed it with a per-account allowlist (CSP frame-ancestors) that shields against clickjacking.

Your brand, not ours — color, logo, and details from your Cord account
Approval, counteroffer, chat, and online payment, all embedded
Domain allowlist per account: only you decide where it can live

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

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 paymentStripe 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). Only YOU decide which sites can embed it — anti-clickjacking.

Real-time eventsYour site listens to 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 loaded
cord:approvedthe client approved · detail: folio, token
cord:rejectedthe client rejected
cord:messagecomment or counteroffer
cord:payonline payment started

app.jslistener

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.

View a real quote ↗

FREQUENTLY ASKED QUESTIONS

What developers ask about Elements.

Does Cord Elements require me to run my own backend?

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.

Can I remove the "via Cord" branding from the embedded quoter?

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.

What framework does Cord Elements work with?

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

Your quote builder, embedded anywhere.

Paste. Done. No backend.

Paste. Done. No backend.

An npm package. React or Web Component.

The full quoter, not a toy widget.

The complete quote builder, not a toy widget.

React to every client action.

Prefer not to embed? Share the link.

What developers ask about Elements.

Bring your quote builderto where your clients are.

Bring your quote builder
to where your clients are.