---
title: "Caixa de entrada web personalizada"
slug: "web-custom-inbox"
updated: 2026-06-12T10:30:51Z
published: 2026-06-12T10:30:51Z
canonical: "docs.xtremepush.com/web-custom-inbox"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.xtremepush.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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:

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

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

```json
{
    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:

```json
{
    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:

```json
{
    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:

```javascript
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:

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

> [!WARNING]
> 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:

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

O objeto de ação deve conter:

```json
{
    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.
}
```

> [!NOTE]
> Mensagens clicadas serão consideradas abertas
> 
> Marcar uma mensagem como `click: 1` automaticamente a marca como `open: 1` se um usuário não pudesse clicar nela sem abri-la primeiro.
> 
> No entanto, marcar uma mensagem como `open: 1` não atualizará automaticamente o valor do clique, pois o usuário pode abrir uma mensagem e então não interagir com nenhum dos CTAs dentro dela.

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

```json
{
    badge: integer // Updated inbox badge
}
```

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

```javascript
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:

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

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

```json
{
    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](/documentation/docs/pt-br/inbox-settings) . 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

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