# Widget de bandeja de entrada web

La integración de la [Bandeja de entrada de mensajes web](/es/developer/guides/message-inbox/web-message-inbox/) en su sitio web aumenta las conversiones drásticamente. Un **Widget de Bandeja de Entrada Web** listo para usar está suscrito de fábrica a todos los métodos necesarios para comunicarse con los usuarios. Simplemente integre el widget en su sitio web y personalice su apariencia para que se ajuste a su marca.

## Prerrequisitos

Para integrar la Bandeja de entrada de mensajes para sitios web, siga la [guía](/es/developer/guides/message-inbox/web-message-inbox/).

## Integración del widget

Al inicializar el WebSDK de Pushwoosh, añada el parámetro `inboxWidget`:

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

### Activador

Para renderizar el widget, debe especificar un **elemento activador** para el widget. Cualquier elemento DOM en la página podría ser el activador. Especifique su ID como “pwInbox” o asigne cualquier ID personalizado al parámetro `triggerId` al inicializar el SDK.\
Cuando se inicializa el WebSDK, la insignia de mensajes no leídos se muestra en el elemento activador. Una vez que se toca el elemento activador, el widget aparece en la página.

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

### Posicionamiento

Por defecto, el widget se encuentra en la dirección opuesta al borde de la pantalla más cercano al elemento activador.\
Puede establecer la posición del widget a través de los parámetros de configuración:

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

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

Por defecto, el `inboxWidget` debe colocarse antes de la etiqueta de cierre `\</body>`.\
Renderice el widget en cualquier parte de la página como se muestra en el ejemplo a continuación:

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

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

La búsqueda de un elemento padre se realiza mediante `querySelector`, por lo que necesita una especificación clara de una clase, id o elemento.

## Personalización del widget

### Personalización de textos

Para personalizar el texto del widget, añada los parámetros `emptyInboxTitle` y `emptyInboxText`:

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

El resultado se ve así:

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

### Personalización de la apariencia

Para personalizar la **apariencia** del widget, utilice los siguientes parámetros:

```txt title="Ejemplo"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    bgColor: '#ffffff',         // fondo del widget
    borderColor: 'transparent', // color del borde del widget
    borderRadius: 4,            // radio del borde del widget (px)
    widgetWidth: 350,           // ancho del widget (px)
    zIndex: 100                 // z-index
  }
}]);
```

La **insignia de recuento de mensajes no leídos** se puede personalizar de la siguiente manera:

```txt title="Ejemplo"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    badgeBgColor: '#ff4c00',    // color de la insignia
    badgeTextColor: '#ffffff'   // color del texto de la insignia
  }
}]);
```

Para personalizar las **propiedades del texto**, añada el siguiente código:

```txt title="Ejemplo"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    textColor: '#333333',                       // color del texto
    fontFamily: 'Helvetica, Arial, sans-serif', // fuente
    messageTitleColor: '#7a7a7a',               // color del título de los mensajes
    timeTextColor: '#c4c4c4',                   // color del texto de la marca de tiempo
    emptyInboxTitleColor: '#333333',            // color del título de la bandeja de entrada vacía
    emptyInboxTextColor: '#7a7a7a'              // color del texto de la bandeja de entrada vacía
  }
}]);
```

Por último, puede especificar el **icono para la bandeja de entrada vacía**:

```txt title="Ejemplo"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    emptyInboxIconUrl: 'https://pushon.pushwoosh.com/images/icon-empty-inbox.png'   // Ruta URL a un icono
  }
}]);
```

## API

Para abrir o cerrar el widget, utilice el siguiente método de la API:

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