Saltar al contenido
Guías de usuarioSoporte Solicitar demo Iniciar sesión
Pushwoosh.com

Web push SDK 3.0

Integración

Anchor link to

Ejemplo de integración en GitHub

Obtenga el SDK de Web Push de Pushwoosh y descomprímalo. Debería tener los siguientes archivos:

Anchor link to
  • pushwoosh-service-worker.js

Coloque todos estos archivos en el directorio raíz de nivel superior de su sitio web.

Anchor link to

Inicialice el SDK:

Anchor link to
  1. Incluya el SDK desde nuestro CDN de forma asíncrona.
<script type="text/javascript" src="//cdn.pushwoosh.com/webpush/v3/pushwoosh-web-notifications.js" async></script>
  1. Inicialice el Web Push SDK y asegúrese de poner en cola la inicialización hasta el momento en que el SDK esté completamente cargado.
<script type="text/javascript">
var Pushwoosh = Pushwoosh || [];
Pushwoosh.push(['init', {
    logLevel: 'info', // possible values: error, info, debug
    applicationCode: 'XXXXX-XXXXX', // you application code from Pushwoosh Control Panel
    apiToken: 'XXXXXXX', //  Device API Token
    safariWebsitePushID: 'web.com.example.domain', //  unique reverse-domain string, obtained in you Apple Developer Portal. Only needed if you send push notifications to Safari browser
    defaultNotificationTitle: 'Pushwoosh', // sets a default title for push notifications
    defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png', // URL to custom custom notification image
    autoSubscribe: false, // or true. If true, prompts a user to subscribe for pushes upon SDK initialization
    subscribeWidget: {
      enable: true
    },
    userId: 'user_id', // optional, set custom user ID
    tags: {
        'Name': 'John Smith'     // optional, set custom Tags
    }
}]);
</script>

Popups web

Anchor link to

Añada webPopups a su objeto init para habilitar las campañas de popups web en su sitio.

webPopups: {
  enable: true,
},

Las campañas de popups web muestran superposiciones que usted configura en el Panel de Control, como promociones, anuncios o formularios de captura de clientes potenciales. A diferencia del popup de suscripción personalizado (subscribePopup), que solo gestiona la aceptación de notificaciones push web, las campañas de popups web pueden mostrar cualquier contenido que configure. Para la configuración en el Panel de Control, consulte Entender los popups web.

Botón de suscripción a notificaciones push

Anchor link to

Para animar a sus usuarios a suscribirse a las notificaciones push, recomendamos implementar un botón de suscripción a notificaciones push en su sitio web. ¡Mejore la experiencia del usuario y consiga más suscriptores!

Configuración

Anchor link to

Para terminar de implementar las notificaciones push en su sitio web, necesita configurar las plataformas web en su Panel de Control de Pushwoosh siguiendo nuestras guías paso a paso:

Registrar el service worker en un ámbito diferente

Anchor link to

A veces no se puede colocar el archivo del service worker en un directorio raíz de un sitio web, sino en un subdirectorio.

En este caso, modifique la configuración (paso 4.3) añadiendo un parámetro

serviceWorkerUrl: “/push-notifications/pushwoosh-service-worker.js”

donde /push-notifications/pushwoosh-service-worker.js es la ruta al archivo pushwoosh-service-worker.js.

Manejadores de eventos

Anchor link to

En el Web SDK 3.0 de Pushwoosh puede suscribirse a ciertos eventos para rastrearlos**,** o darse de baja de eventos si ya no necesita rastrearlos.

Para rastrear la carga del Web SDK 3.0, dispare el evento onLoad de la siguiente manera:

// Load Event
Pushwoosh.push(['onLoad', (api) => {
  console.log('Pushwoosh load!');
}]);

Para rastrear la inicialización correcta del Web SDK, dispare el evento onReady:

// Ready Event
Pushwoosh.push((api) => {
  console.log('Pushwoosh ready!');
});

Para suscribirse o darse de baja de cualquiera de los eventos del SDK, utilice los manejadores después de la carga del SDK:

Pushwoosh.push(['onLoad', (api) => {
  function onEventNameHandler() {
    console.log('Triggered event: event-name!');
  }


  // To subscribe to an event:
  Pushwoosh.addEventHandler('event-name', onEventNameHandler)


  // To unsubscribe from an event:
  Pushwoosh.removeEventHandler('event-name', onEventNameHandler)
}]);

Eventos del SDK

Anchor link to

