Web Component SDK v1.0.0

Guia de Integração do SDK Universal

Aprenda a incorporar o Dashboard de Mercado CVM do HubFIDC dentro do seu software, ERP ou intranet corporativa em menos de 5 minutos, com isolamento total de estilos via Shadow DOM.

1. Introdução

O SDK do HubFIDC foi desenhado sobre o padrão nativo W3C de Custom Elements (Web Components). Ao contrário de iframes comuns com URLs estáticas ou bibliotecas pesadas que entram em conflito com o CSS da sua aplicação, a tag <hubfidc-dashboard> encapsula todo o visual em Shadow DOM, garantindo que o dashboard mantenha seu visual perfeito independente de você utilizar Bootstrap, Tailwind, AntDesign ou CSS legado.

2. Instalação & Código de Incorporação

Para renderizar o painel, adicione a tag customizada e carregue nosso script assíncrono:

<!-- 1. Defina o componente no local onde deseja exibir o dashboard -->
<hubfidc-dashboard 
    client-key="hbf_pub_sua_chave_publica_aqui" 
    theme="auto" 
    height="850px">
</hubfidc-dashboard>

<!-- 2. Carregue o script do SDK HubFIDC -->
<script src="https://hubfidc.com.br/dist/js/hubfidc-sdk.js" async></script>

3. Atributos Suportados

Atributo	Tipo	Obrigatório	Descrição
`client-key`	`String`	Sim	Sua chave pública obtida na Área do Assinante (ex: `hbf_pub_...`).
`theme`	`'dark' \| 'light' \| 'auto'`	Não (default: `auto`)	Detecta automaticamente o tema do sistema do cliente ou força modo claro/escuro.
`height`	`String`	Não (default: `850px`)	Altura do componente no layout da sua página (ex: `900px`, `100vh`).

4. Gestão de Conexões Simultâneas (Licenças Flutuantes)

O SDK implementa o modelo de licença flutuante:

Heartbeat Automático: A cada 30 segundos, o SDK envia um ping transparente confirmando a atividade.
Liberação Imediata: Assim que a aba é fechada, a API navigator.sendBeacon libera a vaga instantaneamente para outro colega de equipe.
Teto de Conexões: Ao atingir o limite contratado (1, 5 ou 500 conexões), o componente exibe amigavelmente o status de ocupação total sem quebrar o layout.

5. Exemplo de Integração em React / Vue

Se você utiliza React, Vue ou Angular, pode invocar o SDK de forma programática:

// Exemplo React / Next.js com useEffect
import { useEffect } from 'react';

export default function PainelMercado() {
    useEffect(() => {
        const script = document.createElement('script');
        script.src = 'https://hubfidc.com.br/dist/js/hubfidc-sdk.js';
        script.async = true;
        document.body.appendChild(script);
    }, []);

    return (
        <div style={{ padding: 20 }}>
            <hubfidc-dashboard 
                client-key="hbf_pub_sua_chave" 
                theme="auto" 
                height="850px" 
            />
        </div>
    );
}