Como Adicionar Facilmente Notificações de Aba do Navegador no WordPress

As notificações na aba do navegador são um daqueles recursos simples, mas eficazes, que mantêm os visitantes engajados silenciosamente e os incentivam a voltar.

Por exemplo, muitos sites de comércio eletrônico usam isso para lembrar gentilmente os usuários de retornar e concluir sua compra quando eles mudam de aba. É sutil, não intrusivo e pode aumentar as taxas de conversão em todo o seu site.

Neste guia, mostraremos como adicionar facilmente notificações de aba do navegador no WordPress, para que você possa manter os visitantes focados e voltando. 🙌

Depois de experimentar, você verá por que é uma ferramenta tão útil para manter os visitantes focados e voltando.

Por que Adicionar Notificações de Aba do Navegador no WordPress?

As notificações de aba do navegador ajudam a trazer os visitantes de volta ao seu site depois que eles mudam para outra aba. Em vez de perder um visitante completamente, você pode usar notificações sutis para lembrá-los sobre seu conteúdo, produtos ou ofertas especiais.

Isso torna as notificações de aba do navegador uma maneira simples, mas eficaz, de aumentar o engajamento e as conversões. Aqui estão alguns dos maiores benefícios de usar notificações de aba do navegador:

• Reengajar Visitantes Distraídos: Incentive os usuários a retornar ao seu site depois de mudar para outra aba.
• Reduzir Abandono de Carrinho: Lembre os compradores sobre os produtos deixados no carrinho antes que eles saiam da sua loja.
• Aumentar Conversões: Chame a atenção para ofertas especiais, lead magnets e chamadas para ação importantes.
• Melhorar a Visibilidade da Marca: Mantenha seu site em destaque com mensagens personalizadas ou notificações visuais.
• Aumentar o Engajamento do Usuário: Incentive os visitantes a continuar lendo artigos, preenchendo formulários ou explorando seu conteúdo.

Uma notificação de aba do navegador geralmente funciona alterando o título da aba, exibindo uma mensagem personalizada, atualizando o favicon ou mostrando uma contagem de notificações quando um visitante se afasta do seu site.

Por exemplo, uma loja online pode exibir uma mensagem como “Não se esqueça do seu carrinho!” enquanto um blog pode mostrar “Volte para mais dicas!” quando um visitante abre outra aba.

Aqui está um exemplo de uma notificação de aba do navegador.

Tipos de Notificações de Aba do Navegador

Dependendo dos seus objetivos, você pode usar diferentes tipos de notificações de aba do navegador para capturar a atenção dos visitantes e incentivá-los a retornar ao seu site.

Aqui está uma comparação rápida das opções mais populares:

Dito isso, mostraremos como adicionar facilmente diferentes tipos de notificações de aba do navegador no WordPress.

Você pode usar os links abaixo para pular para o método de sua escolha:

Instale o WPCode para Adicionar Notificações de Aba do Navegador

Você pode facilmente adicionar notificações de aba do navegador em seu site adicionando código personalizado no WordPress. Geralmente, você precisa editar o arquivo functions.php do seu tema, mas até mesmo um pequeno erro pode quebrar seu site.

É por isso que recomendamos o uso do WPCode. Confiado por mais de 3 milhões de sites, é o melhor plugin de snippets de código do WordPress do mercado.

Achamos que é a maneira mais segura e fácil de adicionar código personalizado ao seu site. Ele permite inserir JavaScript personalizado através de uma interface dedicada sem editar os arquivos do tema. Isso evita quebras acidentais no site.

Para detalhes, veja nossa análise do WPCode.

Primeiro, você precisa instalar e ativar o plugin WPCode. Para mais detalhes, você pode ver nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, visite a página Snippets de Código » + Adicionar Snippet na barra lateral de administração do seu WordPress.

Agora, passe o mouse sobre a opção ‘Adicionar Seu Código Personalizado (Novo Snippet)’ e clique no botão ‘+ Adicionar Snippet Personalizado’ abaixo dela.