Evento de suscripción

Anchor link to

Se ejecuta después de que un usuario acepta recibir notificaciones push.

Pushwoosh.push(['onLoad', (api) => {
  Pushwoosh.addEventHandler('subscribe', (payload) => {
    console.log('Triggered event: subscribe');
  });
}]);

Evento de anulación de suscripción

Anchor link to

Se ejecuta después de que un dispositivo se da de baja de las notificaciones.

Pushwoosh.push(['onLoad', (api) => {
  Pushwoosh.addEventHandler('unsubscribe', (payload) => {
    console.log('Triggered event: unsubscribe');
  });
}]);

Eventos del widget de suscripción

Anchor link to

Rastrea la visualización de un widget de Solicitud de Suscripción.

Pushwoosh.push(['onLoad', (api) => {
  // Executed on displaying of the Subscription Prompt widget
  Pushwoosh.addEventHandler('show-subscription-widget', (payload) => {
    console.log('Triggered event: show-subscription-widget');
  });


  // Executed on hiding of the Subscription Prompt widget
  Pushwoosh.addEventHandler('hide-subscription-widget', (payload) => {
    console.log('Triggered event: hide-subscription-widget');
  });
}]);

Eventos del diálogo de permiso de notificación

Anchor link to

Rastrea la visualización del diálogo de suscripción nativo.

Pushwoosh.push(['onLoad', function (api) {
  // Executed on permission dialog displaying
  Pushwoosh.addEventHandler('show-notification-permission-dialog', (payload) => {
    console.log('Triggered event: show-notification-permission-dialog');
  });


  // Executed on hiding the permission dialog with one of three possible statuses:
  // 1. default - the dialog is closed
  // 2. granted - permission is granted
  // 3. denied - permission is denied
  Pushwoosh.addEventHandler('hide-notification-permission-dialog', (payload) => {
    console.log('Triggered event: hide-notification-permission-dialog', payload.permission);
  });
}]);

Eventos de permiso

Anchor link to

Comprueba el estado del permiso de notificaciones push en la inicialización del SDK; rastrea la actualización de este estado cada vez que tiene lugar.

Pushwoosh.push(['onLoad', (api) => {
  // Executed during the SDK initialization if 'autoSubscribe: false' or/and if a user ignores a push notification prompt.
  Pushwoosh.addEventHandler('permission-default', (payload) => {
    console.log('Triggered event: permission-default');
  });


  // Executed during the SDK initialization if notifications are blocked or once a user blocks push notifications.
  Pushwoosh.addEventHandler('permission-denied', (payload) => {
    console.log('Triggered event: permission-denied');
  });


  // Executed during the SDK initialization if notifications are allowed or once a user allows push notifications.
  Pushwoosh.addEventHandler('permission-granted', (payload) => {
    console.log('Triggered event: permission-granted');
  });
}]);

Evento de recepción de push

Anchor link to

Rastrea la entrega de una notificación push a un dispositivo.

Pushwoosh.push(['onLoad', (api) => {
  // Executed when a push notification is displayed.
  Pushwoosh.addEventHandler('receive-push', (payload) => {
    console.log('Triggered event: receive-push', payload.notification);
  });
}]);

Eventos de notificación

Anchor link to

Rastrea si una notificación push es abierta o cerrada por un usuario.

Pushwoosh.push(['onLoad', (api) => {
  // Executed when a user clicks on notification.
  Pushwoosh.addEventHandler('open-notification', (payload) => {
    console.log('Triggered event: open-notification', payload.notification);
  });


  // Executed when a user closes a push notification.
  Pushwoosh.addEventHandler('hide-notification', (payload) => {
    console.log('Triggered event: hide-notification', payload.notification);
  });
}]);

Eventos de Inbox

Anchor link to

Rastrea las notificaciones enviadas al Inbox.

Pushwoosh.push(['onLoad', (api) => {
  // Executed by ServiceWorker after the Inbox Message is received and saved to indexedDB.
  Pushwoosh.addEventHandler('receive-inbox-message', (payload) => {
    console.log('Triggered event: receive-inbox-message', payload.message);
  });


  // Executed after the Inbox is updated automatically while the page is loading.
  Pushwoosh.addEventHandler('update-inbox-messages', (payload) => {
    console.log('Triggered event: receive-inbox-message', payload.messages);
  });
}]);

Eventos de popup de suscripción personalizado

Anchor link to

