📓 Manual Interno 05: Integração do Widget de Webchat & Atendimento Online Nvoip

🛡️ Sentinel Status

  • Classificação: Manual de Frontend & Experiência do Usuário (CX)
  • Componente: Widget Webchat Nvoip / Maisim Live Chat
  • Alvos: Portais Web, Jekyll Themes, Landing Pages, Páginas de Suporte
  • Arquivo de Referência no Repositório: D:\artesdosul\artesdosul\_includes\my-head.nvoip.html

1. Visão Geral do Webchat Nvoip

O widget de chat da Nvoip permite que os visitantes do website conversem diretamente com a equipe de atendimento através de uma janela flutuante leve e responsiva, direcionando mensagens para o painel de atendimento unificado da Nvoip ou para operadores de PABX.

2. Código Oficial de Integração

O script deve ser inserido preferencialmente antes do fechamento da tag </head> ou antes de </body>, de forma não bloqueante (async):

2.1. Implementação Padrão Nvoip Core (CDN AWS S3)

<script>
(function(window, document, tag, src, id) {
    window.addEventListener("load", function () {
        window.top.chatNvoip || (function () {
            var el = document.createElement(tag);
            var first = document.getElementsByTagName(tag)[0];
            el.async = true;
            el.src = src;
            el.id = id || "chatNvoip";
            el.charset = "utf-8";
            first.parentNode.insertBefore(el, first);
        })();
    });
})(window, document, "script", "https://nvoipcom.s3.sa-east-1.amazonaws.com/public/testEmbed/faleConosco/embed.js");
</script>

2.2. Implementação com Token de Canal Dedicado (Maisim Engine)

Para contas empresariais onde o chat está vinculado a um departamento específico configurado no painel da Nvoip:

<script>
(function(m, a, i, s, _i, _m) {
    m.addEventListener("load", function() {
        m.top.maisim || (function() {
            _m = a.createElement(i);
            i = a.getElementsByTagName(i)[0];
            _m.async = !0;
            _m.src = s;
            _m.id = "maisim";
            _m.charset = "utf-8";
            _m.setAttribute("data-token", _i);
            i.parentNode.insertBefore(_m, i);
        })();
    });
})(window, document, "script", "https://chat.nvoip.com.br/support/assets/js/core/embed.js", "SEU_TOKEN_DE_CANAL_NVOIP");
</script>

3. Otimização para Performance Web (Core Web Vitals)

Para evitar degradação de notas no Google PageSpeed Insights e Lighthouse:

  1. Carregamento Adiado (window.load): O widget aguarda o carregamento de todos os recursos essenciais do DOM antes de injetar o script do chat.
  2. Isolamento de Estilos: O container do chat roda isolado para evitar conflito de classes CSS com o tema do portal.
  3. Respeito ao Sentinela Anti-Bot: O widget não interfere nos campos honeypot nem na telemetria humana da Central de Suporte Artes do Sul.

4. Integração no Jekyll do Artes do Sul

No projeto Jekyll d:\artesdosul\artesdosul:

  • O arquivo partial já está disponível em _includes/my-head.nvoip.html.
  • Para ativar o widget em qualquer layout ou página, basta incluir a tag Liquid: 
    <!-- Add HTML tags here to be included in the head -->
<!-- Read the Formbutton docs at formspree.io/formbutton/docs. See more examples at codepen.io/formspree -->
<script>
  (function (n, v, o, i, p){
      n.addEventListener("load",function () {n.top.chatNvoip || (function () {
      p = v.createElement(o); o = v.getElementsByTagName(o)[0];
      p.src = "https://nvoipcom.s3.sa-east-1.amazonaws.com/public/testEmbed/faleConosco/embed.js";p.id = "chatNvoip";p.charset = "utf-8";
      p.setAttribute("public_token", "d095030952cf4b26a096ee91c663aa5d");
      o.parentNode.insertBefore(p, o);
      })()})
  })(window, document, "script", "https://nvoipcom.s3.sa-east-1.amazonaws.com/public/testEmbed/faleConosco/embed.js");
</script>
  • Para desativar em páginas específicas (ex: telas de impressão ou apresentações), utilize a flag no frontmatter: 
    ---
disable_chat: true
---