Configuração com Código Personalizado

Use esta configuração com Código Personalizado apenas se você precisar de configuração avançada ou controle programático. Para a maioria dos usuários, recomendamos:

Pré-requisitos

Uma conta OneSignal
Um website com HTTPS (necessário para notificações web push)
Acesso para modificar o HTML do seu website e fazer upload de arquivos para seu servidor
Entendimento básico de JavaScript (útil mas não obrigatório)

Criando Seu App OneSignal

Se este não for seu primeiro app com OneSignal, clique em New App/Website. Caso contrário, você prosseguirá diretamente para a configuração.

Dashboard OneSignal mostrando a tela inicial de criação de app

Nomeie seu app com algo descritivo (combinar com o nome do seu website é recomendado), então selecione Web da lista de plataformas. Clique em Next: Configure Your Platform. Nota: Você pode adicionar plataformas adicionais (iOS, Android, etc.) posteriormente nas configurações do seu app.

Tela de seleção de plataforma mostrando a opção Web destacada

1. Escolha a Integração

Selecione Custom Code. Isso habilita controle programático completo sobre prompts, tempo e outras configurações usando nosso JavaScript SDK. Quando escolher Código Personalizado:

Precisa personalizar prompts de notificação
Deseja controlar quando usuários são solicitados
Requer segmentação ou direcionamento avançado
Construindo uma aplicação de página única (SPA)

Opções de configuração Web com Custom Code selecionado

2. Configuração do Site

Configure as informações básicas do seu site. Essas configurações afetam como as notificações aparecem para os usuários.

Formulário de configuração do site com campos obrigatórios destacados

Field	Description	Requirements
SITE NAME	Nome de exibição mostrado nas notificações push	Mantenha conciso e reconhecível
SITE URL	URL completo do seu website	Deve incluir `https://` e corresponder exatamente (inclua `www` se usado)
AUTO RESUBSCRIBE	Reinscreve automaticamente usuários que retornam	Recomendado: Ajuda a manter contagem de inscritos
DEFAULT ICON URL	Ícone para prompts e notificações	Quadrado `256x256` pixels, formato `.png/.jpg/.gif`, URL HTTPS necessária

Armadilhas Comuns:

URL do site deve corresponder exatamente (com ou sem www)
Ícones devem ser servidos via HTTPS
Para testes locais, veja Configuração de Testes Locais

3. Configurações Avançadas de Push

Certificado Safari Web Push (Opcional)

O OneSignal fornece certificados Safari automaticamente sem custo. Apenas habilite isso se você tiver certificados Safari Web Push existentes que precisa usar.

Opção de upload de certificado Safari para certificados existentes

Se habilitado, faça upload do seu Safari Web .p12 Push Certificate e insira a senha. Clique em Save para continuar.

4. Upload de Arquivos Service Worker

O Service Worker OneSignal é necessário para que as notificações push funcionem. Você tem duas opções:

Opção 1: Criar Arquivo Manualmente (Recomendado)

Crie um novo arquivo chamado OneSignalSDKWorker.js

Adicione esta única linha de código:

importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");

Faça upload do arquivo para o diretório raiz do seu website

Opção 2: Baixar e Fazer Upload

Baixe os arquivos SDK OneSignal
Descompacte o download
Faça upload de OneSignalSDKWorker.js para seu servidor

Requisitos de Hospedagem de Arquivo

Localização Padrão: O service worker deve estar acessível em https://yoursite.com/OneSignalSDKWorker.js Localização Personalizada: Se você precisar colocar o arquivo em uma subpasta, veja nosso Guia de Service Worker OneSignal para instruções detalhadas.

Precisa de uma localização personalizada? Para colocação em subpasta ou migração de outro provedor push, siga nosso Guia de Service Worker OneSignal.

Interface de download de arquivo service worker

Alerta de Configuração Legada: Se seu site foi configurado antes de 22 de novembro de 2021, e você está atualmente usando dois arquivos service worker (OneSignalSDKWorker.js e OneSignalSDKUpdaterWorker.js), continue hospedando ambos os arquivos para prevenir problemas com service worker.Novas configurações requerem apenas o arquivo único OneSignalSDKWorker.js.

5. Adicione Código ao Seu Website

Implementação Básica

Adicione este código à seção <head> do seu website. Substitua YOUR_ONESIGNAL_APP_ID pelo seu App ID real do dashboard OneSignal.

<script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
<script>
  window.OneSignalDeferred = window.OneSignalDeferred || [];
  OneSignalDeferred.push(function(OneSignal) {
    OneSignal.init({
      appId: "YOUR_ONESIGNAL_APP_ID",
      safari_web_id: "YOUR_SAFARI_WEB_ID", // Only needed if using custom Safari certificate
      notifyButton: {
        enable: true, // Shows the OneSignal bell icon
      },
    });
  });
</script>

Configuração Específica para Frameworks

Se você está usando um framework JavaScript, siga estes guias especializados:

Próximos Passos Após Instalação do Código

Inicialize o SDK: O código acima lida com inicialização básica
Configure Prompts: Configure quando e como usuários são solicitados - veja Requisições de Permissão
Adicione Lógica Personalizada: Use a Referência do Web SDK para recursos avançados

Pontos de Integração Comuns:

Tempo de prompt personalizado baseado em comportamento do usuário
Segmentação e marcação de usuário
Rastreamento de eventos e analytics
Teste A/B de diferentes estratégias de notificação

Teste Sua Configuração

Verificar Instalação

Visite seu website - você deve ver o ícone de sino OneSignal (se habilitado)
Clique no sino para acionar o prompt de permissão nativo do navegador
Inscreva-se para notificações
Verifique o console do navegador para quaisquer erros JavaScript

Enviar Notificação de Teste

Encontre sua subscription de teste: Siga Encontrar & Definir Subscriptions de Teste
Envie um push de teste: Use nosso guia para enviar uma Notificação Push para você mesmo
Verifique entrega através de diferentes navegadores e dispositivos

Solução de Problemas Comuns

Problemas com Service Worker:

Assegure que OneSignalSDKWorker.js está acessível na URL correta
Verifique que o arquivo contém a declaração import correta
Verifique que HTTPS está funcionando adequadamente

Ícone de Sino Não Aparecendo:

Confirme que o código JavaScript está na seção <head>
Verifique o console do navegador para erros
Verifique que seu App ID está correto

Notificações Não Recebidas:

Teste em uma janela do navegador anônima/privada
Assegure que notificações estão habilitadas nas configurações do navegador
Verifique que seu site é servido via HTTPS

Precisa de Ajuda? Se você encontrar problemas, verifique nosso Guia de Solução de Problemas de Web Push ou contate support@onesignal.com para assistência.

Próximos Passos

Após configuração bem-sucedida, considere estes recursos avançados:

Segmentação de Audiência para mensagens direcionadas
Teste A/B de suas estratégias de notificação
Analytics e Insights para rastrear desempenho

Documentação de desenvolvedor

SDKs móveis

SDKs web

Live Activities

Configuração de Desktop & Watch

Configuração com Código Personalizado

Pré-requisitos