Solicitudes de permiso web

​

Descripción general

​

Solicitudes de OneSignal (solicitudes suaves)

1. Explicar el valor de suscribirse a los mensajes (push, correo electrónico o SMS).
2. Evitar que los navegadores bloqueen automáticamente las solicitudes de permiso.
3. Lanzar la solicitud nativa del navegador solo después de que el usuario exprese interés.

​

Icono de solicitud

• Formatos aceptados: .png o .jpg
• Tamaño recomendado: 256x256 píxeles (para cumplir con los requisitos de Safari)
• Si no se configura, OneSignal usará un icono de campana genérico

La imagen muestra la sección Site Setup de tu configuración de web push. Aquí es donde configuras el nombre de tu sitio web, URL del sitio e icono predeterminado.

​

Configuración de solicitud de permiso

Agrega nuevas solicitudes o selecciona la solicitud que deseas editar.

• Slidedown: Una solicitud visualmente prominente utilizada para notificaciones push y selección de categoría opcional.
• Solicitud de correo electrónico/teléfono: Utilizada para recopilar direcciones de correo electrónico de los usuarios, números de teléfono o ambos.
• Solicitud de campana de suscripción: Un widget flotante persistente para suscripciones push, generalmente ubicado en la esquina inferior de tu sitio.
• Solicitud de enlace personalizado: Un botón o enlace personalizable integrado en tu sitio que activa la solicitud nativa del navegador.
• Solicitud de permiso nativa: La solicitud a nivel del navegador requerida que debe ser aceptada para que los usuarios reciban notificaciones push.

​

Slidedown y categoría

Ejemplo que muestra la solicitud Slide con etiquetas de categoría.

1. Ve a Settings > Push & In-App > Web Settings > Permission Prompt Setup
2. Selecciona Add Prompt > Push Prompt > Push Slide Prompt

Las opciones de solicitud slide push.

​

Texto de solicitud slide

• Mensaje de acción: hasta 90 caracteres
• Etiquetas de botones: hasta 15 caracteres cada una
• La personalización de fuente, tamaño o colores no está actualmente soportada

Opciones de texto de solicitud slide.

​

Categorías

• Se permiten hasta 10 categorías
• Cada categoría se almacena como una etiqueta de datos con un 1 (seleccionada) o 0 (no seleccionada)
• Útil para segmentación y orientación de mensajes según las preferencias del usuario

• Label: lo que el usuario ve en la solicitud. Se recomienda poner en mayúscula la primera letra.
• Tag Key: lo que será la etiqueta en OneSignal. Se recomienda usar minúsculas y guiones bajos (_) para los espacios.
• Update Instructions, Positive and Negative Buttons: si eliges mostrar la solicitud de categoría nuevamente después de que el usuario ya esté suscrito a push, se mostrarán las instrucciones de actualización en lugar del mensaje de acción. Esto te permite informar al usuario que puede actualizar sus categorías.

Ejemplo de categorías. La etiqueta Label es lo que ven los usuarios mientras que tag key es lo que se establece como clave de etiqueta con un valor de '1'.

​

Solicitud de correo electrónico y número de teléfono

• Se crean nuevas suscripciones de correo electrónico y/o SMS para el usuario
• Puedes comenzar a enviarles mensajes a través de estos canales

• Navega a Settings > Push & In-App > Web Settings > Permission Prompt Setup > Add Prompt > Email/Phone Prompt.

Configuración de solicitud de correo electrónico y número de teléfono

Configuración de solicitud de correo electrónico y número de teléfono

​

Solicitud de campana de suscripción

Solicitud de campana de suscripción

Configuración típica de sitio y WordPress: Solicitud de campana de suscripción

Navega a: Settings > Push & In-App > Web Settings > Permission Prompt Setup > Add Prompt > Subscription Bell PromptPuedes personalizar:

• Color
• Tamaño
• Posición inferior (izquierda o derecha)
• Texto y etiquetas

Después de la configuración, haz clic en Done, luego en Save para aplicar los cambios.

Configuración de campana de suscripción en el panel

Configuración de código personalizado: Solicitud de campana de suscripción

Usa el parámetro notifyButton en tus opciones de inicialización del SDK web. Puedes alternar entre diferentes ejemplos para personalizaciones de la solicitud de campana.Ocultar: Para ocultar la campana de suscripción después de que un usuario se suscriba o solo mostrarla en ciertas páginas, asegúrate de devolver el valor false o una Promise que se resuelva al valor false en la función displayPredicate durante la inicialización. Esta función se evalúa antes de que se muestre la campana de suscripción. Puedes devolver cualquier otro valor para mostrar la campana de suscripción.

Texto y opciones básicas

Colores

Ocultar

Código de ejemplo completo HTTPS

