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.

Prerrequisitos

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

Integración del widget

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

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.

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:

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:

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:

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

Personalización de 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, añada 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
  }
}]);

API

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

Ejemplo

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