Para detalles sobre cómo manejar los eventos de popup de suscripción personalizado, consulte la Guía de Eventos de Popup de Suscripción Personalizado.

API

Anchor link to

Después de que el Web Push SDK se inicialice, puede hacer las siguientes llamadas a la API de Pushwoosh. Todos los métodos devuelven objetos Promise.

Pushwoosh.push((api) => {
  // Set tags for a user
  api.setTags({
    'Tag Name 1': 'value1',
    'Tag Name 2': 'value2'
  });


  // Get tags for a user from server
  api.getTags();


  // Register user ID
  api.registerUser('user123');


    // Register user email
  api.registerEmail('user@example.com');


  // Register SMS number
  api.registerSmsNumber('+15551234567');


  // Register WhatsApp number
  api.registerWhatsappNumber('+1234567890');


  // Post an Event
  api.postEvent('myEventName', {attributeName: 'attributeValue'});


  //Unregister from notifications
  api.unregisterDevice();


  // Set the device language (overrides the value in the "Language" Tag)
  api.setLanguage('es');


  // Alternatively Multi-register user with devices and channels
  api.multiRegisterDevice({
    user_id: 'user123',
    email: 'user@example.com',
    sms_phone_number: '+1234567890',
    tags: {
      'UserType': { operation: TTagOperationSet, value: 'Premium' },
      'Interests': { operation: TTagOperationAppend, values: ['sports', 'technology'] }
    }
  });
});

multiRegisterDevice

Anchor link to

Método de registro mejorado que permite registrar un perfil de usuario con múltiples dispositivos y canales de mensajería en una sola llamada a la API. Este método es particularmente útil para aplicaciones multiplataforma o al implementar estrategias de mensajería omnicanal.

Pushwoosh.push((api) => {
  api.multiRegisterDevice({
    user_id: 'user123',              // Optional: User identifier
    email: 'user@example.com',       // Optional: Email for email messaging
    sms_phone_number: '+1234567890', // Optional: SMS phone number (E.164 format)
    whatsapp_phone_number: '+1234567890', // Optional: WhatsApp number (E.164 format)
    kakao_phone_number: '+1234567890',    // Optional: KakaoTalk number (E.164 format)
    language: 'en',                  // Optional: Language code (ISO 639-1)
    timezone: 'America/New_York',    // Optional: Timezone identifier
    city: 'New York',               // Optional: City for targeting
    country: 'US',                  // Optional: Country for targeting
    state: 'NY',                    // Optional: State for targeting
    tags: {                         // Optional: Tag values with operations
      'UserType': {
        operation: TTagOperationSet,     // Set tag value (0)
        value: 'Premium'
      },
      'Interests': {
        operation: TTagOperationAppend,  // Append to tag value (1)
        values: ['sports', 'technology']
      },
      'LoginCount': {
        operation: TTagOperationIncrement, // Increment tag value (3)
        value: '1'
      }
    },
    push_devices: [                 // Optional: Array of push devices
      {
        hwid: 'web-device-456',
        platform: TPlatformChrome, // Chrome platform (11)
        push_token: 'fcm-token-here',
        app_version: '2.1.0',
        platformData: {
          public_key: 'web-push-public-key',
          auth_token: 'web-push-auth-token',
          browser: 'chrome'
        }
      }
    ]
  })
  .then((response) => {
    console.log('Multi-registration successful:', response);
  })
  .catch((error) => {
    console.error('Multi-registration failed:', error);
  });
});

Tipos de Plataforma:

  • TPlatformSafari (10): Plataforma Safari
  • TPlatformChrome (11): Plataforma Chrome
  • TPlatformFirefox (12): Plataforma Firefox

Tipos de Operación de Tag:

  • TTagOperationSet (0): Establecer valor de Tag (reemplaza el valor existente)
  • TTagOperationAppend (1): Añadir al valor de Tag (añadir a la lista)
  • TTagOperationRemove (2): Eliminar valor de Tag (eliminar de la lista)
  • TTagOperationIncrement (3): Incrementar valor de Tag (incremento numérico)

Beneficios:

  • Llamada única a la API: Registre múltiples dispositivos y canales a la vez
  • Operación atómica: Todos los registros tienen éxito o fallan juntos
  • Centrado en el usuario: Asocia todos los dispositivos con un único perfil de usuario
  • Etiquetado avanzado: Soporta operaciones complejas de Tags
  • Multiplataforma: Maneja múltiples plataformas simultáneamente