Copiar

Preguntar a la IA

// Tus otras opciones de init aquí
notifyButton: {
    enable: true, /* Requerido para usar la campana de suscripción */
    size: 'medium', /* Uno de 'small', 'medium' o 'large' */
    theme: 'default', /* Uno de 'default' (rojo-blanco) o 'inverse" (blanco-rojo) */
    position: 'bottom-right', /* Ya sea 'bottom-left' o 'bottom-right' */
    offset: {
        bottom: '0px',
        left: '0px', /* Solo se aplica si es bottom-left */
        right: '0px' /* Solo se aplica si es bottom-right */
    },
    showCredit: false, /* Ocultar el logo de OneSignal */
    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:"
    }
}

​

Solicitud de enlace personalizado

Solicitud de enlace personalizado

• Debajo de una publicación de blog: “¿Te gustó este artículo? ¡Recibe actualizaciones tan pronto como publiquemos!”
• En el pie de página de tu sitio
• En un encabezado fijo o barra de herramientas flotante

Configuración típica de sitio y WordPress: Solicitud de enlace personalizado

Navega a: Settings > Push & In-App > Web Settings > Permission Prompt Setup > Add Prompt > Custom Link.Agrega el HTML proporcionado en tu página donde deseas que se renderice el widget.Configura tus opciones, luego haz clic en Done y Save para activar.

Configuración de enlace personalizado en el panel

Configuración de código personalizado: Enlace personalizado

Dentro del objeto promptOptions del código init de OneSignal, agrega el objeto customlink y sus propiedades disponibles.

Copiar

Preguntar a la IA

// Tus otras opciones de init aquí
promptOptions: {
  customlink: {
    enabled: true, /* Requerido para usar el enlace personalizado */
    style: "button", /* Tiene valor de 'button' o 'link' */
    size: "medium", /* Uno de 'small', 'medium' o 'large' */
    color: {
      button: '#E12D30', /* Color del fondo del botón si style = "button" */
      text: '#FFFFFF', /* Color del texto de la solicitud */
    },
    text: {
      subscribe: "Subscribe to push notifications", /* Texto de la solicitud cuando no está suscrito */
      unsubscribe: "Unsubscribe from push notifications", /* Texto de la solicitud cuando está suscrito */
      explanation: "Get updates from all sorts of things that matter to you", /* Texto opcional que aparece antes del botón de solicitud */
    },
    unsubscribeEnabled: true, /* Controla si la solicitud es visible después de la suscripción */
  }
}

Para renderizar la solicitud en tu sitio, inserta el siguiente HTML donde deseas que aparezca el widget:

html

Copiar

Preguntar a la IA

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

Configuración típica y de código personalizado: Estilo adicional

Para cambiar la apariencia del widget en cualquier momento, todos los elementos tienen una clase especial onesignal-reset que elimina cualquier estilo previo del elemento para asegurarse de que no haya conflictos con nuestros estilos internos y que se vea exactamente como lo has definido en el panel.Si alguna vez necesitas redefinir cualquier estilo de OneSignal, aquí hay una referencia breve de las clases utilizadas en el widget de enlace personalizado

Nombre de clase	Se aplica a
onesignal-customlink-container	Contenedor principal
onesignal-customlink-subscribe	Botón de acción
onesignal-customlink-explanation	Párrafo con texto de explicación personalizado
state-subscribed	Todos los componentes internos del contenedor principal
state-unsubscribed	Todos los componentes internos del contenedor principal
button	Botón de acción si está en modo botón
link	Botón de acción si está en modo enlace
small	Todos los componentes internos del contenedor principal
medium	Todos los componentes internos del contenedor principal
large	Todos los componentes internos del contenedor principal
hide	Todos los componentes internos del contenedor principal si unsubscribeEnabled es falso

Para anular cualquiera de ellas, debes crear una regla CSS con mayor especificidad; combinar el nombre de la clase con el ID del elemento padre debería ser suficiente. Pero ten cuidado con los conflictos, nuestros estilos internos pueden cambiar.

​

Solicitud de permiso nativa

• Requerida para la suscripción
• Activada automáticamente después de las solicitudes suaves de OneSignal
• No personalizable en apariencia, texto o comportamiento

Solicitud de permiso nativa en Chrome

​

Comportamiento de solicitud nativa del navegador

​

Chrome

• Se aplica automáticamente a usuarios que frecuentemente deniegan solicitudes
• También se aplica a sitios con una alta tasa de denegaciones

Ejemplo de una interfaz de usuario más silenciosa en Chrome de escritorio.

• Tienes 3 intentos para solicitar
• Después del tercer descarte, la solicitud se suprime durante 7 días (fuente).

​

Firefox

Icono de Firefox

