Caixa de entrada web personalizada

Siga os passos descritos neste guia para construir sua própria implementação da caixa de entrada web

Você pode implementar uma caixa de entrada personalizada no seu site usando nosso web SDK.

Os passos a seguir descrevem como recuperar a mensagem para exibição no seu próprio bloco de conteúdo personalizado. Na maioria dos casos, primeiro você precisa adicionar seu próprio botão ao seu site, provavelmente em uma posição de destaque, como uma barra de menus, e usá-lo para controlar a exibição da área de mensagem. Por fim, recomendamos obter a contagem de mensagens, para que você possa mostrar um crachá no botão da caixa de entrada, funcionando como um indicador visual e chamada à ação para o usuário.

Construa a caixa de entrada da mensagem

1. Você pode usar o message.list método SDK para recuperar a lista de mensagens do usuário atual:

   xtremepush('inbox', 'message.list', params, success, error);

   
   O objeto resultado passado para a função de sucesso contém:

   {
       items: array,  // Array of messages
       more: boolean, // Shows if there is more messages for this user
       badge: integer // Updated inbox badge
   }

   
   O objeto mensagem contém:

   {
       id: integer,  // Message id
       opened: 0/1,  // Whether the message is marked as opened or not
       clicked: 0/1, // Whether a click event was tracked on this message
       create_time: integer,     // Unix timestamp of when message was created
       expiration_time: integer, // Unix timestamp of when message is expiring. Could be null.
       message: {    // Data to render the message
           title: string,
           alert: string,
           icon: string,
           style: array
       }
   }

   
   Parámetros disponíveis:

   {
       limit: integer,    // Maximum number of messages to return
       offset: integer,   // Offset that can be used for pagination or show more functionality.
       opened: 0/1,       // Return opened or not opened messages. Skip to return all.
       clicked: 0/1,      // Return clicked or not clicked messages. Skip to return all.
       expired: 0/1,      // Return expired or not expired messages. 0 by default.
       min_time: integer, // Return messages after certain date (using unix timestamp).
       max_time: integer, // Return messages before certain date (using unix timestamp).
   }

2. Você pode usar o message.count método para contar o número de mensagens do usuário atual:

   xtremepush('inbox', 'message.count', params, success, error);

   
   A lista de parâmetros é a mesma de message.list (veja acima).

   O objeto resultado passado para a função de sucesso contém:

   {
       count: integer // Number of messages matching criteria
   }

   O message.count método não deve ser usado durante o carregamento da página para exibir o selo da caixa de entrada. Você deve usar o método do distintivo, que é descrito abaixo.

Lidar com engajamento de mensagens

Você pode usar a message.action chamada SDK para marcar uma mensagem como aberta ou rastrear cliques:

xtremepush('inbox', 'message.action', action, success, error);

O objeto de ação deve conter:

{
    id: integer,   // Message id retrieved from message.list SDK method. Required.
    open: 0/1,     // Whether you want to mark message as 'opened'
    click: 0/1,    // Whether you want to track click event
    button: string // Can be used if you want to track click with the specific button ID.
}

O objeto resultado passado para a função de sucesso contém:

{
    badge: integer // Updated inbox badge
}

Você também pode usar message.actions a chamada de método para marcar múltiplas mensagens como abertas:

xtremepush('inbox', 'message.actions', actions, success, error);

O objeto de ações deve conter um array de objetos de ação (descritos acima na message.action seção).

Adicione um selo ao botão da caixa de entrada

Você pode usar a badge chamada de método para recuperar um número e exibir como um crachá em um botão de entrada como parte do seu site:

xtremepush('inbox', 'badge', params, success, error);

O objeto resultado passado para a função de sucesso contém o seguinte:

{
    badge: integer // Up to date inbox badge
}

Existem dois tipos diferentes de crachás que você pode usar para sua caixa de entrada:

• Número de mensagens que ainda não são vistas pelo usuário.

• Número de mensagens que ainda não foram abertas pelo usuário.

Você pode selecionar o tipo de selo necessário para seu projeto na página de configurações da caixa de entrada . Abaixo você tem mais contexto sobre essas opções:

• A mensagem é marcada como visto no momento em que é retornada em resposta ao message.list método SDK. Então, o emblema da caixa de entrada está aumentando quando uma nova mensagem é criada para um usuário. E o crachá é resetado quando o destinatário abre a caixa de entrada.

• A mensagem é marcada como aberta no momento em que você chama message.action o método SDK para essa mensagem. Então, o emblema da caixa de entrada está aumentando quando uma nova mensagem é criada para um usuário. E o selo é decrementado quando o usuário interage com a mensagem (por exemplo, clicando nela).

Sinta-se à vontade para chamar o método SDK do badge no carregamento da página, mas note que o badge pode ser alterado durante message.list os métodos do SDK message.action . Ambos os métodos devolvem o selo atualizado, então você precisa considerar atualizar seu selo usando esses valores.

Exemplo

On page load:
xtremepush('ready', function() {
    // make sure to retrieve inbox badge inside ready callback to ensure that user is registered
    xtremepush('inbox', 'badge', {}, function(result) {
        updateMyBadge(result.badge);
    }, function(err) {
        console.log(err);
    });
});

When user clicks to open inbox:
myInboxButton.addEventListener('click', function() {
  xtremepush('inbox', 'message.list', {
    limit: 10,
    offset: 0
  }, function (result) {
    if (result.badge !== undefined) {
        updateMyBadge(result.badge);
    }

    for (var i = 0; i < result.items.length; i++) {
        var item = result.items[i];
        var element = createMyInboxMessageElement(item);

        // Handle click and track open event
        element.addEventListener('click', function () {
            xtremepush('inbox', 'message.action', {
                id: id,
                open: 1
            }, function(result) {
                if (result.badge !== undefined) {
                    updateMyBadge(result.badge);
                }
            }, function(err) {
                console.log(err);
            })
        });
    }

    if (result.more) {
        showMyLoadMoreButton();
    }
  }, function (err) {
    console.log(err);
  });
});