Prompts de permissão web

​

Visão Geral

​

Prompts do OneSignal (prompts suaves)

1. Explicar o valor de se inscrever para mensagens (push, email ou SMS).
2. Evitar que os navegadores bloqueiem automaticamente solicitações de permissão.
3. Lançar o prompt nativo do navegador somente depois que o usuário expressar interesse.

​

Ícone do prompt

• Formatos aceitos: .png ou .jpg
• Tamanho recomendado: 256x256 pixels (para atender aos requisitos do Safari)
• Se não for definido, o OneSignal usará um ícone de sino genérico

A imagem mostra a seção Configuração do Site das suas configurações de push na web. É aqui que você configura o nome do seu site, URL do site e ícone padrão.

​

Configuração do prompt de permissão

Adicione novos prompts ou selecione o prompt que você deseja editar.

• Slidedown: Um prompt visualmente proeminente usado para notificações push e seleção opcional de categoria.
• Prompt de Email/Telefone: Usado para coletar endereços de email de usuários, números de telefone ou ambos.
• Prompt de sino de assinatura: Um widget flutuante persistente para assinaturas push, normalmente colocado no canto inferior do seu site.
• Prompt de link personalizado: Um botão ou link personalizável incorporado em seu site que aciona o prompt nativo do navegador.
• Prompt de permissão nativo: O prompt obrigatório em nível de navegador que deve ser aceito para que os usuários recebam notificações push.

​

Slidedown & category

Exemplo mostrando o Prompt Slide com Tags de Categoria.

1. Vá para Configurações > Push & In-App > Configurações Web > Configuração do Prompt de Permissão
2. Selecione Adicionar Prompt > Prompt Push > Prompt Slide Push

As opções do prompt slide push.

​

Texto do prompt slide

• Mensagem de ação: até 90 caracteres
• Rótulos dos botões: até 15 caracteres cada
• A personalização de fonte, tamanho ou cores não é suportada atualmente

Opções de texto do prompt slide.

​

Categorias

• Até 10 categorias permitidas
• Cada categoria é armazenada como uma Tag de Dados com valor 1 (selecionada) ou 0 (não selecionada)
• Útil para segmentação e direcionamento de mensagens por preferências do usuário

• Rótulo: o que o usuário vê no prompt. Recomenda-se colocar a primeira letra em maiúscula.
• Chave da Tag: o que a tag será no OneSignal. Recomenda-se usar letras minúsculas e sublinhados (_) para espaços.
• Instruções de Atualização, Botões Positivo e Negativo: se você optar por exibir o prompt de categoria novamente depois que o usuário já estiver inscrito para push, as instruções de atualização serão mostradas em vez da mensagem de ação. Isso permite que você informe ao usuário que ele pode atualizar suas categorias.

Exemplo de categorias. O Rótulo é o que os usuários veem, enquanto a chave da tag é o que é definido como uma chave de tag com valor de '1'.

​

Prompt de email e número de telefone

• Novas assinaturas de Email e/ou SMS são criadas para o usuário
• Você pode começar a enviar mensagens para eles por meio desses canais

• Navegue até Configurações > Push & In-App > Configurações Web > Configuração do Prompt de Permissão > Adicionar Prompt > Prompt de Email/Telefone.

Configuração do Prompt de Email e Número de Telefone

Configuração do Prompt de Email e Número de Telefone

​

Prompt de sino de assinatura

Prompt de Sino de Assinatura

Configuração Típica de Site e WordPress: Prompt de Sino de Assinatura

Navegue até: Configurações > Push & In-App > Configurações Web > Configuração do Prompt de Permissão > Adicionar Prompt > Prompt de Sino de AssinaturaVocê pode personalizar:

• Cor do sino
• Tamanho
• Posição inferior (esquerda ou direita)
• Texto e rótulos

Após a configuração, clique em Concluído e depois em Salvar para aplicar as alterações.

Configuração do Sino de Assinatura no Painel

Configuração de Código Personalizado: Prompt de Sino de Assinatura

Use o parâmetro notifyButton nas opções de inicialização do seu SDK web. Você pode alternar entre diferentes exemplos para personalizações do Prompt de Sino.Ocultar: Para ocultar o sino de assinatura depois que um usuário se inscrever ou mostrá-lo apenas em certas páginas, certifique-se de retornar o valor false ou uma Promise que resolve para o valor false na função displayPredicate durante a inicialização. Esta função é avaliada antes do sino de assinatura ser mostrado. Você pode retornar qualquer outro valor para mostrar o sino de assinatura.

Text & Basic Options

Colors

Hiding

HTTPS Full Example Code

Copy

Ask AI

