# Widget da caixa de entrada da web

A integração da [Caixa de Entrada de Mensagens da Web](/pt/developer/guides/message-inbox/web-message-inbox/) em seu site aumenta drasticamente as conversões. Um **Widget da Caixa de Entrada da Web** pronto para uso está inscrito em todos os métodos necessários para se comunicar com os usuários. Basta integrar o widget em seu site e personalizar sua aparência para se adequar à sua marca.

## Pré-requisitos

Para integrar a Caixa de Entrada de Mensagens para sites, siga o [guia](/pt/developer/guides/message-inbox/web-message-inbox/).

## Integrando o widget

Ao inicializar o WebSDK da Pushwoosh, adicione o parâmetro `inboxWidget`:

```txt title="Exemplo"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox'
  }
}]);
```

### Gatilho

Para renderizar o widget, você deve especificar um **elemento de gatilho** para o widget. Qualquer elemento DOM na página pode ser o gatilho. Especifique seu ID como “pwInbox” ou atribua qualquer ID personalizado ao parâmetro `triggerId` ao inicializar o SDK.
Quando o WebSDK é inicializado, o selo de mensagens não lidas é exibido no elemento de gatilho. Assim que o elemento de gatilho é tocado, o widget aparece na página.

<img src="/web-push-notifications-web-inbox-widget-1.webp" alt=""/>

### Posicionamento

Por padrão, o widget está localizado na direção oposta à borda da tela mais próxima do elemento de gatilho.
Você pode definir a posição do widget através dos parâmetros de configuração:

```txt title="Exemplo"
Pushwoosh.push(['init', {

  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    position: 'top'
  }
}]);
```

Por padrão, o `inboxWidget` deve ser colocado antes da tag de fechamento \</body>.
Renderize o widget em qualquer lugar da página, como mostrado no exemplo abaixo:

```txt title="Exemplo"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {

    enable: true,
    triggerId: 'pwInbox',
    appendTo: '.widget-parent-element-class'
  }
}]);
```

A busca por um elemento pai é realizada por querySelector, portanto, precisa de uma especificação clara de uma classe, id ou elemento.

## Personalizando o widget

### Personalizando textos

Para personalizar o texto do widget, adicione os parâmetros `emptyInboxTitle` e `emptyInboxText`:

```txt title="Exemplo"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    title: 'Inbox',                                 // título do widget
    emptyInboxTitle: 'You\'re all caught up',       // título do widget de caixa de entrada vazia
    emptyInboxText: 'There are no new messages. Stay tuned!'    // texto do widget de caixa de entrada vazia
  }
}]);
```

O resultado se parece com isto:

<img src="/web-push-notifications-web-inbox-widget-2.webp" alt=""/>

### Personalizando a aparência

Para personalizar a **aparência** do widget, use os seguintes parâmetros:

```txt title="Exemplo"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    bgColor: '#ffffff',         // fundo do widget
    borderColor: 'transparent', // cor da borda do widget
    borderRadius: 4,            // raio da borda do widget (px)
    widgetWidth: 350,           // largura do widget (px)
    zIndex: 100                 // z-index
  }
}]);
```

O **selo de contagem de mensagens não lidas** pode ser personalizado da seguinte forma:

```txt title="Exemplo"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    badgeBgColor: '#ff4c00',    // cor do selo
    badgeTextColor: '#ffffff'   // cor do texto do selo
  }
}]);
```

Para personalizar as **propriedades do texto**, adicione o seguinte código:

```txt title="Exemplo"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    textColor: '#333333',                       // cor do texto
    fontFamily: 'Helvetica, Arial, sans-serif', // fonte
    messageTitleColor: '#7a7a7a',               // cor do título das mensagens
    timeTextColor: '#c4c4c4',                   // cor do texto do carimbo de data/hora
    emptyInboxTitleColor: '#333333',            // cor do título da caixa de entrada vazia
    emptyInboxTextColor: '#7a7a7a'              // cor do texto da caixa de entrada vazia
  }
}]);
```

Por fim, você pode especificar o **ícone para a caixa de entrada vazia**:

```txt title="Exemplo"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    emptyInboxIconUrl: 'https://pushon.pushwoosh.com/images/icon-empty-inbox.png'   // caminho da URL para um ícone
  }
}]);
```

## API

Para abrir ou fechar o widget, use o seguinte método da API:

```txt title="Exemplo"
Pushwoosh.pwinboxWidget.toggle(open?: boolean);
```