Eventos
Reacciona al ciclo de vida del widget y al contador de notificaciones desde tu propio código.
Eventos disponibles
Suscríbete a eventos del ciclo de vida del widget con PH('on', event, handler). Cancela la suscripción con PH('off', event, handler).
| Evento | Payload | Descripción |
|---|---|---|
ready | — | Se dispara una vez tras la inicialización del iframe del widget. El primer evento badgeCount se emite poco después, mientras el widget aún está cerrado. |
open | — | Se dispara cuando el panel del widget se hace visible. |
close | — | Se dispara cuando el panel del widget se oculta. |
badgeCount | { count: number } | Se dispara cuando cambia el contador de no leídos. count es la suma de: anuncios no vistos (más recientes que la última visita del usuario a la pestaña de Anuncios) + ideas enviadas por el usuario que han recibido nuevos comentarios o un cambio de estado desde la última vez que se vieron. |
// Subscribe
PH('on', 'open', function() { console.log('opened'); });
PH('on', 'close', function() { console.log('closed'); });
PH('on', 'ready', function() { console.log('widget ready'); });
PH('on', 'badgeCount', function(data) {
document.getElementById('my-badge').textContent = data.count;
});
// Unsubscribe
function onOpen() { /* ... */ }
PH('on', 'open', onOpen);
PH('off', 'open', onOpen);El evento badgeCount se emite siempre, incluso si has desactivado el punto rojo del lanzador con PH('init', { badge: false }).
Badge personalizado
Si quieres ocultar el lanzador predeterminado del widget y usar tu propio botón (por ejemplo, un ítem «Feedback» en tu navegación), puedes desactivar el lanzador integrado desde el Editor de Widget y usar el evento badgeCount para mostrar un badge de notificación en tu propio elemento.
El contador refleja dos fuentes:
| Fuente | Se cuenta cuando | Se limpia cuando |
|---|---|---|
| Anuncios | Un anuncio publicado tiene fecha posterior a la última visita del usuario a la pestaña de Anuncios. | El usuario abre la pestaña de Anuncios. |
| Mis ideas | Una idea enviada por el usuario ha recibido un nuevo comentario o un cambio de estado desde que el usuario abrió por última vez la vista de detalle de esa idea. | El usuario abre la vista de detalle de la idea. |
El estado de no leídos se almacena en localStorage bajo las claves ph-widget-{widgetId}-last-visit y ph-widget-{widgetId}-my-ideas. Persiste entre cargas de página pero está limitado al navegador — un usuario en otro dispositivo verá de nuevo el contador completo.
<!-- Your own trigger button -->
<button id="feedback-btn" style="position:relative">
Feedback
<span id="ph-badge" style="display:none; position:absolute; top:-4px; right:-4px;
width:16px; height:16px; border-radius:50%; background:#ef4444;
color:#fff; font-size:10px; line-height:16px; text-align:center;"></span>
</button>
<script>
PH('init', { widgetId: 'YOUR_WIDGET_ID', badge: false });
PH('on', 'badgeCount', function(data) {
var badge = document.getElementById('ph-badge');
if (data.count > 0) {
badge.textContent = data.count;
badge.style.display = 'block';
} else {
badge.style.display = 'none';
}
});
document.getElementById('feedback-btn').addEventListener('click', function() {
PH('toggle');
});
</script>El evento badgeCount se dispara automáticamente al cargar el widget — mientras el panel aún está cerrado — por lo que tu badge se rellena antes de que el usuario haya interactuado con el widget. Se vuelve a disparar cada vez que cambia el contador: el usuario abre la pestaña de Anuncios o ve una idea con actividad pendiente.