Em seguida, selecione o tipo de código na lista de opções na tela.

Depois disso, você será levado para a página ‘Criar Snippet Personalizado’.

Não importa qual tipo de notificação de aba do navegador você use, você inserirá o código aqui.

Tipo 1: Exibindo Novas Atualizações como Notificação de Aba do Navegador

Este método é ótimo se você quiser chamar a atenção do usuário simulando atividade em seu site. Um número aparecerá no título da aba, fazendo parecer que uma nova mensagem ou atualização está esperando pelo usuário.

Por exemplo, sites como Facebook e LinkedIn usam isso para mostrar notificações não lidas. Você pode usar esse gatilho psicológico para incentivar os usuários a voltarem para sua aba para ver o que estão perdendo.

Uma vez que você esteja na página ‘Criar Snippet Personalizado’, você precisa nomear seu snippet. Você pode escolher qualquer coisa que ajude você a identificar o código.

Em seguida, selecione ‘JavaScript Snippet’ como o ‘Tipo de Código’ no menu.

Então, tudo o que você precisa fazer é copiar e colar o seguinte trecho de código na caixa ‘Pré-visualização do Código’:

let count = 0;
const originalTitle = document.title;
let titleInterval;

function startCounting() {
    if (!titleInterval) { // Only start if not already running
        titleInterval = setInterval(() => {
            count++;
            document.title = '(' + count + ') ' + originalTitle;
        }, 2000);
    }
}

function stopCounting() {
    clearInterval(titleInterval);
    titleInterval = null;
    document.title = originalTitle;
    count = 0; // Reset count when returning
}

window.addEventListener('blur', startCounting);
window.addEventListener('focus', stopCounting);

Este código atualiza continuamente o título da aba do navegador com um número crescente quando o usuário se afasta da aba, simulando atividade contínua.

Quando o usuário retorna ao seu site, o título volta ao normal e a contagem é reiniciada.

Depois de fazer isso, role para baixo até a seção ‘Inserção’. Simplesmente escolha a opção ‘Inserir Automaticamente’ e deixe a localização como ‘Cabeçalho do Site Inteiro’.

Depois disso, role de volta para o topo da página e alterne o interruptor ‘Inativo’ para ‘Ativo’.

Finalmente, clique no botão ‘Salvar Snippet’ para armazenar suas configurações.

Com isso concluído, seu trecho de código personalizado será adicionado ao seu site e começará a funcionar.

Tipo 2: Alterando Favicons como Notificação de Aba do Navegador

Com este método, você exibirá um favicon diferente na aba do navegador quando os usuários navegarem para outra aba. Esta é uma maneira sutil de lembrá-los que seu site ainda está aberto.

Para alterar dinamicamente o favicon, a melhor prática é modificar o href do link de favicon existente fornecido pelo seu tema WordPress (geralmente encontrado via document.querySelector('link[rel="icon"]')).

Isso é melhor do que inserir uma nova tag <link>, o que pode levar a conflitos ou comportamento inesperado.

Para conseguir isso, usaremos um snippet de JavaScript que troca a imagem quando o usuário sai da página e a reverte quando ele retorna.

Primeiro, visite a página Snippets de Código » + Adicionar Snippet e clique em ‘+ Adicionar Snippet Personalizado’.

Na página de criação, selecione ‘Snippet de JavaScript’ como o ‘Tipo de Código’ no menu.

Depois de fazer isso, copie e cole o seguinte código na caixa ‘Visualização do Código’:

// This script assumes an existing favicon link in the head (e.g., from your theme).
// If your theme doesn't provide one, you might need to add a default <link> tag
// using an HTML snippet in WPCode, inserted into the site-wide header.