Ejemplo de envío de Tags a Pushwoosh:

Pushwoosh.push((api) => {
  var myCustomTags = {
    'Tag 1': 123,
    'Tag 2': 'some string'
  };
  api.setTags(myCustomTags)
    .then((res) => {
      var skipped = res && res.skipped || [];
      if (!skipped.length) {
        console.log('success');
      }
      else {
        console.warn('skipped tags:', skipped);
      }
    })
    .catch((err) => {
      console.error('setTags error:', err);
    });
});

Incrementar el valor de un Tag

Anchor link to

Para incrementar un valor de un Tag de tipo Número, utilice el parámetro operation con el valor ‘increment’ de la siguiente manera:

Pushwoosh.push((api) => {
  api.setTags({
    'Tag 1': {
      operation: 'increment',
      value: 1
    }
  })
});

Añadir valores a un Tag

Anchor link to

Para añadir nuevos valores al Tag de tipo Lista existente, utilice el parámetro operation con el valor ‘append’ de la siguiente manera:

Pushwoosh.push((api) => {
  api.setTags({
    'Tag 3': {
      operation: 'append',
      value: ['Value3']
    }
  })
});

Eliminar valor de un Tag

Anchor link to

Para eliminar un valor de un Tag de tipo Lista, utilice el parámetro operation con el valor ‘remove’ de la siguiente manera:

Pushwoosh.push((api) =>{
  api.setTags({
    'Tag 3': {
      operation: 'remove',
      value: ['Value2']
    }
  })
});

Métodos públicos

Anchor link to

Pushwoosh.subscribe()

Este método se utiliza para solicitar el permiso de un usuario para las notificaciones push. Si un usuario ya está suscrito, el método dejará de ejecutarse.

Si un usuario aún no se ha suscrito a las notificaciones push:

1. Se solicita el permiso para las notificaciones push.

2. Si un usuario permite las notificaciones, se activa el evento onSubscribe.

Pushwoosh.subscribe() se ejecuta automáticamente si se establece autoSubscribe: true. durante la inicialización del SDK.

Llame a este método si ha elegido solicitar manualmente a un usuario que se suscriba a las notificaciones push utilizando el parámetro autoSubscribe: false durante la inicialización:

<button onclick="Pushwoosh.subscribe()">Suscribirse</button>
<script>
  Pushwoosh.push(['onSubscribe', (api) => {
    console.log('User successfully subscribed');
  }]);
</script>

Pushwoosh.unsubscribe()

  1. Se ejecuta el método /unregisterDevice.
  2. Se activa el evento onUnsubscribe.
<button onclick="Pushwoosh.unsubscribe()">Darse de baja</button>
<script type="text/javascript">
  Pushwoosh.push(['onUnsubscribe', (api) => {
    console.log('User successfully unsubscribed');
  }]);
</script>

Pushwoosh.isSubscribed()

Comprueba si un usuario está suscrito y devuelve un indicador verdadero/falso.

Pushwoosh.isSubscribed().then((isSubscribed) => {
  console.log('isSubscribed', isSubscribed);
});

Pushwoosh.getHWID()

Devuelve el HWID de Pushwoosh.

Pushwoosh.getHWID().then((hwid) => {
  console.log('hwid:', hwid);
});

Pushwoosh.getPushToken()

Devuelve el token de push si está disponible.

Pushwoosh.getPushToken().then((pushToken) => {
  console.log('pushToken:', pushToken);
});

Pushwoosh.getUserId()

Devuelve el ID de Usuario si está disponible.

Pushwoosh.getUserId().then((userId) => {
  console.log('userId:', userId);
});

Pushwoosh.getParams()

Devuelve una lista de los siguientes parámetros:

Pushwoosh.getParams().then((params) => {
  params = params || {};
  var hwid = params.hwid;
  var pushToken = params.pushToken;
  var userId = params.userId;
});

Pushwoosh.isAvailableNotifications()

Comprueba si un navegador es compatible con el WebSDK 3.0 de Pushwoosh, devuelve ‘true’ o ‘false’.

Pushwoosh.isAvailableNotifications() // true/false

Métodos de InboxMessages

Anchor link to

messagesWithNoActionPerformedCount(): Promise<number>

Devuelve el número de mensajes abiertos.

Pushwoosh.pwinbox.messagesWithNoActionPerformedCount()
  .then((count) => {
    console.log(`${count} messages opened`);
  });

unreadMessagesCount()

Devuelve el número de mensajes no leídos.