// Your other init options here
notifyButton: {
    enable: true, /* Required to use the Subscription Bell */
    size: 'medium', /* One of 'small', 'medium', or 'large' */
    theme: 'default', /* One of 'default' (red-white) or 'inverse" (white-red) */
    position: 'bottom-right', /* Either 'bottom-left' or 'bottom-right' */
    offset: {
        bottom: '0px',
        left: '0px', /* Only applied if bottom-left */
        right: '0px' /* Only applied if bottom-right */
    },
    showCredit: false, /* Hide the OneSignal logo */
    text: {
        'tip.state.unsubscribed': 'Subscribe to notifications',
        'tip.state.subscribed': "You're subscribed to notifications",
        'tip.state.blocked': "You've blocked notifications",
        'message.prenotify': 'Click to subscribe to notifications',
        'message.action.subscribed': "Thanks for subscribing!",
        'message.action.resubscribed': "You're subscribed to notifications",
        'message.action.unsubscribed': "You won't receive notifications again",
        'dialog.main.title': 'Manage Site Notifications',
        'dialog.main.button.subscribe': 'SUBSCRIBE',
        'dialog.main.button.unsubscribe': 'UNSUBSCRIBE',
        'dialog.blocked.title': 'Unblock Notifications',
        'dialog.blocked.message': "Follow these instructions to allow notifications:"
    }
}

​

Prompt de link personalizado

Prompt de Link Personalizado

• Abaixo de uma postagem de blog: “Gostou deste artigo? Receba atualizações assim que publicarmos!”
• No rodapé do seu site
• Em um cabeçalho fixo ou barra de ferramentas flutuante

Configuração Típica de Site e WordPress: Prompt de Link Personalizado

Navegue até: Configurações > Push & In-App > Configurações Web > Configuração do Prompt de Permissão > Adicionar Prompt > Link Personalizado.Adicione o HTML fornecido na sua página onde você deseja que o widget seja renderizado.Configure suas opções, depois clique em Concluído e Salvar para ativar.

Configuração de Link Personalizado no Painel

Configuração de Código Personalizado: Link Personalizado

Dentro do objeto promptOptions do seu código init do OneSignal, adicione o objeto customlink e suas propriedades disponíveis.

Copy

Ask AI

// Your other init options here
promptOptions: {
  customlink: {
    enabled: true, /* Required to use the Custom Link */
    style: "button", /* Has value of 'button' or 'link' */
    size: "medium", /* One of 'small', 'medium', or 'large' */
    color: {
      button: '#E12D30', /* Color of the button background if style = "button" */
      text: '#FFFFFF', /* Color of the prompt's text */
    },
    text: {
      subscribe: "Subscribe to push notifications", /* Prompt's text when not subscribed */
      unsubscribe: "Unsubscribe from push notifications", /* Prompt's text when subscribed */
      explanation: "Get updates from all sorts of things that matter to you", /* Optional text appearing before the prompt button */
    },
    unsubscribeEnabled: true, /* Controls whether the prompt is visible after subscription */
  }
}

Para renderizar o prompt no seu site, insira o seguinte HTML onde você deseja que o widget apareça:

html

Copy

Ask AI

<div class='onesignal-customlink-container'></div>

Configuração Típica e de Código Personalizado: Estilização Adicional

Para alterar a aparência do widget a qualquer momento, todos os elementos têm uma classe especial onesignal-reset que remove qualquer estilização anterior do elemento para garantir que não haja conflito com nossos estilos internos e que pareça exatamente como você o definiu no painel.Se você se encontrar precisando redefinir quaisquer estilos do OneSignal, aqui está uma breve referência das classes usadas no widget de Link Personalizado

Nome da Classe	Aplica-se a
onesignal-customlink-container	Container principal
onesignal-customlink-subscribe	Botão de ação
onesignal-customlink-explanation	Parágrafo com texto de explicação personalizado
state-subscribed	Todos os componentes internos ao container principal
state-unsubscribed	Todos os componentes internos ao container principal
button	Botão de ação se estiver no modo botão
link	Botão de ação se estiver no modo link
small	Todos os componentes internos ao container principal
medium	Todos os componentes internos ao container principal
large	Todos os componentes internos ao container principal
hide	Todos os componentes internos ao container principal se unsubscribeEnabled estiver definido como false

Para sobrescrever qualquer um deles, você precisa criar uma regra CSS com maior especificidade; combinar o nome da classe com o id do elemento pai deve ser suficiente. Mas cuidado com os conflitos, nossos estilos internos podem mudar.

​

Prompt de permissão nativo

• Obrigatório para assinatura
• Automaticamente acionado após prompts suaves do OneSignal (como um Slidedown ou Link Personalizado)
• Não personalizável em aparência, texto ou comportamento

Prompt de Permissão Nativo no Chrome

​

Comportamento do prompt nativo do navegador

​

Chrome

• Aplica-se automaticamente a usuários que frequentemente negam prompts
• Também se aplica a sites com uma alta taxa de negações

Exemplo de uma UI mais discreta no Chrome desktop.

