Criando um Widget
O que é um Widget?
O Widget da Nvoip é uma ferramenta interativa desenvolvida para ser incorporada diretamente ao seu site. Ele atua como um ponto central de comunicação, reunindo diversas funcionalidades em um único espaço visual, prático e acessível para seus visitantes.
O objetivo principal do widget é facilitar e aprimorar a experiência do usuário com sua empresa, centralizando canais de atendimento, recursos automatizados e opções de interação personalizadas.
Requisitos da Integração
Para utilizar todas as funcionalidades do Widget, é necessário atender a alguns requisitos específicos, que garantem o funcionamento correto e a integração completa dos canais de atendimento.
- Ligações pelo Widget: é necessário ter um número virtual contratado com a Nvoip e créditos disponíveis em sua conta.
Chat no Site e WhatsApp pelo Widget: é necessário possuir um plano de usuários contratados na Nvoip.
Envio de WhatsApp pelo Widget: é necessário que a integração da Nvoip com a conta ativa do WhatsApp esteja configurada. Para mais detalhes, acesse o manual completo de integração do WhatsApp.
Case de Uso
Imagine que você tem um e-commerce e deseja melhorar o atendimento ao cliente no seu site, unificando canais de contato para facilitar o suporte e aumentar as vendas. Antes, os visitantes precisavam procurar por vários números e links diferentes para falar com a empresa, o que gerava perda de oportunidades.
Com o Widget Nvoip instalado no site, seus clientes encontram um único ponto de contato para conversar via WhatsApp, agendar ligações ou enviar mensagens direto do site, de forma rápida e prática. Isso aumenta a satisfação do cliente, reduz o tempo de resposta da equipe e gera mais conversões para o seu negócio.
Passo a Passo
Antes de tudo, é importante entender os canais de comunicação disponíveis no Widget:
- Chat: permite uma conversa em tempo real diretamente no seu site.
- WhatsApp: pode ser utilizado de forma receptiva (o cliente inicia a conversa com sua empresa) ou ativa (sua empresa envia uma mensagem para o cliente).
- Ligação: o cliente pode solicitar uma ligação imediata ou agendar para outro momento. O sistema realizará automaticamente uma chamada para o número da sua empresa e, ao atender, a ligação pode ser direcionada, por exemplo, para sua URA.
- E-mail: permite que o cliente envie uma mensagem, que será encaminhada ao e-mail configurado no sistema.
1 - Configurando o Widget
Primeiramente, entre em seu painel Nvoip e clique em Configurações -> Widget:
Nesta etapa, sua conta já vem com um Widget padrão previamente configurado, pronto para uso. Você pode ajustá-lo conforme suas necessidades ou, se preferir, criar um novo Widget clicando em “Criar novo widget”:
2 - Aba "Geral"
Vamos começar a configuração do seu widget pela seção "Geral", onde você definirá os ajustes principais, como o nome do widget, o horário de exibição no site, o texto do balão, entre outros. Tudo o que for configurado nessa tela será refletido em tempo real no widget de visualização localizado no canto inferior direito da tela, conforme indicado pela seta na imagem.
1 - Nome do Widget: Defina o nome do widget. Isso é importante para que você possa identificar e gerenciar múltiplos widgets em sua conta.
2 - Define o Horário de Exibição do Widget: Escolha o horário em que este widget específico será exibido no site. Por exemplo, se sua empresa encerra o atendimento às 18h, é possível configurar um widget para o horário comercial e outro para fora do horário. Esses horários são definidos diretamente no "Fluxos".
3 - Canais Disponíveis no site: Selecione os canais que serão exibidos no widget, como Chat, Ligação, WhatsApp e E-mail.
4 - Texto do Balão de Atenção: Configure os textos que serão exibidos no balão de atenção. Esses textos podem variar conforme o horário ou a URL da página, permitindo personalizações específicas para diferentes seções do seu site. Para adicionar textos, clique no "+" ao lado e para remover, na lixeira.
5 - Domínio(s) onde será instalado o Widget: Informe o domínio no qual o widget será utilizado. Por exemplo, no caso da Nvoip, o domínio seria "www.nvoip.com.br".
6 - Ocultar em dispositivos: Escolha se deseja exibir versões diferentes do widget para mobile e desktop. Isso é útil caso queira adaptar o conteúdo para diferentes resoluções de tela, por exemplo.
7 - Aparência do Widget: Ajuste o tamanho do widget e defina as margens (espaçamentos) de onde ele será posicionado. Lembre-se de que todas as alterações são refletidas automaticamente na pré-visualização.
8 - Cores: Personalize as cores do seu widget. A cor primária corresponde ao elemento principal, a cor secundária se aplica aos detalhes internos e a cor do texto define o estilo da tipografia.
9 - Posição do Widget Principal: Escolha em que posição o widget aparecerá no seu site – pode ser no canto inferior ou superior, à direita ou à esquerda. Também escolha a disposição dele: curvo, horizontal ou vertical.
10 - Aparência do Widget: Configure a imagem que será exibida no widget. Assim como os textos, a imagem pode ser definida por horário (por exemplo, usar um emoji de "dormindo" durante a madrugada) e também pode ser personalizada. Para configurar uma imagem que será exibida quando o cliente passar o mouse sobre o widget, clique em “Configuração Avançada” e envie suba sua imagem.
3 - Aba "Telefonia"
Na aba Telefonia, você define todas as configurações específicas relacionadas ao canal de ligações do widget. Embora semelhantes às configurações da aba Geral, os ajustes feitos aqui impactam exclusivamente o canal de Telefonia:
1 - Horário de Exibição do Widget de Telefonia: Defina o horário em que o canal “Telefonia” será exibido no widget. Essa configuração é importante para adaptar a disponibilidade do canal conforme o funcionamento da sua empresa. Por exemplo, após as 18h, você pode optar por deixar disponível apenas o WhatsApp. Os horários disponíveis para seleção são definidos no fluxo.
2 - Destino das Ligações: Configure para onde as ligações serão direcionadas quando um cliente solicitar contato. Essa definição pode variar conforme o número e o horário, permitindo que, por exemplo, o número X direcione as chamadas para um fluxo Y em um horário específico.
3 - Ligações Agendadas: Defina os dias e horários em que o sistema pode agendar e realizar chamadas para os clientes automaticamente, conforme a disponibilidade da sua equipe.
4 - Exibição por Dispositivo: Escolha se deseja exibir o canal de telefonia em versões diferentes para mobile e desktop. Isso permite ajustes específicos para diferentes resoluções.
5 - Aparência do Widget de Telefonia: Ajuste o tamanho do canal de telefonia e suas cores dentro do widget, garantindo que ele se adapte ao layout do seu site. Todas as alterações feitas são refletidas automaticamente na pré-visualização.
6 - Imagem Personalizada do Canal de Telefonia: Personalize a imagem exibida no canal de telefonia. Assim como os textos, a imagem pode ser alterada. Para configurar uma imagem que será exibida quando o cliente passar o mouse sobre o widget, clique em “Configuração Avançada” e suba sua imagem personalizada.
4 - Aba "Chat"
Na aba chat, você configura todas as configurações a respeito do canal do chat no widget. As configurações são parecidas com a "Geral", porém refletem apenas no canal de chat:
1 - Horário de Exibição do Widget de Chat: Defina o horário em que o canal “Chat” será exibido no widget. Essa configuração é importante para adaptar a disponibilidade do canal conforme o funcionamento da sua empresa. Por exemplo, após as 18h, você pode optar por deixar disponível apenas o WhatsApp. Os horários disponíveis para seleção são definidos no fluxo.
2 - Iniciar chat sem formulário: caso marque essa opção, o chat entrará diretamente para a conversa com o atendente ou BOT, sem colher as informações como nome, e-mail, etc.
3 - Ocultar em dispositivos: Escolha se deseja exibir o canal de chat em versões diferentes para mobile e desktop. Isso permite ajustes específicos para diferentes resoluções.
4 - Aparência do Widget de Chat: Ajuste o tamanho do canal de chat e suas cores dentro do widget, garantindo que ele se adapte ao layout do seu site. Todas as alterações feitas são refletidas automaticamente na pré-visualização.
5 - Imagem Personalizada do Widget de Chat: Personalize a imagem exibida no canal de chat. Assim como os textos, a imagem pode ser adaptada conforme o seu objetivo. Para configurar uma imagem que será exibida quando o cliente passar o mouse sobre o widget, clique em “Configuração Avançada” e suba sua imagem personalizada.
5 - Aba "E-mail"
Caso o cliente opte por esse canal, o sistema enviará automaticamente um e-mail para os contatos configurados, com o conteúdo da mensagem recebida:
1 - Horário de Exibição do Widget de E-mail: Defina o horário em que o canal “E-mail” será exibido no widget. Essa configuração é importante para adaptar a disponibilidade do canal conforme o funcionamento da sua empresa. Por exemplo, após as 18h, você pode optar por deixar disponível apenas o WhatsApp. Os horários disponíveis para seleção são definidos no fluxo.
2 - Selecione os agentes que receberão o e-mail: Aqui, você deverá escolher qual usuário de sua conta receberá a mensagem deixada pelo cliente.
3 - Ocultar em dispositivos: Escolha se deseja exibir o canal de E-mail em versões diferentes para mobile e desktop. Isso permite ajustes específicos para diferentes resoluções.
4- Aparência do Widget de E-mail: Ajuste o tamanho do canal de E-mail e suas cores dentro do widget, garantindo que ele se adapte ao layout do seu site. Todas as alterações feitas são refletidas automaticamente na pré-visualização.
5 - Imagem Personalizada do Widget de E-mail: Personalize a imagem exibida no canal de E-mail. Assim como os textos, a imagem pode ser adaptada conforme o seu objetivo. Para configurar uma imagem que será exibida quando o cliente passar o mouse sobre o widget, clique em “Configuração Avançada” e suba sua imagem personalizada.
5 - Aba "WhatsApp"
O visitante do seu site pode escolher se deseja enviar uma mensagem para a empresa ou receber uma mensagem da empresa via WhatsApp:
1 - Horário de Exibição do Widget de WhatsApp: Defina o horário em que o canal “WhatsApp” será exibido no widget. Essa configuração é importante para adaptar a disponibilidade do canal conforme o funcionamento da sua empresa. Por exemplo, após as 18h, você pode optar por deixar disponível apenas o canal "E-mail". Os horários disponíveis para seleção são definidos no fluxo.
2 - Tipo de Contato: Defina como será a interação entre o cliente e a empresa ao selecionar esse canal. Você pode escolher entre duas opções: permitir que o cliente envie uma mensagem ou configurar para que a empresa envie uma mensagem ao cliente. Se optar pela primeira opção, será necessário inserir uma mensagem padrão que iniciará a conversa. Já na segunda opção, você deverá selecionar o template que será utilizado para o envio automático da mensagem ao cliente (essa opção necessita a integração com o WhatsApp):
3 - Ocultar em dispositivos: Escolha se deseja exibir o canal de WhatsApp em versões diferentes para mobile e desktop. Isso permite ajustes específicos para diferentes resoluções.
4 - Aparência do Widget WhatsApp: Escolha as cores e tamanho do canal do WhatsApp.
5 - Imagem do Widget WhatsApp: Escolha o ícone padrão para ser apresentado no canal WhatsApp.
6 - Aba "Avançado"
Nesta tela, você encontrará configurações avançadas do Widget, como a inserção dos termos de serviço, a opção de ocultar o widget em páginas específicas do site, a definição do idioma padrão, entre outras opções que permitem personalizar ainda mais o comportamento e a apresentação do widget:
1 - Selecione o idioma Padrão: Escolha o idioma que será exibido por padrão no seu widget assim que o cliente acessá-lo. Ao clicar em "Editar Conteúdo", você poderá visualizar e personalizar todos os textos preenchidos, em todos os canais, em diferentes idiomas:
2 - Termos de serviços: Informe a URL do seu termo de serviço. Ela será acessada quando o cliente clicar em "Termos de Uso".
3 - Termos de privacidade: Informe a URL da sua política de privacidade. Ela será acessada quando o cliente clicar em "Política de Privacidade".
4 - Exibir Widget apenas nas páginas: Adicione aqui as URLs específicas nas quais você deseja que o widget seja exibido. Para inserir, clique em "Adicionar" e para remover, clique na lixeira ao lado do chip inserido:
5 - Ocultar Widget nas seguintes páginas: Indique as URLs em que o widget não deve ser exibido. Para inserir, clique em "Adicionar" e para remover, clique na lixeira ao lado do chip inserido.
6 - Outros: Nessa seção, você pode optar por ocultar o selo "Powered by" e ativar o modo escuro do widget:
6 - Aba "Gatilhos"
Os gatilhos são mensagens automáticas enviadas ao cliente com base em condições previamente configuradas no sistema. Por exemplo, é possível configurar o envio de uma mensagem via chat quando o cliente permanecer por 10 minutos na página de planos do seu site. Nesse caso, o sistema dispara automaticamente o gatilho, abre o chat e envia a mensagem, como uma sugestão de plano, por exemplo. Essa funcionalidade está disponível para todos os canais de atendimento, e você pode criar quantos gatilhos quiser, de acordo com suas estratégias. Para excluir um gatilho, basta clicar na lixeira ao lado do gatilho configurado.
Para criar um novo gatilho, clique em "Novo Gatilho", na aba "Gatilhos":
Após isso, a tela de configuração de gatilhos é aberta:
1 - Canal: Aqui, você deve escolher qual é o canal de atendimento que deseja configurar seu gatilho.
2 - URL: Aqui, você deve inserir qual URL que o gatilho entrará em funcionamento. Por exemplo /planos.
3 - Horário: Aqui, você deve selecionar qual horário que o gatilho entrará em funcionamento. Por exemplo, apenas em seu horário comercial.
4 - Duração: Aqui, você escolhe qual a duração que seu gatilho entrará em funcionamento.
5 - Tipo: Aqui, você escolhe se a duração que escolheu é em hora(s), minuto(s), segundo(s).
6 - Ativação por visitante: Aqui, você define o limite de gatilhos serão disparados para o mesmo visitante.
7 - Ativação por hora: Aqui, você define o limite de gatilhos que serão disparados para o mesmo visitante por hora.
8 - Ativação por dia: Aqui, você define o limite de gatilhos que serão disparados para o mesmo visitante por dia.
9 - Ativação por semana: Aqui, você define o limite de gatilhos que serão disparados para o mesmo visitante por semana.
6 - Aba "Script"
Na aba "Script", você encontrará o código do seu Widget para incorporar em seu site. Ele deve ser inserido entre as tags <body> e </body>. Para copiar o código, basta passar o mouse sobre ele e clicar em "Copiar código".
Pronto, agora você já sabe como configurar seu Widget na Nvoip. Caso fique alguma dúvida, entre em contato com o nosso time de atendimento.
Related Articles
Criando Automações
O que são Automações? Automações são processos programados dentro da Nvoip, que permitem a realização de envios em massa de WhatsApp, SMS e ligações, de forma prática, rápida e eficiente. Elas são ideais para empresas que desejam se comunicar com ...Criando Templates de SMS
O que são templates de SMS? Templates de SMS são mensagens padronizadas e reutilizáveis, utilizadas para facilitar e agilizar a comunicação com seus clientes através da Nvoip. Eles são ideais para envio de mensagens automáticas e notificações ...Criando Templates de WhatsApp pela Nvoip
O que são templates de WhatsApp? Templates de WhatsApp são mensagens padronizadas e previamente aprovadas pelo WhatsApp API, utilizadas para iniciar conversas com seus clientes. Eles podem ser usados para enviar notificações, lembretes, confirmações, ...Como usar um Cupom de Desconto na sua assinatura da Nvoip
Recebeu um Cupom de Desconto da Nvoip e não sabe como usar? Vamos te mostrar passo a passo para inserir o cupom de desconto na hora de assinar um plano da Nvoip. Depois de acessar sua conta no seu painel Nvoip, você deverá acessar o menu "Financeiro" ...Integrando a Nvoip com o Zoho CRM
1. O que é o Zoho CRM? O Zoho CRM é uma solução de gestão de relacionamento com clientes (CRM) que centraliza leads, oportunidades e atividades de vendas em uma interface intuitiva. Com ele, sua equipe acompanha todo o funil comercial de forma ...