Pushwoosh.pwinbox.unreadMessagesCount()
  .then((count) => {
    console.log(`${count} messages unread`);
  });

messagesCount(): Promise<number>

Devuelve el número total de mensajes.

Pushwoosh.pwinbox.messagesCount()
  .then((count) => {
    console.log(`${count} messages`);
  });

loadMessages(): Promise<Array>

Carga la lista de mensajes no eliminados.

Pushwoosh.pwinbox.loadMessages()
  .then(() => {
    console.log('Messages have been loaded');
  });

readMessagesWithCodes(codes: Array<string>): Promise<void>

Marca los mensajes como leídos por Inbox_Ids.

Pushwoosh.pwinbox.readMessagesWithCodes(codes)
  .then(() => {
    console.log('Messages have been read');
  });

performActionForMessageWithCode(code: string): Promise<void>

Realiza la acción asignada a un mensaje y marca el mensaje como leído.

Pushwoosh.pwinbox.performActionForMessageWithCode(code)
  .then(() => {
    console.log('Action has been performed');
  });

deleteMessagesWithCodes(codes: Array<string>): Promise<void>

Marca los mensajes como eliminados.

Pushwoosh.pwinbox.deleteMessagesWithCodes([code])
  .then(() => {
    console.log('Messages have been deleted');
  });

syncMessages(): Promise<void>

Sincroniza los mensajes con el servidor.

Pushwoosh.pwinbox.syncMessages()
  .then(() => {
    console.log('Messages have been synchronized');
  });

Soporte para Aplicaciones Web Progresivas

Anchor link to

Para integrar Pushwoosh en su Aplicación Web Progresiva (PWA), siga los pasos que se describen a continuación.

1. Copie la ruta a su archivo de Service Worker:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js') // <- your service worker url
  });
}

Luego, utilice el parámetro serviceWorkerUrl al inicializar el WebSDK de la siguiente manera:

var Pushwoosh = Pushwoosh || [];
Pushwoosh.push(['init', {
  logLevel: 'error',
  applicationCode: 'XXXXX-XXXXX',
  safariWebsitePushID: 'web.com.example.domain',
  defaultNotificationTitle: 'Pushwoosh',
  defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png',
  serviceWorkerUrl: '/service-worker.js', // <- your service worker url
}]);

El WebSDK no registra el nuevo Service Worker inmediatamente; un Service Worker se registra cuando es necesario:

  • cuando un dispositivo recibe un token de push (en el registro del dispositivo o en la re-suscripción),
  • cuando se elimina un token de push (al eliminar un dispositivo de la base de usuarios).

Esto acelera la carga de sus páginas al reducir el número de solicitudes al servidor.

Los navegadores no permiten que dos Service Workers diferentes se registren al mismo tiempo (lea más: https://github.com/w3c/ServiceWorker/issues/921), por lo que para que su PWA funcione correctamente, se debe registrar un Service Worker común para su base de código y la base de código de Pushwoosh.

2. Añada la siguiente cadena a su Service Worker (al principio o al final, no importa):

importScripts('https://cdn.pushwoosh.com/webpush/v3/pushwoosh-service-worker.js' + self.location.search);

Así habilita la recepción y el procesamiento de las notificaciones push enviadas a través de los servicios de Pushwoosh para su Service Worker.

Instalación desde Google Tag Manager

Anchor link to

Utilice el siguiente código en su Google Tag Manager para inicializar el SDK de Pushwoosh. Cree una Etiqueta HTML Personalizada y pegue el código a continuación. Asegúrese de cambiar su Código de Aplicación de Pushwoosh, el ID de Sitio Web de Safari y la URL de la imagen de notificación predeterminada.
También establezca una prioridad alta de Activación de Etiqueta (ej: 100) y actívela en Todas las Páginas. Vea a continuación una captura de pantalla.Copiar

<script type="text/javascript" src="//cdn.pushwoosh.com/webpush/v3/pushwoosh-web-notifications.js" async></script>
<script type="text/javascript">
  var Pushwoosh = Pushwoosh || [];
  Pushwoosh.push(['init', {
    logLevel: 'error',
    applicationCode: 'XXXXX-XXXXX',
    safariWebsitePushID: 'web.com.example.domain',
    defaultNotificationTitle: 'Pushwoosh',
    defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png',
    autoSubscribe: true,
    subscribeWidget: {
      enable: false
    },
    userId: 'user_id'
  }]);
</script>