Saltar al contenido principal
Solo usa esta configuración con Código personalizado si necesitas configuración avanzada o control programático. Para la mayoría de usuarios, recomendamos:

​
Requisitos previos

  • Una cuenta OneSignal
  • Un sitio web con HTTPS (requerido para notificaciones web push)
  • Acceso para modificar el HTML de tu sitio web y subir archivos a tu servidor
  • Comprensión básica de JavaScript (útil pero no requerida)

​
Crear tu aplicación OneSignal

Si esta no es tu primera aplicación con OneSignal, haz clic en New App/Website. De lo contrario, procederás directamente a la configuración.

OneSignal dashboard showing the initial app creation screen

Nombra tu aplicación de manera descriptiva (se recomienda coincidir con el nombre de tu sitio web), luego selecciona Web de la lista de plataformas. Haz clic en Next: Configure Your Platform. Nota: Puedes agregar plataformas adicionales (iOS, Android, etc.) más adelante en la configuración de tu aplicación.

Platform selection screen showing Web option highlighted

​
1. Elegir integración

Selecciona Custom Code. Esto habilita control programático completo sobre prompts, tiempo y otras configuraciones usando nuestro JavaScript SDK. Cuándo elegir Código personalizado:
  • Necesitas personalizar prompts de notificación
  • Quieres controlar cuándo se solicita a los usuarios
  • Requieres segmentación o targeting avanzado
  • Estás construyendo una aplicación de página única (SPA)

Web configuration options with Custom Code selected

​
2. Configuración del sitio

Configura la información básica de tu sitio. Estas configuraciones afectan cómo aparecen las notificaciones a los usuarios.

Site setup form with required fields highlighted

CampoDescripciónRequisitos
SITE NAMENombre mostrado en notificaciones pushMantenlo conciso y reconocible
SITE URLURL completa de tu sitio webDebe incluir https:// y coincidir exactamente (incluir www si se usa)
AUTO RESUBSCRIBEResuscribe automáticamente a usuarios recurrentesRecomendado: Ayuda a mantener el conteo de suscriptores
DEFAULT ICON URLIcono para prompts y notificacionesCuadrado de 256x256 píxeles, formato .png/.jpg/.gif, URL HTTPS requerida
Problemas comunes:
  • La URL del sitio debe coincidir exactamente (con o sin www)
  • Los iconos deben servirse sobre HTTPS
  • Para pruebas locales, ver Configuración de prueba local

​
3. Configuración push avanzada

​
Certificado Safari Web Push (Opcional)

OneSignal proporciona certificados Safari automáticamente sin costo. Solo habilita esto si tienes certificados Safari Web Push existentes que necesitas usar.

Safari certificate upload option for existing certificates

Si está habilitado, sube tu Safari Web .p12 Push Certificate e ingresa la contraseña. Haz clic en Save para continuar.

​
4. Subir archivos Service Worker

El Service Worker de OneSignal es requerido para que las notificaciones push funcionen. Tienes dos opciones:
1

Opción 1: Crear archivo manualmente (Recomendado)

  1. Crea un nuevo archivo llamado OneSignalSDKWorker.js
  2. Agrega esta única línea de código: 
    importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");
  3. Sube el archivo al directorio raíz de tu sitio web
2

Opción 2: Descargar y subir

  1. Descarga los archivos SDK de OneSignal
  2. Descomprime la descarga
  3. Sube OneSignalSDKWorker.js a tu servidor

​
Requisitos de alojamiento de archivos

Ubicación predeterminada: El service worker debe ser accesible en https://yoursite.com/OneSignalSDKWorker.js Ubicación personalizada: Si necesitas colocar el archivo en una subcarpeta, consulta nuestra Guía Service Worker de OneSignal para instrucciones detalladas.
¿Necesitas una ubicación personalizada? Para colocación en subcarpeta o migración desde otro proveedor push, sigue nuestra Guía Service Worker de OneSignal.

Service worker file download interface

Alerta de configuración legacy: Si tu sitio se configuró antes del 22 de noviembre de 2021 y actualmente estás usando dos archivos service worker (OneSignalSDKWorker.js y OneSignalSDKUpdaterWorker.js), continúa alojando ambos archivos para prevenir problemas de service worker.Las configuraciones nuevas solo requieren el archivo único OneSignalSDKWorker.js.

​
5. Agregar código a tu sitio web

​
Implementación básica

Agrega este código a la sección <head> de tu sitio web. Reemplaza YOUR_ONESIGNAL_APP_ID con tu App ID real del panel de 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>

​
Configuración específica por framework

Si estás usando un framework JavaScript, sigue estas guías especializadas:

​
Siguientes pasos después de la instalación del código

  1. Inicializar el SDK: El código anterior maneja la inicialización básica
  2. Configurar prompts: Configura cuándo y cómo se solicita a los usuarios - ver Solicitudes de permiso
  3. Agregar lógica personalizada: Usa la Referencia SDK Web para características avanzadas
Puntos de integración comunes:
  • Tiempo de prompt personalizado basado en comportamiento del usuario
  • Segmentación y etiquetado de usuarios
  • Seguimiento de eventos y analytics
  • Pruebas A/B de diferentes estrategias de notificación

​
Probar tu configuración

​
Verificar instalación

  1. Visita tu sitio web - deberías ver el ícono de campana de OneSignal (si está habilitado)
  2. Haz clic en la campana para activar el prompt de permiso nativo del navegador
  3. Suscríbete a notificaciones
  4. Verifica la consola del navegador para cualquier error JavaScript

​
Enviar notificación de prueba

  1. Encuentra tu suscripción de prueba: Sigue Encontrar y establecer suscripciones de prueba
  2. Envía un push de prueba: Usa nuestra guía para enviarte una notificación Push
  3. Verifica la entrega en diferentes navegadores y dispositivos

​
Solución de problemas comunes

Problemas de Service Worker:
  • Asegúrate de que OneSignalSDKWorker.js sea accesible en la URL correcta
  • Verifica que el archivo contenga la declaración import correcta
  • Verifica que HTTPS esté funcionando correctamente
No aparece el ícono de campana:
  • Confirma que el código JavaScript esté en la sección <head>
  • Verifica la consola del navegador para errores
  • Verifica que tu App ID sea correcto
No se reciben notificaciones:
  • Prueba en una ventana de navegador incógnito/privado
  • Asegúrate de que las notificaciones estén habilitadas en la configuración del navegador
  • Verifica que tu sitio se sirva sobre HTTPS
¿Necesitas ayuda? Si encuentras problemas, consulta nuestra Guía de solución de problemas Web Push o contacta a support@onesignal.com para asistencia.

​
Qué sigue

Después de una configuración exitosa, considera estas características avanzadas: