postMessage + Nimble Leads

O Nimble Leads dispara eventos que podem ser ouvidos via postMessage.

---

Exemplo

Segue abaixo um exemplo de como utilizar o postMessage.

<!-- Exemplo postMessage + Nimble -->
<script type="module">
  // A flag para permitir que os dados sejam adicionados apenas uma vez.
  let trigger = false

  // Dados oriundo de outro sistema
  let trigger_data = {
    'segurado:tipo_pessoa': 'FISICA',
    'segurado:inscricao_fiscal': '987.654.321-00',
    'segurado:nome': 'BENEDITA RAMOS DE SOUZA',
    'segurado:sexo': 'FEMININO',
    'segurado:data': '1944-04-28',
    'segurado:estado_civil': 'CASADO',
    'segurado:emails': [
      {
        tipo: 'PESSOAL',
        email: '[email protected]',
      },
    ],
    'segurado:telefones': [
      {
        tipo: 'CELULAR',
        numero: '(11) 999999999',
      },
    ],
  }

  // Função de manipulação do postMessage
  function handlePostMessage(event) {
    const origin = event?.origin ?? event?.originalEvent?.origin ?? ''
    const authorized = new Set([
      'https://seguro.nimble.com.br',
      // coloque aqui o dominio do seu site
    ])

    if (authorized.has(origin) === false) {
      return
    }

    const message = event?.data

    if (message.type === 'nimble-next-ui.preparado') {
      // coloca aqui seu código de tracking/analytics/pixel/etc...
    }

    if (message.type === 'nimble-next-ui.template') {
      // Alimenta o Nimble com dados oriundo de outro sistema
      if(message.data === 'pergunta' && trigger === false) {
        trigger = true
        globalThis['nimble-next-ui'].__store({
          ...globalThis['nimble-next-ui'].__store(),
          ...trigger_data,
        })
      }
    }
  }

  // Escuta postMessage
  globalThis.addEventListener('message', handlePostMessage, false)
</script>

<!-- Widget do Nimble -->
<script
  type="module"
  crossOrigin="anonymous"
  id="nimble_next_js"
  src="https://seguro.nimble.com.br/widget.js?id=nimble_next_js"
  data-target="nimble_next_div"
  data-company="{codigo_da_empresa}"
></script>

<!-- Local onde widget será criado -->
<div id="nimble_next_div"></div>

---

Eventos do Nimble

Eventos que o Nimble envia ao cliente.

Evento	Descrição
nimble-next-ui.preparado	Aplicação pronta para uso
nimble-next-ui.template	Template carregado
nimble-next-ui.form	Retorno do formulário postado

nimble-next-ui.preparado

Campo	Descrição
type	Identificação do evento
data	Hash da cotação no Nimble

nimble-next-ui.template

Campo	Descrição
type	Identificação do evento
data	Nome do template

nimble-next-ui.form

Campo	Descrição
type	Identificação do evento
data	Dados salvos

Dúvidas e sugestões

Envie um email para atendimento@textecnologia.com.br