• Você tem 3 tentativas para solicitar
• Após a 3ª dispensa, o prompt é suprimido por 7 dias (fonte).

​

Firefox

Ícone do Firefox

​

Safari

​

Edge

• Se o site não for confiável, o prompt é suprimido e substituído por um ícone de sino na barra do navegador:

Ícone de sino mostrado para sites desconhecidos ou não confiáveis no Edge.

• Se o site for confiável, o prompt nativo aparece normalmente:

O prompt nativo aparece diretamente para sites confiáveis no Edge.

​

Configurações de exibição e prompt automático

• Visualizações de Página: Número de vezes que o usuário carrega qualquer página do seu site
• Segundos na Página: Quantidade de tempo que o usuário deve passar na página

Configuração Típica de Site e WordPress: Prompt Automático

• Navegue até: Configurações > Push & In-App > Configurações Web > Configuração do Prompt de Permissão
• Escolha um prompt ou crie um novo
• Ative o Prompt Automático
• Defina suas preferências de atraso (visualizações de página e atraso de tempo)

Exemplo: Este prompt está configurado para aparecer na terceira visualização de página após 30 segundos.

• Clique em Concluído, depois em Salvar

Se você deseja acionar o prompt programaticamente, mantenha o Prompt Automático desativado e use os métodos de prompt do SDK Web.

Configuração de Código Personalizado: Prompt Automático

Dentro do objeto promptOptions do seu código init do OneSignal, use as opções autoPrompt e delay. Também existem métodos para acionar os prompts slidedown ou nativos desejados diretamente. Veja Referência do SDK Web para mais detalhes.

Acionamento Manual (Em vez de Prompt Automático)

Se você quiser mais controle sobre quando os prompts são mostrados—por exemplo, apenas em páginas específicas ou após ações específicas:

1. Desative o Prompt Automático
2. Use os métodos de Slidedown ou Prompt Nativo do SDK para mostrar o prompt via código

​

Lógica de recuo do prompt slidedown

​

Melhores práticas para solicitar permissão de push na web

​

Seja estratégico sobre quando perguntar

• Depois que eles adicionarem um item ao carrinho ou interagirem com uma postagem ou comentário
• Quando atualizarem seu perfil ou fizerem login em uma conta
• Após a conclusão de uma ação que mostre comprometimento com sua marca

​

Use o prompt de sino de assinatura

• Mantém a opção de assinatura visível sem interromper a navegação.
• Permite que os usuários escolham quando se inscrever.
• Constrói confiança ao não forçar uma solicitação de permissão imediata.

​

Deixe os usuários personalizarem sua assinatura com categorias

• Faz com que o prompt pareça menos intrusivo e mais relevante
• Aumenta o engajamento e as taxas de cliques nas mensagens
• Reduz cancelamentos de assinatura posteriores ao definir expectativas antecipadamente

​

Teste e otimize ao longo do tempo

• Comece com o prompt nativo do navegador por alguns meses para avaliar sua taxa de adesão de linha de base.
• Após coletar dados, experimente com o Prompt Slide ou fluxos de prompt personalizados para melhorar a conversão em navegadores e segmentos de público.
• Use os eventos permissionPromptDisplay e permissionChange e eventos slidedown do nosso SDK para rastrear o desempenho.

​

FAQ e solução de problemas

​

Problemas de exibição de prompt

Configurações de notificação do Chrome

• O usuário selecionou “Não permitir que sites enviem notificações”, o que bloqueará a exibição do prompt de permissão nativo. Isso deve dizer “Sites podem solicitar para enviar notificações” para permitir que o prompt de permissão nativo seja mostrado.
• O usuário adicionou https://seusite.com à lista “Não permitido enviar notificações”, o que bloqueará a exibição do prompt de permissão nativo. Deve ser removido da lista para permitir que o prompt de permissão nativo seja mostrado.

• Chrome - Esta página explica como gerenciar notificações no Chrome navegando para Configurações > Privacidade e segurança > Configurações do site > Notificações, onde você pode controlar o comportamento padrão e gerenciar permissões para sites individuais.
• Firefox - Este guia cobre notificações push na web para Firefox, explicando como gerenciar permissões de notificação através de Configurações > Privacidade e Segurança > Notificações, e como controlar permissões específicas de site através do ícone de informações do site na barra de endereços.
• Safari - Este guia da Apple explica como personalizar notificações do Safari no Mac através de Safari > Preferências > Sites > Notificações, onde você pode gerenciar quais sites podem enviar notificações e controlar o comportamento das notificações através das Preferências do Sistema.
• Edge - Este artigo detalha como gerenciar notificações no Edge navegando para Configurações > Privacidade, pesquisa e serviços > Permissões de site > Notificações, ou clicando no ícone de informações do site na barra de endereços.

​

FAQ

​

Personalizações