Dimensões

O evento neppo-expand-chat é disparado automaticamente pelo Chat Embarcado Neppo sempre que ocorre uma alteração no tamanho (largura) do componente de chat exibido no ambiente do parceiro.

Esse evento tem como objetivo permitir que sistemas externos ajustem dinamicamente os layouts (como iFrames, containers ou modais) de acordo com o tamanho atual do chat, garantindo uma experiência de interface consistente.

Estrutura do evento

Nome do evento

neppo-expand-chat

Indica uma mudança no tamanho do chat embarcado, enviando o novo estado como payload no evento.

Payload

{
  "size": "small" | "medium" | "large"
}

Dimensões correspondentes

Como escutar o evento

Os parceiros que consomem o chat embarcado devem implementar um listener para capturar o evento e tratar o payload recebido.
Abaixo um exemplo prático em JavaScript:

iframe.contentWindow.addEventListener('neppo-expand-chat', (msg: any) => {
  const
    
  switch (size) {
    case 'small':
      console.log('Chat reduzido para 400px');
      break;
    case 'medium':
      console.log('Chat ajustado para 480px');
      break;
    case 'large':
      console.log('Chat expandido para 560px');
      break;
    default:
      console.warn('Tamanho de chat não reconhecido:', size);
  }
});

Exemplo de comportamento esperado

1. O usuário clica no botão de expansão do chat.

2. O Chat Embarcado altera sua largura de 400px para 560px.

3. O evento neppo-expand-chat é disparado com o payload:

   { "size": "large" }

4. O sistema parceiro (por exemplo, o CRM) escuta o evento e ajusta automaticamente o container onde o chat está renderizado.

Observações importantes

• A largura inicial do chat é 400px (small).

• Caso o listener não esteja implementado, o layout do sistema parceiro não será ajustado automaticamente.

• Este evento não substitui o controle visual do chat, apenas comunica mudanças de estado.

• A comunicação é feita via eventListener para o contexto da janela que contém o chat embarcado.