Visão geral

Orçamentos e faturas do Cord dentro do seu produto, com React, Vue, Web Components ou Vanilla JS.

O que é o Elements?

O Cord Elements é o SDK oficial (@flouviahq/elements) que permite integrar toda a experiência de interação comercial do Cord diretamente no seu próprio portal web corporativo.

Em vez de enviar o cliente para cordhq.app, os seus clientes podem ver orçamentos, negociar no chat interno, aprovar e assinar documentos ou pagar faturas sem sair da sua marca. Tudo acontece com segurança nos seus próprios domínios.

Métodos de integração

Dependendo da sua stack tecnológica, o Cord oferece três maneiras de consumir o Elements:

1. O SDK do NPM (recomendado)

Para aplicações modernas construídas em React, Next.js, Vue ou Nuxt, você pode instalar o pacote oficial do NPM. Esse pacote fornece componentes nativos, hooks headless (useQuoteBuilder) e tipos completos de TypeScript.

Instalação:

npm install @flouviahq/elements

Explore os nossos guias específicos:

2. Tag script (embed.js)

Para sites sem bundlers, WordPress ou arquiteturas legadas, você pode carregar o ambiente com uma única tag script e definir atributos data- no seu HTML.

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

Esse script injeta dinamicamente um iframe e ajusta automaticamente a sua altura para evitar barras de rolagem duplas.

3. Framer e Webflow

O SDK também exporta wrappers específicos, prontos para serem colados como Code Components em editores visuais modernos. Consulte a documentação de Web Components para mais detalhes.

Arquitetura de segurança

O Cord Elements usa segurança de nível bancário. Por padrão, a sua chave publicável (pk_live_...) exposta no frontend nunca poderá ler o seu cadastro de clientes (para evitar vazamentos de dados do CRM). Se você quiser funções avançadas, pode operar o SDK por meio de um backend proxy.

Explore a seção de Segurança CSP para configurar os seus domínios permitidos (allowlist) e evitar ataques de clickjacking.