Elements · interactive Cord demo

Rather not write code? Share the quote link

Read the guideAdd Elements to your site step by step.Create your accountYour pk_test_ key is in Settings › Developers.

Elements

Components you embed in your site. View docs

More from Elements

What else you can integrate with your account.

Events on your pageListen for approvals, signatures and payments with cord:approved, cord:signed and cord:paid.
Your own interfacecreateQuoteBuilder() gives you the state and the totals engine, with no UI.
From your serverCreate quotes with @flouviahq/node and verify every webhook.
SecurityAllowed domains, CSP with a nonce and restricted keys.

Want the whole flow without writing code?

Open the quote link

Style

A complete starting point. Then change anything you like.

Works inBuilderQuoteTax detailsInvoice

Base theme

LightFlatDarkAutomatic

Color

Your site backgroundNot part of appearance: it is your page.

Brand

colorPrimary

colorOnPrimary

Surfaces

colorBackground

colorSurface

colorBorder

Text

colorText

colorTextSecondary

colorTextPlaceholder

Fields

colorInput

colorInputText

colorInputBorder

colorFocus

States

colorDanger

colorSuccess

Typography

fontFamily

fontSize

fontWeightBold

Shape and spacing

borderRadiusCord's

borderRadiusButtonCord'sPill

borderRadiusInputCord's

spacingCard

Card shadowshadowCard

Rules

CSS per public selector. Cord validates every value and drops the rest.

No rules yet.

Layout

Compactlayout.compactNo conversationlayout.hideChatNo noteslayout.hideNotes

your-site.com/quote

9:41

Request a quote

Builder<CordBuilder>

Review your quote

Quote<cord-quote>

Billing details

Tax details<cord-fiscal-form>

Your invoice

Invoice<cord-invoice>

Drag a component here

or pick one from the panel

Drop to add it

your-site.com

Events

What the components emit shows up here, live.

Your integration

United StatesEnglish
ArgentinaEspañol
BrazilPortuguês
CanadaEnglish
CanadaFrançais
ChileEspañol
ColombiaEspañol
FranceFrançais
GermanyDeutsch
MexicoEspañol
PeruEspañol
SpainEspañol
United KingdomEnglish

Your privacy

We use essential cookies to run Cord. Only if you accept, we measure site usage with PostHog and visits and performance with Vercel. You can change your choice at any time. Cookie policy