Manual Instalação e Edição Widget Fale Conosco
O Fale Conosco é uma ferramenta desenvolvida pela Nvoip, que tem o intuito de facilitar a comunicação entre o usuário principal e os visitantes de seu site, por meio de solicitação de ligações (callme), chat e WhatsApp, tudo isso em um só lugar. Sendo assim, objetivo desse manual é ensinar o passo a passo de como confirar o Fale Conosco, para ser inserido no seu site.
1. Como acessar o Fale Conosco?
1.1 Painel Nvoip
Para acessar o Fale Conosco, navegue até: [Configurações] >[Widget].
A Tela do Fale Conosco, é dividida em 4 guias: "Geral", "Telefonia" e "WhatsApp" e "Script".
As três primeiras abas oferecem opções de edição da aparência do Widget, possibilitando, por exemplo, alterar a cor, frase de exibição, imagem, etc. Já na última aba (Script) apresenta o código gerado para ser incorporado em seu site.
Essas edições podem ser feitas conforme a necessidade do usuário, podendo habilitar ou não e editar cada uma dessas funcionalidades quantas vezes forem necessárias.
1.2 Google Tag Manager
Caso você utilize o Google Tag Manager, a edição do Fale Conosco também será via painel da Nvoip. Portanto, siga as instruções do tópico 1.1!
2. Como configurar o Fale Conosco?
2.1 Tela Geral
Na Tela Geral, os campos de preenchimento são:
→ Canais disponíveis: possibilidade de habilitar ou desabilitar o WhatsApp, Chat e/ou Telefonia.
→ Domínio(s): deve ser inserida a(s) url(s) do site onde será instalado o Widget (Ex.: localhost).
→ E-mail de contato: e-mail que você irá receber as mensagens deixadas no site.
→ Aparência: alteração da imagem do Widget através do upload de uma imagem.
→ Tamanho: mudança do tamanho do Widget.
→ Cores: mudança de cor do Widget.
→ Posição: mudança de lado do Widget na tela (esquerdo ou direito).
→ Balão de captação de atenção: edição da frase do Widget Principal (Ex.: Olá, vamos conversar?).
2.2 Tela Telefonia
A guia Telefonia apresenta uma tela no lado direito da página que permite uma melhor visualização das edições feitas. E tem os seguintes campos de preenchimento:
→ Aparência da tela: upload da imagem para a Tela de Telefonia
Obs.: É indicado que o tamanho da imagem seja aproximadamente 286 x 50 pixels. Caso sua imagem tenha uma dimensão diferente, haverá uma conversão automática. Caso a imagem fique distorcida, basta utilizar um redimensionador gratuito de imagens como o Adobe Express.
→ Cores: mudança de cor da tela, podendo ser primária (cor botão), de borda (cor do traço) e de fundo (cor background).
→ Destino da ligação: espaço para inserir o numero de telefone do usuário que receberá as ligações.
→ Texto das abas: edição dos textos “Me Ligue Agora”, “Me Ligue Depois” e “Deixe sua Mensagem”.
Exemplo de uma Tela Telefonia criada:
2.3 Tela WhatsApp
→ Número do WhatsApp: insira seu número de WhatsApp com DD1 + DDD (Ex.: (55) 32 99814-9999).
→ Mensagem padrão do WhatsApp: Mensagem pré-configurada de solicitação de contato do usuario com a empresa (Ex.: Olá, meu nome é user e gostaria de saber mais sobre a empresa Nvoip. Pode me dar mais informações?).
2.4 Tela Script
Por fim, na aba [Script], clique no botão copiar no canto superior direito. E pronto! O código do Script já está copiado!
3. Como instalar o Fale Conosco?
Para isso, serão apresentados 2 simples passos para você usufruir dessa nova funcionalidade. Vamos lá?
3.1. Como copiar o código do Widget
Já no painel, siga o caminho das abas: [Configurações] >[Widget].
Na Tela do Fale Conosco, você deve preencher as informações das guias [Geral], [Telefonia] e [WhatsApp] conforme sua necessidade, podendo habilitar ou não cada uma dessas funcionalidades.
Após essa edição, abra a aba [Script] e clique no botão copiar no canto superior direito. E pronto! O código do Script já está copiado!
4. Como inserir o código do script no seu site?
Nesse segundo passo, existem 3 opções possíveis a serem seguidas, sendo elas: HTML e Google Tag Manager. Você seguirá as orientações baseadas na maneira em que seu site foi feito.
4.1 HTML
Ainda no painel Fale Conosco, na aba Geral, adicione o domínio localhost, juntamente com a numeração do endereço, conforme exemplo abaixo e clique em "Salvar].
Abra sua pasta de código em sua IDE de preferência (como o VS Code) e selecione o arquivo [Index.html].
Cole o código copiado do script acima entre as tags <body> e </body> e salve o documento.
Após isso, abra o documento localmente para conferir se o widget apareceu. Em caso positivo, suba seu site para a nuvem.
4.2 Google Tag Manager
O Google Tag Manager (Gerenciador de Tags do Google) é um sistema simples e seguro que permite atualizar fragmentos de códigos relacionados (tags) no seu site ou app para dispositivos móveis.
4.2.1 Se você ainda não tem cadastro
Para ter acesso a ele, entre no endereço do Google Tag Manager com o o seu login e senha do Google. Se já tiver cadastro vá para o tópico 4.3.2!
Já na página Gerenciador de Tags, clique em [Criar conta].
Em seguida, preencha os campos do formulário e clique em [CRIAR].
→ Nome da conta: insira um nome (Ex.: Meu site).
→ Plataforma Segmentada: selecione web.
4.2.2 Se você não tem cadastro
Vá em [Visão geral] e selecione [Nova Tag].
Preencha as informações abaixo da tela que será aberta sobre a nova tag e depois, clique em [SALVAR].
→ Configuração da tag: selecione HTML personalizado.
→ HTML: cole o Script copiado do painel da Nvoip.
→ Acionamento: selecione All Pages.
Na tela Espaço de Trabalho, clique em [Enviar].
Será aberto uma nova aba de envio das alterações, você devera preencher os campos abaixo e após isso, clique em [Publicar].
→ Nome da versão: Fale Conosco.
→ Descrição da versão: Foi adicionado um campo chamado Fale Conosco da Nvoip.
→ Acionamento: Selecione All Pages.
Após feito esses passos, o Widget da Nvoip aparecerá no seu site!
Related Articles
Entendendo a Napikey e o User Token da Nvoip
A API da Nvoip oferece aos usuários a capacidade de integrar a Nvoip diretamente em seus sistemas. Por exemplo, caso eu possuir um CRM, é viável incorporar a Nvoip ao sistema, permitindo realizar chamadas, consultar históricos de ligações, consultar ...Como cadastrar e editar os usuários no painel Nvoip
Como cadastrar os novos usuários Para acessar a listagem de usuários, acesse no Menu Lateral > Configurações > Usuários: Para cadastrar os usuários clique no botão "+ Novo Usuário" na parte superior direita da tela: Na tela de Novo Usuário você tem ...Manual Utilização Fluxograma URA
Com o fluxograma você conseguirá configurar sua URA de uma forma mais fácil e intuitiva, podendo também visualizar o fluxo a medida que os elementos (Número virtual, Horário, Menu, Fila e Áudio) forem sendo criados. Caso não tenha uma URA configurada ...Configurando e editando o Fluxo do VoiceBot
Com o [Fluxo] você conseguirá configurar seu VoiceBot de uma forma mais fácil e intuitiva, podendo também visualizar o fluxo à medida que os elementos (Número virtual, Horário, Menu, Fila e Áudio) forem sendo criados. O VoiceBot, é uma ferramenta que ...Integração com o WhatsApp
A integração da Nvoip com o WhatsApp pode ser realizada para diversas finalidades, como gerenciamento de mensagens, automação de respostas, relatórios de consumo, histórico de atendimento e muito mais. É predciso ficar atento a algumas regras antes ...