document.addEventListener('DOMContentLoaded', function() {
    const faviconLink = document.querySelector('link[rel="icon"]'); // Find the existing favicon link
    if (!faviconLink) {
        console.warn("No favicon link found. Please ensure your theme adds one or add it manually in the head.");
        return;
    }

    const originalFavicon = faviconLink.href;
    // Replace with the full URL of your desired notification image
    const notificationFavicon = 'https://example.com/wp-content/uploads/2022/10/favicon-notification.png';

    window.addEventListener('blur', function() {
        faviconLink.href = notificationFavicon;
    });

    window.addEventListener('focus', function() {
        faviconLink.href = originalFavicon;
    });
});

Após colar o código, você precisará substituir o URL na linha const notificationFavicon = pelo link da sua própria imagem de notificação.

Simplesmente carregue seu novo favicon na biblioteca de mídia do WordPress e copie o URL completo da imagem carregada (por exemplo, https://example.com/wp-content/uploads/2024/05/favicon-notification.png).

Em seguida, cole-o dentro das aspas no código.

Depois de fazer isso, role para baixo até a seção ‘Insertion’.

Você pode escolher a opção ‘Inserir Automaticamente’ se quiser incorporar o código em todas as páginas automaticamente.

Para alterar o favicon apenas em páginas específicas, selecione a opção 'Shortcode' e cole-o em qualquer área que suporte shortcodes, como widgets de barra lateral ou na parte inferior do editor de conteúdo.

Em seguida, vá para o topo da página e alterne o interruptor de ‘Inativo’ para ‘Ativo’ no canto superior direito, e então clique no botão ‘Salvar Snippet’.

Depois disso, seu favicon começará a mudar como uma notificação na aba do navegador.

Tipo 3: Alterando o Título do Site como Notificação de Aba do Navegador

Este método é para você se quiser alterar o título do site para recapturar a atenção dos seus visitantes.

Usando este snippet de código, o título do seu site mudará para mostrar uma mensagem chamativa quando os usuários mudarem para outra aba no navegador.

Usaremos o plugin WPCode para alterar o título do seu site para uma notificação na aba do navegador.

Para chegar à página ‘Criar Snippet Personalizado’, visite a página Snippets de Código » + Adicionar Snippet na barra lateral de administração.

Aqui, clique em ‘+ Adicionar Snippet Personalizado’ na opção ‘Adicionar Seu Código Personalizado (Novo Snippet)’.

Em seguida, você precisa selecionar ‘Snippet de JavaScript’ como o tipo de código na lista de opções que aparecem na tela.

Agora que você está na página ‘Criar Snippet Personalizado’, comece inserindo um título para o seu snippet de código.

Isso pode ser qualquer coisa para ajudá-lo a se lembrar para que serve o código.

Então, tudo o que você precisa fazer é copiar e colar o seguinte trecho de código na caixa ‘Pré-visualização do Código’:

function changeTitleOnBlur() {
	var timer     = null;
	var	title     = document.title;
	var altTitle  = 'Return to this page!';
	window.onblur = function() {
		timer = window.setInterval( function() {
			document.title = altTitle === document.title ? title : altTitle;
		}, 1500 );
	}
	window.onfocus = function() {
		document.title = title;
		clearInterval(timer);
	}
}

changeTitleOnBlur();

Depois de colar o código, você pode editá-lo e simplesmente escrever a mensagem que deseja exibir na sua aba do navegador no código.

Para escrever sua mensagem desejada, basta ir para a linha var altTitle = 'Return to this page!'; e remover o texto de espaço reservado com a mensagem para a notificação da sua aba do navegador.

Em seguida, role para baixo até a seção ‘Inserção’ e escolha o modo ‘Inserção Automática’ para ativar a notificação da sua aba do navegador em todas as páginas.

No entanto, se você quiser sua mensagem chamativa apenas em páginas específicas, pode escolher a opção ‘Shortcode’.

Por exemplo, você pode querer adicionar este código apenas à página 'Adicionar ao Carrinho' para reduzir o abandono de carrinho em seu site.

Se for esse o caso, você pode escolher a opção Shortcode.

Depois disso, role para baixo até a opção ‘Localização’ e clique no menu suspenso ao lado dela.

A partir daqui, selecione a opção ‘Rodapé do Site’.

Finalmente, volte para o topo da página e alterne o interruptor de ‘Inativo’ para ‘Ativo’.

Em seguida, clique no botão ‘Save Snippet’ para armazenar suas configurações.

Pronto! Agora, a notificação da sua aba do navegador alertará os usuários que saírem do seu site.

Bônus: Explore Notificações Push da Web para um Alcance Mais Amplo

As notificações na aba do navegador são eficazes, mas têm uma limitação importante. Elas só funcionam se o usuário mantiver sua aba aberta.

Se você deseja alcançar visitantes mesmo depois que eles fecharem seu site, você precisa de notificações push da web. Ao contrário dos alertas de aba, estas são mensagens ativas enviadas diretamente para o dispositivo ou navegador do usuário.

A maneira mais fácil de configurar isso é com o PushEngage. É o melhor software de notificação push do mercado.

O PushEngage permite que você envie atualizações automáticas para novas postagens de blog, quedas de preço ou carrinhos abandonados. Nós o usamos aqui no WPBeginner para notificar nossos assinantes sobre novos tutoriais, e é uma fonte principal de tráfego de retorno para nós.

Para saber mais sobre isso, veja nossa análise completa do PushEngage.

Ele inclui recursos poderosos como testes A/B, push automático, segmentação de usuários e lembretes inteligentes de opt-in. Essas ferramentas ajudam você a construir um público fiel que continua voltando.

Para mais detalhes, veja nosso guia para iniciantes sobre como adicionar notificações push da web no WordPress.

Perguntas Frequentes Sobre Como Adicionar Notificações na Aba do Navegador

Aqui estão algumas perguntas que nossos leitores frequentemente fazem relacionadas à adição de notificações de aba do navegador no WordPress:

Como adiciono uma barra de anúncios no WordPress?

A maneira mais fácil de adicionar uma barra de anúncios é usando um plugin como o OptinMonster. Ele permite que você crie barras fixas que ficam na parte superior ou inferior do seu site para exibir atualizações, promoções ou alertas sem escrever nenhum código.

Para mais informações, veja nosso tutorial sobre como criar uma barra de alertas no WordPress.

Como adiciono notificações no WordPress?

Para adicionar notificações no local, você pode usar um plugin como o PushEngage ou usar o WPCode para inserir scripts personalizados.

O PushEngage lida com notificações push da web ativas enviadas para navegadores, enquanto o WPCode permite adicionar scripts personalizados para alertas de título de aba passivos, como os deste guia.

Como habilitar notificações do navegador da web?

Você deve se inscrever em um serviço de notificação push da web como o PushEngage.

Depois de instalar o plugin deles para WordPress, seu site pode pedir automaticamente aos visitantes permissão para enviar alertas para o navegador/dispositivo deles, mesmo quando eles não estão no seu site.

Como adiciono um aviso no WordPress?

Você pode adicionar um aviso simples dentro de uma postagem usando o bloco Padrão Grupo com uma cor de fundo no editor do WordPress.

Para avisos em todo o site que aparecem em todas as páginas, recomendamos o uso de um plugin de barra flutuante como OptinMonster ou SeedProd.

Como adicionar um banner pop-up no WordPress?

A melhor ferramenta para adicionar banners pop-up é o OptinMonster.

Ele fornece um construtor de arrastar e soltar para criar lightboxes, slide-ins e banners flutuantes que são acionados com base em comportamentos específicos do usuário, como tempo na página ou intenção de saída.

Para começar, veja nosso tutorial sobre como adicionar um pop-up no WordPress.

Esperamos que este artigo tenha ajudado você a aprender como adicionar notificações na aba do navegador no WordPress. Você também pode querer ver nosso tutorial sobre como adicionar caixas de recursos com ícones no WordPress e conferir nossa lista de maneiras de adicionar um site WordPress compatível com dispositivos móveis.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.