Overview

Deep B2B integration for React, Vue, Web Components, and Vanilla JS.

What are Elements?

Cord Elements is the official SDK (@flouviahq/elements) that allows you to integrate the entire Cord commercial interaction experience directly into your own corporate web portal.

Instead of sending the client to cordhq.app, your clients can view quotes, negotiate in the internal chat, approve and sign documents, or pay invoices without leaving your brand. Everything happens securely under your own domains.

Integration Methods

Depending on your tech stack, Cord offers three ways to consume Elements:

1. The NPM SDK (Recommended)

For modern applications built in React, Next.js, Vue, or Nuxt, you can install the official NPM package. This package provides native components, headless hooks (useQuoteBuilder), and full TypeScript types.

Installation:

npm install @flouviahq/elements

Explore our specific guides:

• React and Next.js Guide
• Web Components and Vue Guide
• Server SDK and Webhooks Guide

2. Script Tag (embed.js)

For sites without bundlers, WordPress, or legacy architectures, you can load the environment using a single script tag and define data- attributes in your HTML.

<script src="https://cordhq.app/embed.js" async></script>
<div data-cord-token="tok_A1B2C3D4E5"></div>

This script dynamically injects an iframe and automatically adjusts its height to avoid double scrollbars.

3. Framer and Webflow

The SDK also exports specific wrappers ready to be pasted as Code Components in modern visual editors. Check the Web Components documentation for more details.

Security Architecture

Cord Elements uses bank-grade security. By default, your publishable key (pk_live_...) exposed on the frontend will never be able to read your clients directory (to prevent CRM data leaks). If you want advanced features, you can operate the SDK through a backend proxy.

Explore the CSP Security section to configure your allowed domains (allowlist) and prevent Clickjacking attacks.