Prompts de soft push para Web

Pré-requisitos

Antes de poder usar esse recurso, você precisará integrar o Web Braze SDK. Você também precisará configurar notificações por push.

Sobre prompts de soft push

Muitas vezes, é uma boa ideia que os sites implementem um prompt de push “suave”, no qual você “prepara” o usuário e defende o envio de notificações por push antes de solicitar a permissão de push. Isso é útil porque o navegador limita a frequência com que você pode solicitar diretamente ao usuário e, se o usuário negar a permissão, você nunca mais poderá solicitá-la novamente.

Alternativamente, se você quiser incluir um tratamento personalizado especial, em vez de chamar requestPushPermission() diretamente como descrito na integração padrão Web push, use nossas mensagens no app acionadas.

Configurando prompts de soft push

Etapa 1: Crie uma campanha de push primer

Primeiro, você deve criar uma campanha de mensagens no app “Prime for Push” no dashboard da Braze:

1. Crie uma mensagem modal no app com o texto e o estilo que desejar.
2. Em seguida, defina o comportamento ao clicar como Fechar mensagem. Esse comportamento será personalizado posteriormente.
3. Adicione um par chave-valor à mensagem em que a chave é msg-id e o valor é push-primer.
4. Atribua uma ação-gatilho de evento personalizado (como “prime-for-push”) à mensagem. Você pode criar o evento personalizado manualmente no dashboard, se necessário.

Etapa 2: Remover chamadas

Em sua integração do SDK do Braze, localize e remova todas as chamadas para automaticallyShowInAppMessages() de seu snippet de carregamento.

Etapa 3: Integração de atualizações

Por fim, substitua a chamada removida pelo seguinte trecho. Chame subscribeToInAppMessage() antes de chamar openSession(). Isso garante que seu ouvinte de mensagem no app esteja registrado a tempo de receber a mensagem de introdução do push.

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);
});

Quando desejar exibir o prompt de soft push para o usuário, faça uma chamada para braze.logCustomEventcom o nome do evento que dispara essa mensagem no app.