Pular para o conteúdo
Guias do usuárioSuporte Solicitar demonstração Entrar
Pushwoosh.com

Popup de Inscrição Personalizado

O Popup de Inscrição Personalizado é uma janela pop-up exibida na página da web que sugere aos usuários que se inscrevam para receber notificações push da web. Ele é implementado com o Pushwoosh WebSDK e permite superar as restrições do navegador na exibição de prompts de inscrição nativos. Um popup de inscrição nativo pode ser mostrado a um usuário específico apenas duas vezes. Se um usuário não permitir notificações push e fechar o popup de inscrição nativo duas vezes seguidas, ele não será mais exibido e as notificações push serão consideradas bloqueadas. Já um Popup de Inscrição Personalizado, por sua vez, pode ser exibido quantas vezes for necessário, a menos que um usuário se inscreva ou bloqueie as notificações push explicitamente.

Um Popup de Inscrição Personalizado pode conter qualquer texto explicando as vantagens de se inscrever para notificações push e dois botões personalizáveis — um para a opção “Perguntar depois” e outro para “Inscrever-se”.

Assim que um usuário pressiona o botão “Inscrever-se”, um popup de inscrição nativo aparece.

Quando um usuário pressiona o botão “Perguntar depois” ou simplesmente fecha a janela, o Popup de Inscrição Personalizado aparecerá novamente em um tempo especificado (por padrão, uma semana depois; o atraso para tentar novamente pode ser personalizado através do parâmetro “retryOffset”).

Implementação

Anchor link to

Para habilitar e personalizar um Popup de Inscrição Personalizado, use o seguinte script ao inicializar o Pushwoosh WebSDK:

Exemplo
Pushwoosh.push('init', {
    // . . .,
    subscribePopup: {
        enable: true,                      // (booleano) ativação do popup
        text: 'Texto no popup',             // (string) um texto para exibir no popup
        confirmSubscriptionButtonText: 'Inscrever-se', // (string) texto personalizado para o botão “Inscrever-se”


        manualToggle: false,               // (booleano) controle manual para exibir o popup
        delay: 60,                         // (inteiro) um atraso entre o carregamento da página e o aparecimento do popup
        retryOffset: 604800,               // (inteiro) um deslocamento em segundos para exibir o popup novamente


        iconUrl: 'https://...',            // (string) URL do ícone personalizado
        iconAlt: 'Texto descritivo para o seu ícone', // (string) texto ALT para o ícone
        overlay: false,                    // (booleano) habilita a sobreposição da página quando o popup é exibido
        position: 'top',                   // (string) posição na página. Valores possíveis: ’top' | 'center' | 'bottom’
        mobileViewMargin: '10px',          // (string) margem para a visualização móvel


        bgColor: '#fff',                   // (string) cor de fundo do popup
        borderColor: 'transparent',        // (string) cor da borda do popup
        boxShadow: '0 3px 6px rgba(0,0,0,0.16)', // (string) sombra do popup


        textColor: '#000',                 // (string) cor do texto do popup
        textSize: 'inherit',               // (string) tamanho do texto do popup
        textWeight: 'normal',              // (string) peso da fonte do texto do popup
        fontFamily: 'inherit',             // (string) fonte do texto do popup


        subscribeBtnBgColor: '#4285f4',         // (string) cor de fundo do botão “Inscrever-se”
        subscribeBtnTextColor: '#fff',          // (string) cor do texto do botão “Inscrever-se”
        subscribeBtnTextWeight: 'bold',         // (string) peso da fonte do texto do botão “Inscrever-se”
        subscribeBtnBorderColor: 'transparent', // (string) cor da borda do botão “Inscrever-se”
        subscribeBtnBorderRadius: '4px',        // (string) raio da borda do botão “Inscrever-se”


        askLaterButtonText: 'Agora não',          // (string) texto personalizado para o botão “Perguntar depois”
        askLaterBtnBgColor: 'transparent',      // (string) cor de fundo do botão “Perguntar depois”
        askLaterBtnTextColor: '#000',           // (string) cor do texto do botão “Perguntar depois”
        askLaterBtnBorderColor: 'transparent',  // (string) cor da borda do botão “Perguntar depois”
        askLaterBtnBorderRadius: '4px',         // (string) raio da borda do botão “Perguntar depois”
        askLaterBtnTextWeight: 'normal',        // (string) peso da fonte do texto do botão “Perguntar depois”


        theme: 'material',               // (string) tema do popup, valores possíveis: 'material' | 'topbar'
        viewport: 'desktop'              // (string) viewport de destino, valores possíveis: 'desktop' | 'mobile'
    }
});

Acessando a Instância do Popup de Inscrição Personalizado

Anchor link to

A instância do Popup de Inscrição Personalizado está disponível via Pushwoosh.moduleRegistry.subscribePopup.

Nota: Esta instância se torna acessível somente após o evento subscribe-popup-ready ser acionado. No entanto, ela não estará disponível se o usuário já estiver inscrito para receber notificações push.

A instância fornece um método toggle() que permite que você mostre ou oculte manualmente o popup:

// Mostra ou oculta o Popup de Inscrição Personalizado manualmente
Pushwoosh.moduleRegistry.subscribePopup.toggle(); // Alterna a visibilidade
Pushwoosh.moduleRegistry.subscribePopup.toggle(true); // Mostra o popup
Pushwoosh.moduleRegistry.subscribePopup.toggle(false); // Oculta o popup

Isso permite um maior controle sobre o comportamento do popup diretamente do seu código.

Temas

Anchor link to

Por padrão, o Popup de Inscrição usa um tema ‘material’ e sobrepõe parte da tela quando exibido, ocultando assim parte do conteúdo do visitante do site.

Tema 'Material'

Para evitar que o Popup de Inscrição oculte conteúdo valioso, use o tema ‘topbar’ para que o popup seja exibido como uma barra estreita no topo da tela.

Tema 'Topbar'

Eventos do Popup de Inscrição Personalizado

Anchor link to

Os seguintes eventos estão disponíveis para rastrear interações com o Popup de Inscrição Personalizado:

// Executado quando o popup de inscrição personalizado é carregado e está pronto para ser exibido
// Nota: Este evento NÃO será acionado se o usuário já estiver inscrito para receber notificações push.
Pushwoosh.addEventHandler('subscribe-popup-ready', function() {
  console.log("Evento acionado: subscribe-popup-ready");
});


// Executado quando o popup de inscrição personalizado é exibido
Pushwoosh.addEventHandler('subscribe-popup-show', function() {
  console.log("Evento acionado: subscribe-popup-show");
});


// Executado quando um usuário clica no botão 'Inscrever-se' na janela pop-up
Pushwoosh.addEventHandler('subscribe-popup-accept', function() {
  console.log("Evento acionado: subscribe-popup-accept");
});


// Executado quando um usuário clica no botão 'Perguntar depois' na janela pop-up
Pushwoosh.addEventHandler('subscribe-popup-decline', function() {
  console.log("Evento acionado: subscribe-popup-decline");
});


// Executado quando o popup é ocultado
Pushwoosh.addEventHandler('subscribe-popup-hide', function() {
  console.log("Evento acionado: subscribe-popup-hide");
});