Skip to content

Mensajes de pulsación suave para la Web

Aprende a configurar avisos de push suave para el SDK de Braze.

Requisitos previos

Antes de poder utilizar esta característica, tendrás que integrar el SDK de Web Braze. También tendrás que configurar las notificaciones push.

Acerca de las indicaciones de pulsación suave

A menudo es una buena idea que los sitios implementen una notificación push “suave” en la que “prepares” al usuario y expongas tus argumentos para enviarle notificaciones push antes de solicitar el permiso push. Esto es útil porque el navegador regula la frecuencia con la que puedes preguntar directamente al usuario, y si el usuario deniega el permiso no puedes volver a preguntárselo.

Como alternativa, si deseas incluir un tratamiento personalizado especial, en lugar de llamarrequestPushPermission()directamente como se describe en la integración estándar de notificación push web, utiliza nuestros mensajes dentro de la aplicación que se desencadenan.

Configuración de avisos de push suave

Paso 1: Crear una campaña push primer

En primer lugar, debes crear una campaña de mensajería dentro de la aplicación “Prime for Push” en el panel de Braze:

  1. Crea un mensaje Modal dentro de la aplicación con el texto y el estilo que desees.
  2. A continuación, establece el comportamiento al hacer clic en Cerrar mensaje. Este comportamiento se personalizará más adelante.
  3. Añade un par clave-valor al mensaje donde la clave es msg-id, y el valor es push-primer.
  4. Asigna una acción desencadenante de evento personalizada (como “prime-for-push”) al mensaje. Si es necesario, puedes crear el evento personalizado manualmente desde el panel.

Paso 2: Eliminar llamadas

En tu integración de SDK de Braze, busca y elimina cualquier llamada a automaticallyShowInAppMessages() dentro de tu fragmento de código de carga.

Paso 3: Integración de actualizaciones

Por último, reemplaza la llamada eliminada con el siguiente fragmento de código. LlamasubscribeToInAppMessage()antes de llamaropenSession(). Esto garantiza que el receptor de mensajes dentro de la aplicación se registre a tiempo para recibir el mensaje push inicial.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import * as braze from "@braze/web-sdk";
// Be sure to remove any calls to braze.automaticallyShowInAppMessages()
braze.subscribeToInAppMessage(function(inAppMessage) {
  // check if message is not a control variant
  if (inAppMessage instanceof braze.inAppMessage) {
    // access the key-value pairs, defined as `extras`
    const keyValuePairs = inAppMessage.extras || {};
    // check the value of our key `msg-id` defined in the Braze dashboard
    if (keyValuePairs["msg-id"] === "push-primer") {
      // We don't want to display the soft push prompt to users on browsers
      // that don't support push, or if the user has already granted/blocked permission
      if (
        braze.isPushSupported() === false ||
        braze.isPushPermissionGranted() ||
        braze.isPushBlocked()
      ) {
        // do not call `showInAppMessage`
        return;
      }

      // user is eligible to receive the native prompt
      // register a click handler on one of the two buttons
      if (inAppMessage.buttons[0]) {
        // Prompt the user when the first button is clicked
        inAppMessage.buttons[0].subscribeToClickedEvent(function() {
          braze.requestPushPermission(
            function() {
              // success!
            },
            function() {
              // user declined
            }
          );
        });
      }
    }
  }

  // show the in-app message now
  braze.showInAppMessage(inAppMessage);
});

Cuando quieras mostrar el mensaje push suave al usuario, llama a braze.logCustomEvent - con el nombre del evento que desencadene este mensaje dentro de la aplicación.

New Stuff!