Widget Embed

<div id="kycert-container"></div>
<script src="https://cadastro.kycert.com.br/embed.js"></script>
<script>
  KycertEmbed.init({
    slug:      'minha-corretora',
    container: '#kycert-container',
    height:    640,
    onSubmit: function(data) {
      console.log('Cadastro enviado:', data.status)
    },
  })
</script>

window.addEventListener('message', function(event) {
  if (!event.data || typeof event.data !== 'object') return

  switch (event.data.type) {
    case 'kycert:submitted':
      // Formulário enviado com sucesso
      console.log(event.data.status)   // 'aprovado' | 'em_analise' | 'pendencia'
      console.log(event.data.message)  // mensagem para exibir ao cliente
      break

    case 'kycert:resize':
      // Altura do conteúdo mudou (auto-resize)
      iframe.style.height = event.data.height + 'px'
      break

    case 'kycert:step':
      // Usuário avançou para uma nova etapa
      console.log(event.data.step)     // 1, 2, 3, 4, 5 ou 6
      break
  }
})

{
  "type": "kycert:submitted",
  "status": "em_analise",
  "message": "Suas informações foram recebidas. Em breve você receberá uma resposta."
}

{
  "type": "kycert:resize",
  "height": 840
}

{
  "type": "kycert:step",
  "step": 3
}

import { useEffect, useRef } from 'react'

export function KycertWidget({ slug, onComplete }) {
  const containerRef = useRef(null)
  const embedRef = useRef(null)

  useEffect(() => {
    if (!containerRef.current) return
    embedRef.current = window.KycertEmbed.init({
      slug,
      container: containerRef.current,
      height:    640,
      onSubmit:  onComplete,
    })
    return () => embedRef.current?.destroy()
  }, [slug])

  return <div ref={containerRef} />
}