Copiar para IA

Web Components e Vue

Componentes independentes de framework para máxima compatibilidade com qualquer arquitetura.

Web Component (Vanilla JS, PHP, Rails)

Se você não usa React nem Vue, ou está integrando o Cord em um site renderizado no servidor (como Laravel, Django ou WordPress), pode usar o Web Component padrão <cord-quote> (<cord-cotizador> continua funcionando como alias).

Este componente é compilado segundo os padrões da plataforma web, o que significa que o navegador o entende de forma nativa, sem necessidade de um bundler.

<!-- Importar o módulo ES -->
<script type="module" src="https://unpkg.com/@flouviahq/elements/dist/index.mjs"></script>

<!-- Renderizar o componente nativo -->
<div style="height: 800px;">
  <cord-quote
    token="9f3b6c2a7e1d4f8b0a5c3e7d1b9f2a46"
    min-height="500">
  </cord-quote>
</div>

<script>
  // Ouvir eventos padrão do DOM
  const quote = document.querySelector('cord-quote');

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

A fatura: <cord-invoice>

<cord-invoice> mostra uma fatura do Cord (a de /i/{token}) no seu site: saldo pendente, status, itens, totais e o download do PDF. O token é o da fatura hospedada, o mesmo que vai no e-mail que o seu cliente recebe.

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

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

O botão de pagamento abre a fatura hospedada em uma janela do Cord: os dados de pagamento nunca são capturados dentro do iframe. Enquanto a fatura continua em aberto, o embed consulta o saldo dela e emite status_changed quando ele muda e paid quando ela é quitada. Com embed.js, adicione data-cord-document="invoice" ao div. Assim como no orçamento, sem domínios permitidos em Configurações › Gerador de orçamentos incorporável os eventos chegam sem dados.

theme, variables e fonts da Appearance API se aplicam à fatura; rules e layout são do orçamento.

Estado em tempo real: state e statechange

<cord-quote> e <cord-invoice> reduzem os eventos do iframe a um estado que você pode ler a qualquer momento com a propriedade state, e emitem statechange sempre que ele muda. Assim você desenha o seu próprio resumo sem ouvir evento por evento.

<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; // igual a 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>

Campo	Conteúdo
ready	O orçamento terminou de ser desenhado.
status	sent, viewed, approved, rejected, paid, expired…
folio, moneda, total	Do documento. O total sempre viaja com a sua moeda.
approved, rejected, paid	Atalhos booleanos. paid também é verdadeiro para um orçamento já faturado.
signedBy	Quem aprovou, se aprovou nesta sessão.
lastEvent	O último evento recebido, por exemplo cord:approved.

Sem domínios permitidos em Configurações › Gerador de orçamentos incorporável, os eventos chegam sem dados e status, folio, moneda e total ficam em null. No React é onStateChange em <CordCotizador>; no Vue, o evento @state.

Estilos: ::part

Os dois elementos vivem em um Shadow DOM: os seus estilos não os quebram e os deles não tocam a sua página. Para personalizá-los de fora:

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;
}

Parte	Elemento
root	O contêiner do elemento.
skeleton	O marcador de carregamento exibido enquanto o documento chega.
frame	O <iframe> com o documento do Cord.

O conteúdo de dentro do iframe é personalizado com a Appearance API (o atributo appearance como JSON, ou a propriedade appearance como objeto), não com o CSS da sua página.

Atributo	Detalhe
token	Obrigatório. O token público do documento.
appearance	Appearance como JSON.
min-height	Altura mínima do iframe em pixels (420 por padrão).
base-url	Origem do Cord, se você usa um domínio próprio.
debug	Ativa a barra de depuração (veja Eventos).

Formulário fiscal

<cord-fiscal-form> captura os dados fiscais do seu cliente com a mesma validação que o Cord usa e se integra aos seus formulários HTML. Veja Formulário fiscal.

Vue e Nuxt

O SDK do Cord fornece um wrapper nativo para Vue 3 que lida com a reatividade e os eventos usando o paradigma do Vue (@ ou v-on).

Instalação

npm install @flouviahq/elements

Uso

Importe o componente <CordCotizador> a partir do entrypoint /vue e passe-o para o seu 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

Se você está construindo o seu site no Framer, pode adicionar o Cord Elements como um Code Component de arrastar e soltar.

Crie um novo componente de código no Framer e cole o seguinte:

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

Isso registra os controles de propriedades na interface visual do Framer (Property Controls), expondo o campo Token no painel direito para que os seus designers possam modificá-lo visualmente sem tocar no código.

Webflow

Ao contrário do Framer (um Code Component de React real), o Webflow não executa componentes React — por isso o SDK expõe um entrypoint separado (@flouviahq/elements/webflow) pensado para o editor visual do Webflow: um script de inicialização automática que não exige escrever código, apenas atributos personalizados.

1. No Webflow, adicione um Div Block onde você quer que o gerador de orçamentos apareça.
2. No painel Settings do elemento, adicione um Custom Attribute: data-cord-token com o token do seu orçamento como valor. (Opcionalmente, data-cord-base-url se você usa um domínio próprio, e data-cord-min-height para a altura mínima do iframe.)
3. Em Page Settings › Custom Code (ou nas configurações do site, se quiser que se aplique a todas as páginas), adicione este script antes de </body>:

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

O script encontra automaticamente todos os elementos com data-cord-token na página (ao carregar, e de novo se o Webflow adicioná-los depois) e monta o gerador de orçamentos neles — ele não expõe eventos JS próprios como o Web Component nativo; para isso, use <cord-cotizador> diretamente ou o Code Component do Framer.