​

Safari

​

Edge

• Si el sitio no es confiable, la solicitud se suprime y se reemplaza por un icono de campana en la barra del navegador:

Icono de campana mostrado para sitios desconocidos o no confiables en Edge.

• Si el sitio es confiable, la solicitud nativa aparece normalmente:

La solicitud nativa aparece directamente para sitios confiables en Edge.

​

Configuración de solicitud automática y visualización

• Page Views: Número de veces que el usuario carga cualquier página en tu sitio
• Seconds on Page: Cantidad de tiempo que el usuario debe pasar en la página

Configuración típica de sitio y WordPress: Solicitud automática

• Navega a: Settings > Push & In-App > Web Settings > Permission Prompt Setup
• Elige una solicitud o crea una nueva
• Habilita Auto Prompt
• Establece tus preferencias de retraso (vistas de página y retraso de tiempo)

Ejemplo: Esta solicitud está configurada para aparecer en la tercera vista de página después de 30 segundos.

• Haz clic en Done, luego en Save

Si deseas activar la solicitud programáticamente, mantén Auto Prompt deshabilitado y usa los métodos de solicitud del Web SDK.

Configuración de código personalizado: Solicitud automática

Dentro del objeto promptOptions del código init de OneSignal, usa las opciones autoPrompt y delay. También hay métodos para activar las solicitudes slidedown o nativas deseadas directamente. Consulta la referencia del Web SDK para más detalles.

Activación manual (en lugar de solicitud automática)

Si deseas más control sobre cuándo se muestran las solicitudes, por ejemplo, solo en páginas específicas o después de acciones específicas:

1. Deshabilita Auto Prompt
2. Usa los métodos de solicitud Slidedown o nativa del SDK para mostrar la solicitud a través de código

​

Lógica de retroceso de solicitud slidedown

​

Mejores prácticas para solicitar permisos de web push

​

Sé estratégico con el momento en que preguntas

• Después de que agreguen un artículo a su carrito o se comprometan con una publicación o comentario
• Cuando actualicen su perfil o inicien sesión en su cuenta
• Al completar una acción que muestre compromiso con tu marca

​

Usa la solicitud de campana de suscripción

• Mantiene visible la opción de suscripción sin interrumpir la navegación.
• Permite a los usuarios suscribirse cuando lo elijan.
• Genera confianza al no forzar solicitudes de permiso inmediatas.

​

Permite a los usuarios personalizar sus suscripciones con categorías

• Hace que la solicitud se sienta menos intrusiva y más relevante
• Mejora la participación y las tasas de clics en los mensajes
• Reduce las bajas posteriores al establecer expectativas temprano

​

Prueba y optimiza con el tiempo

• Comienza con la solicitud nativa del navegador durante unos meses para medir tu tasa de opt-in de referencia.
• Después de recopilar datos, experimenta con la solicitud slidedown o flujos de solicitud personalizados para mejorar las conversiones en navegadores y segmentos de audiencia.
• Rastrea el rendimiento usando los eventos permissionPromptDisplay y permissionChange y eventos slidedown de nuestro SDK.

​

Preguntas frecuentes y solución de problemas

​

Problemas de visualización de solicitud

Configuración de notificaciones de Chrome

• El usuario ha seleccionado “Don’t allow sites to send notifications” lo que evitará que se muestre la solicitud de permiso nativa. Esto debe mostrar “Sites can ask to send notifications” para permitir que se muestre la solicitud de permiso nativa.
• El usuario ha agregado https://yoursite.com a la lista “Not allowed to send notifications”, lo que evitará que se muestre la solicitud de permiso nativa. Esto debe eliminarse de la lista para permitir que se muestre la solicitud de permiso nativa.

• Chrome - Esta página explica cómo gestionar las notificaciones en Chrome yendo a Settings > Privacy and security > Site Settings > Notifications, donde puedes controlar el comportamiento predeterminado y gestionar los permisos para sitios web individuales.
• Firefox - Esta guía cubre las notificaciones Web Push de Firefox, explicando cómo gestionar los permisos de notificación a través de Settings > Privacy & Security > Notifications, y cómo controlar los permisos para sitios específicos a través del icono de información del sitio en la barra de direcciones.
• Safari - Esta guía de Apple explica cómo personalizar las notificaciones de Safari en Mac a través de Safari > Preferences > Websites > Notifications, donde puedes gestionar qué sitios pueden enviar notificaciones y controlar el comportamiento de las notificaciones a través de las preferencias del sistema.
• Edge - Este artículo detalla cómo gestionar las notificaciones de Edge navegando a Settings > Privacy, search, and services > Site permissions > Notifications, o haciendo clic en el icono de información del sitio en la barra de direcciones.

​

Personalizaciones