Copier pour l’IA

Web Components et Vue

Des composants indépendants du framework, pour une compatibilité maximale avec toute architecture.

Web Component (Vanilla JS, PHP, Rails)

Si vous n’utilisez ni React ni Vue, ou si vous intégrez Cord dans un site rendu côté serveur (comme Laravel, Django ou WordPress), vous pouvez utiliser le Web Component standard <cord-quote> (<cord-cotizador> fonctionne toujours comme alias).

Ce composant est compilé selon les standards de la plateforme web : le navigateur le comprend donc nativement, sans bundler.

<!-- Importer le module ES -->
<script type="module" src="https://unpkg.com/@flouviahq/elements/dist/index.mjs"></script>

<!-- Afficher le composant natif -->
<div style="height: 800px;">
  <cord-quote
    token="9f3b6c2a7e1d4f8b0a5c3e7d1b9f2a46"
    min-height="500">
  </cord-quote>
</div>

<script>
  // Écouter les événements DOM standard
  const quote = document.querySelector('cord-quote');

  quote.addEventListener('approved', (e) => {
    console.log('Approved by', e.detail.signed_by);
  });
</script>

La facture : <cord-invoice>

<cord-invoice> affiche une facture de Cord (celle de /i/{token}) sur votre site : reste à payer, statut, lignes, totaux et téléchargement du PDF. Le jeton est celui de la facture hébergée, le même que celui de l’e-mail que reçoit votre client.

<cord-invoice token="INVOICE_TOKEN"></cord-invoice>

<script>
  document.querySelector('cord-invoice').addEventListener('paid', (e) => {
    console.log('Invoice paid', e.detail.folio);
  });
</script>

Le bouton de paiement ouvre la facture hébergée dans une fenêtre Cord : les données de paiement ne sont jamais saisies dans l’iframe. Tant que la facture reste ouverte, l’intégration consulte son solde et émet status_changed lorsqu’il change, puis paid lorsqu’elle est soldée. Avec embed.js, ajoutez data-cord-document="invoice" au div. Comme pour le devis, sans domaines autorisés dans Paramètres › Générateur de devis intégrable, les événements arrivent sans données.

theme, variables et fonts de l’API Appearance s’appliquent à la facture ; rules et layout sont propres au devis.

État en direct : state et statechange

<cord-quote> et <cord-invoice> réduisent les événements de l’iframe à un état que vous pouvez lire à tout moment via la propriété state, et émettent statechange chaque fois qu’il change. Vous dessinez ainsi votre propre récapitulatif sans écouter les événements un par un.

<cord-quote token="9f3b6c2a7e1d4f8b0a5c3e7d1b9f2a46"></cord-quote>
<p id="summary"></p>

<script type="module">
  const quote = document.querySelector('cord-quote');
  const summary = document.querySelector('#summary');

  quote.addEventListener('statechange', (e) => {
    const s = e.detail; // identique à quote.state
    if (!s.ready) return;
    const total = s.total === null ? '' : new Intl.NumberFormat('en-US', { style: 'currency', currency: s.moneda }).format(s.total);
    summary.textContent = `${s.folio ?? ''} ${s.status ?? ''} ${total}`;
    if (s.paid) summary.textContent += ' · paid';
  });
</script>

Champ	Contenu
ready	Le devis a terminé son rendu.
status	sent, viewed, approved, rejected, paid, expired…
folio, moneda, total	Issus du document. Le total est toujours accompagné de sa devise.
approved, rejected, paid	Raccourcis booléens. paid est aussi vrai pour un devis déjà facturé.
signedBy	La personne qui a approuvé, si elle l’a fait pendant cette session.
lastEvent	Le dernier événement reçu, par exemple cord:approved.

Sans domaines autorisés dans Paramètres › Générateur de devis intégrable, les événements arrivent sans données et status, folio, moneda et total restent à null. En React, c’est onStateChange sur <CordCotizador> ; en Vue, l’événement @state.

Styles : ::part

