# 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](/pt/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/#integration) 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
Para habilitar e personalizar um **Popup de Inscrição Personalizado**, use o seguinte script ao inicializar o [Pushwoosh WebSDK](/pt/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/#integration):
```javascript title="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
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:
```javascript
// 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
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.
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.
## Eventos do Popup de Inscrição Personalizado
Os seguintes eventos estão disponíveis para rastrear interações com o **Popup de Inscrição Personalizado**:
```javascript
// 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");
});
```