Como instalar o Notiondesk Messenger no seu site

O Messenger integra a sua central de ajuda do Notiondesk diretamente ao seu site ou aplicativo web.

Os visitantes podem usar o Messenger para pesquisar na sua central de ajuda, ler artigos, conversar com seu assistente de IA, visualizar atualizações do changelog e entrar em contato com sua equipe sem sair do seu site.

Este guia explica como instalar o Notiondesk Messenger em um site padrão.

Antes de começar

Antes de instalar o Notiondesk Messenger, certifique-se de ter:

• Um centro de ajuda Notiondesk

• Um mensageiro configurado em Notiondesk

• Acesso ao código do seu site ou às configurações de código personalizado de todo o site.

• Seu trecho de instalação exclusivo do Messenger Notiondesk

Se você deseja que os visitantes usem o assistente de IA dentro do Messenger, configure também o chatbot de IA Notiondesk. Consulte Configurar e ativar o chatbot de IA .

Escolha um método de instalação

Utilize o método de instalação que melhor se adequa ao seu site.

Para a maioria dos sites tradicionais, o trecho de código JavaScript é o método de instalação mais simples.

Instale o Messenger em um site padrão.

1. Copie o código de instalação do Messenger.

Abra as configurações do Messenger em Notiondesk e encontre a seção Instalação .

Copie o trecho de código de instalação gerado para o seu Messenger.

O código tem este formato:

YOUR_MESSENGER_ID identifica o Messenger que deve ser carregado no seu site.

Copie o trecho do seu próprio painel do Messenger em vez de copiar um ID do Messenger de outro site ou conta.

2. Adicione o trecho de código ao seu site.

Cole o trecho de código do Messenger imediatamente antes da tag de fechamento </body>:

Se o seu site utiliza um layout, modelo, rodapé ou seção de código personalizado compartilhada em todo o site, adicione o trecho de código apenas uma vez para que o Messenger seja carregado em todo o site.

Se o Messenger só deve aparecer em páginas específicas, inclua o trecho de código apenas nessas páginas.

3. Publique suas alterações

Salve e implemente ou publique seu site após adicionar o trecho de código.

O código do Messenger deve estar presente no site publicado. Adicionar o código apenas a uma versão local ou não publicada não disponibilizará o Messenger aos visitantes.

<script
  async
  src="https://static.notiondesk.help/messenger/widget.js"
  data-messenger-id="YOUR_MESSENGER_ID">
</script>

<body>
  <!-- Your website -->

  <script
    async
    src="https://static.notiondesk.help/messenger/widget.js"
    data-messenger-id="YOUR_MESSENGER_ID">
  </script>
</body>

Verifique a instalação.

Abra o site publicado no seu navegador.

Uma instalação bem-sucedida deve carregar o iniciador do Messenger Notiondesk nas páginas que contêm o código de instalação.

Abra o Messenger e verifique se o conteúdo esperado Notiondesk aparece.

Você pode testar:

• Abrindo e fechando o Messenger

• Pesquisando em sua central de ajuda

• Abrindo um artigo

• Iniciar uma conversa com IA se o chatbot de IA estiver ativado.

• Abrir qualquer outra seção do Messenger que você tenha ativado

Se o Messenger não aparecer, abra as ferramentas de desenvolvedor do seu navegador e verifique se o widget está carregando corretamente.

React, Next.js, Vue, Nuxt e SPAs

React, Next.js, Vue, Nuxt e outras aplicações de página única devem usar o pacote oficial @notiondesk-so/messenger-js-sdk em vez de adicionar manualmente o trecho de script padrão.

Instale o pacote com:

Você também pode instalá-lo com o Yarn ou o pnpm.

O SDK oferece integrações dedicadas para:

npm install @notiondesk-so/messenger-js-sdk

• JavaScript e TypeScript

• Reagir

• Next.js

• Vue

• Nuxt

O SDK também fornece métodos para mostrar, ocultar, ativar/desativar, configurar e destruir o Messenger.

As integrações de framework devem inicializar o Messenger no lado do cliente. Não inicialize o SDK do Messenger durante a renderização no lado do servidor.

Não instale o snippet padrão do Messenger e o SDK no mesmo aplicativo, a menos que você gerencie intencionalmente instâncias separadas do Messenger.

Para uma configuração completa do framework, consulte o guia Instalar o Messenger com React e Next.js.

Solução de problemas