Widget de bandeja de entrada web

La integración de la Bandeja de entrada de mensajes web 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.

Establecer inboxWidget.enable: true registra el dispositivo de un visitante para la entrega en la bandeja de entrada incluso cuando el visitante no ha concedido permiso para notificaciones push, por lo que puede llegar a visitantes que nunca se suscribieron a las notificaciones push.

Nota importante sobre el versionado del SDK (v3.66.0+)

A partir de la versión 3.66.0, el dispositivo de un visitante es rastreado por un ID de hardware vinculado a su navegador antes de que el visitante inicie sesión. Si el visitante borra los datos de su sitio, cambia de navegador o cambia de dispositivo antes de llamar a registerUser, ese seguimiento se interrumpe. Su historial de mensajes anterior se pierde y no se transfiere incluso después de que el visitante inicie sesión.

Prerrequisitos

Para integrar la Bandeja de entrada de mensajes para sitios web, por favor siga la guía.

Integrando el widget

Al inicializar el WebSDK de Pushwoosh, agregue el parámetro inboxWidget:

Ejemplo

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox'
  }
}]);

Disparador

Para renderizar el widget, debe especificar un elemento disparador para el widget. Cualquier elemento DOM en la página podría ser el disparador. 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 disparador. Una vez que se toca el elemento disparador, el widget aparece en la página.

Posicionamiento

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

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 siguiente ejemplo:

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.

Personalizando el widget

Personalizando textos

Para personalizar el texto del widget, agregue los parámetros emptyInboxTitle y emptyInboxText:

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

Personalizando la apariencia

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

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:

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, agregue el siguiente código:

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:

Ejemplo

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

Personalizando los diseños de celda

El widget dibuja un mensaje como uno de los cuatro diseños de celda — classic, banner, captioned, o carousel — los mismos diseños que muestra la vista previa de la campaña en el panel de control. Un diseño que no puede renderizarse con lo que el mensaje contiene se degrada a classic: banner necesita una imagen principal, captioned necesita una imagen principal más un título y un cuerpo, y carousel necesita al menos una diapositiva más un título y un cuerpo.

Para personalizar la apariencia de los diseños, utilice los siguientes parámetros:

Ejemplo

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    unreadDotColor: '#ff4c00',    // punto de no leído en el avatar clásico
    avatarBgColor: '#e6e6e6',     // fondo del avatar clásico
    avatarTextColor: '#333333',   // color inicial del avatar clásico
    avatarSize: 52,               // tamaño del avatar clásico (px)
    mediaRadius: 8,               // radio de esquina de los medios de banner/captioned/carousel (px)
    slideCaptionColor: '#ffffff', // color del texto del pie de foto de la diapositiva del carrusel
    slideScrimColor: '#000000',  // fondo de la leyenda de la diapositiva del carrusel
    pagerDotActiveColor: '#ff4c00', // punto de página activa del carrusel
    pagerDotColor: '#c4c4c4'      // puntos de página inactiva del carrusel
  }
}]);

Restaurando la celda clásica anterior a la v3.75

Establezca inboxWidget.legacyClassicCell: true para mantener el aspecto anterior de la celda clásica: una columna de iconos de 40px en lugar del avatar redondeado de 52px, sin punto de no leído y un cuerpo sin restricciones. Los diseños banner, captioned y carousel no se ven afectados por esta opción.

Gestionarlo en el Panel de Control

Requisitos

• El sitio carga el Web SDK desde la CDN de Pushwoosh, como indica la tarjeta. La tarjeta funciona sea cual sea el Settings source, el fragmento de inicialización de su sitio o esta página (consulte Web Push SDK 3.0), pero la versión del SDK que necesita depende de ese origen:
  • El fragmento de inicialización de su sitio: Web SDK 3.93.1 o posterior. Un SDK anterior ignora la tarjeta y lee inboxWidget únicamente del fragmento.
  • Esta página: Web SDK 3.92 o posterior para los valores de la tarjeta, y 3.93.0 o posterior para la desactivación en npm que se describe a continuación.
• La página tiene el elemento que abre la bandeja de entrada, #pwInbox de forma predeterminada. Si falta, la bandeja de entrada no se abre y la consola del navegador muestra un error Error during Pushwoosh initialization que nombra el elemento que falta e indica dónde cambiar su ID.
• En un sitio que instala el SDK desde npm, la tarjeta puede desactivar el widget, pero no activarlo, ya que es el propio sitio el que construye el widget.

Para configurar el widget desde el Panel de Control:

1. Vaya a Settings → Configure platforms → Web.

2. En la tarjeta Inbox widget, haga clic en Configure.

   

3. Active Show the inbox on the site.

4. Rellene los campos que quiera gestionar desde el panel y deje vacíos los demás. Un campo vacío no se guarda, por lo que sigue aplicándose el valor del fragmento o el valor predeterminado del SDK. Deje vacíos ID of the element that opens the inbox e Insert into (CSS selector) para mantener triggerId y appendTo en el fragmento, junto al código HTML al que apuntan.

5. Compruebe el resultado en la vista previa. Alterne entre With messages y No messages para ver ambos estados.

   

6. Guarde el formulario. Width, px admite un número entero de 200 a 1200, y Corner radius, px, de 0 a 64. Cualquier otro valor muestra un error bajo el campo y no se guarda.

Cómo funciona la tarjeta con el fragmento

Los valores guardados en la tarjeta anulan, clave por clave, las mismas claves inboxWidget del fragmento de inicialización. Cada campo establece una clave:

Sección	Campo	Clave de inboxWidget
Placement	ID of the element that opens the inbox	triggerId
Placement	Opens	position
Placement	Insert into (CSS selector)	appendTo
Texts	Widget title	title
Texts	Title when there are no messages	emptyInboxTitle
Texts	Text when there are no messages	emptyInboxText
Texts	Image when there are no messages (URL)	emptyInboxIconUrl
Appearance	Width, px (200–1200)	widgetWidth
Appearance	Corner radius, px (0–64)	borderRadius
Appearance	Font	fontFamily
Appearance	Background, Text, Border	bgColor, textColor, borderColor
Appearance	Counter background, Counter text, Unread mark	badgeBgColor, badgeTextColor, unreadDotColor

Las claves que la tarjeta no tiene, como los parámetros de diseño de celda y legacyClassicCell, siempre se leen del fragmento.

El interruptor Show the inbox on the site funciona de la misma manera. Hasta que se guarda en el panel, la insignia de la tarjeta muestra Set in the snippet y es el enable del fragmento el que decide si se muestra el widget. Una vez que guarda el interruptor, la insignia muestra On u Off y la tarjeta anula el fragmento:

• Off oculta el widget aunque el fragmento establezca enable: true.
• On muestra el widget aunque el fragmento no tenga ningún inboxWidget. Al igual que enable: true, registra a los visitantes para la entrega en la bandeja de entrada sin permiso de notificaciones push.

Los cambios guardados llegan al sitio en un minuto, en la siguiente carga de la página.

Para devolver el widget al fragmento, haga clic en Return to snippet en la tarjeta y confirme. El botón aparece en cuanto se guarda algo en la tarjeta. Elimina todos los ajustes de la bandeja de entrada guardados en el panel, y el sitio vuelve a usar los ajustes de inboxWidget de su fragmento.

API

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

Ejemplo

Pushwoosh.pwinboxWidget.toggle(open?: boolean);

Abrir el widget lo actualiza desde el servidor, como máximo una vez cada 30 segundos — un mensaje independiente de la Bandeja de entrada de la aplicación viaja por un canal sin notificaciones push, por lo que nada más anuncia uno entre cargas de página.