Vue d’ensemble

Les devis et les factures de Cord dans votre produit, avec React, Vue, des Web Components ou du Vanilla JS.

Qu’est-ce que les Elements ?

Cord Elements est le SDK officiel (@flouviahq/elements) qui vous permet d’intégrer toute l’expérience d’interaction commerciale de Cord directement dans votre propre portail web d’entreprise.

Au lieu d’envoyer le client sur cordhq.app, vos clients peuvent consulter des devis, négocier dans la discussion intégrée, approuver et signer des documents ou payer des factures sans quitter votre marque. Tout se passe de façon sécurisée sous vos propres domaines.

Méthodes d’intégration

Selon votre stack technique, Cord propose trois façons d’utiliser Elements :

1. Le SDK npm (recommandé)

Pour les applications modernes construites avec React, Next.js, Vue ou Nuxt, vous pouvez installer le paquet npm officiel. Ce paquet fournit des composants natifs, des hooks headless (useQuoteBuilder) et des types TypeScript complets.

Installation :

npm install @flouviahq/elements

Consultez nos guides dédiés :

2. Balise script (embed.js)

Pour les sites sans bundler, WordPress ou les architectures historiques, vous pouvez charger l’environnement avec une seule balise script et définir des attributs data- dans votre HTML.

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

Ce script injecte dynamiquement une iframe et ajuste automatiquement sa hauteur pour éviter les doubles barres de défilement.

3. Framer et Webflow

Le SDK exporte aussi des wrappers spécifiques prêts à être collés comme Code Components dans les éditeurs visuels modernes. Consultez la documentation des Web Components pour en savoir plus.

Architecture de sécurité

Cord Elements applique une sécurité de niveau bancaire. Par défaut, votre clé publiable (pk_live_...) exposée dans le frontend ne pourra jamais lire votre annuaire de clients (afin d’éviter toute fuite de données CRM). Pour des fonctionnalités avancées, vous pouvez faire passer le SDK par un proxy backend.

Consultez la section Sécurité CSP pour configurer vos domaines autorisés (allowlist) et prévenir les attaques de clickjacking.