Les deux éléments vivent dans un Shadow DOM : vos styles ne les cassent pas et les leurs ne touchent pas votre page. Pour les personnaliser depuis l’extérieur :

cord-quote::part(frame) {
  border-radius: 24px;
  box-shadow: 0 12px 40px rgba(10, 25, 47, 0.08);
}

cord-quote::part(skeleton) {
  border-radius: 24px;
}

Partie	Élément
root	Le conteneur de l’élément.
skeleton	L’indicateur de chargement affiché pendant l’arrivée du document.
frame	L’<iframe> contenant le document de Cord.

Le contenu de l’iframe se personnalise avec l’API Appearance (attribut appearance en JSON, ou propriété appearance sous forme d’objet), et non avec le CSS de votre page.

Attribut	Détail
token	Obligatoire. Le jeton public du document.
appearance	L’apparence en JSON.
min-height	Hauteur minimale de l’iframe en pixels (420 par défaut).
base-url	L’origine de Cord, si vous utilisez un domaine personnalisé.
debug	Active la barre de débogage (voir Événements).

Formulaire fiscal

<cord-fiscal-form> saisit les informations fiscales de votre client avec la même validation que Cord et s’intègre à vos formulaires HTML. Voir Formulaire fiscal.

Vue et Nuxt

Le SDK de Cord fournit un wrapper natif pour Vue 3 qui gère la réactivité et les événements selon le paradigme de Vue (@ ou v-on).

Installation

npm install @flouviahq/elements

Utilisation

Importez le composant <CordCotizador> depuis le point d’entrée /vue et placez-le dans votre template.

<script setup>
import { CordCotizador } from '@flouviahq/elements/vue';
import { ref } from 'vue';

const myToken = ref('9f3b6c2a7e1d4f8b0a5c3e7d1b9f2a46');

function handleApproved(detail) {
  console.log('The client signed:', detail.signed_by);
}

function handlePay(detail) {
  window.location.href = detail.url;
}
</script>

<template>
  <main class="quote-container">
    <CordCotizador
      :token="myToken"
      @approved="handleApproved"
      @pay="handlePay"
    />
  </main>
</template>

Framer

Si vous construisez votre site web avec Framer, vous pouvez ajouter Cord Elements sous forme de Code Component à glisser-déposer.

Créez un nouveau composant de code dans Framer et collez ce qui suit :

import { FramerCordCotizador } from '@flouviahq/elements/framer';
export default FramerCordCotizador;

Cela enregistre les contrôles de propriétés dans l’interface visuelle de Framer (Property Controls) et expose le champ Token dans le panneau de droite, pour que vos designers puissent le modifier visuellement sans toucher au code.

Webflow

Contrairement à Framer (un véritable Code Component React), Webflow n’exécute pas de composants React — c’est pourquoi le SDK expose un point d’entrée distinct (@flouviahq/elements/webflow) conçu pour l’éditeur visuel de Webflow : un script à initialisation automatique qui ne demande aucun code, seulement des attributs personnalisés.

1. Dans Webflow, ajoutez un Div Block là où vous voulez faire apparaître le devis.
2. Dans le panneau Settings de l’élément, ajoutez un Custom Attribute : data-cord-token avec le jeton de votre devis comme valeur. (Facultativement, data-cord-base-url si vous utilisez un domaine personnalisé, et data-cord-min-height pour la hauteur minimale de l’iframe.)
3. Dans Page Settings › Custom Code (ou dans les paramètres du site si vous voulez qu’il s’applique à toutes les pages), ajoutez ce script avant </body> :

<script src="https://unpkg.com/@flouviahq/elements/dist/webflow.js"></script>

Le script trouve automatiquement tous les éléments dotés de data-cord-token sur la page (au chargement, puis à nouveau si Webflow en ajoute ensuite) et y monte le devis — il n’expose pas ses propres événements JS comme le fait le Web Component natif ; pour cela, utilisez directement <cord-cotizador> ou le Code Component de Framer.