EN

  |  ES

/Guía Rápida de Integración /Notificaciones web push /Web Estándar

Integración en Web Estándar

notificaciones web push

Tiempo estimado de integración: 10 minutos.

Si utilizas npm pulsa aquí.

Si usas Wordpress, visita nuestra guía específica aquí.

Si quieres integrar a través de Google Tag Manager, entonces utiliza esta guía.


Para implementar nuestra herramienta de notificaciones web push en tu página necesitas:

Importante: el valor appKey es único y personal. Puedes obtenerlo accediendo a tu cuenta > configuración > valor del App Key

<script
  src="/sdk.min.js"
  onload="indigitall.init({
    appKey: 'tuAppKeyAquí',
    workerPath: '/worker.min.js',
    requestLocation: true
  })"
  async>
</script>


Integrar en Safari (Opcional)

Para poder enviar notificaciones a través de Safari, es necesario "crear" un botón específico para este navegador.

Te mostramos un código de ejemplo que podrías usar:

(Recuerda que el appKey debes buscarlo en tu consola de indigitall pulsando en Configuración > Proyectos > App Key)

<script>
  var indigitallParams = {
    appKey: "tuAppKeyAquí",
    workerPath: '/indigitall/worker.min.js'
  };

  function onIndigitallLoaded(){
    indigitall.init(indigitallParams);
    if(indigitall.isSafariPushNotificationSupported() && !localStorage.getItem('indigitall.repository.PUSH_TOKEN')){
        var button = document.createElement("span");
        button.innerHTML = `<div id="indigitall-button" onclick="indigitall.launchNotificationPermissionForSafari();document.getElementById('indigitall-button').remove();" style="position: fixed; bottom: 15px; left: 15px; z-index: 999; transition: .2s ease;">
        <a style="display: block; border-radius: 50%; border: 1px solid #74d227; width: 50px; height: 50px; color: #fff; background: linear-gradient(to bottom,#89da3e 1%,#6dbf37 100%); text-align: center; vertical-align: middle; line-height: 60px; cursor: pointer; box-shadow: 0 0 3px #000; transition: .35s ease; transition-property: all; font-size: 20px; text-shadow: 0 0 2px rgba(0,0,0,.5); position: relative;">
            <svg style="width:24px;height:24px" viewBox="0 0 24 24">
            <path fill="#f5f5f5" d="M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21" />
            </svg>
        </a>
        </div>`;
        document.getElementsByTagName("body")[0].appendChild(button);
    }
}
</script>
<script src="/indigitall/sdk.min.js" onload="onIndigitallLoaded()"></script>

¿Cómo subir archivos a tu servidor o acceder a ellos?

Puedes hacerlo mediante FTP o desde el panel de control de tu servidor (cPanel, directAdmin, etc) entre otras formas. Más abajo encontrarás un video explicativo del proceso. En menos de 10 minutos, deberías tenerlo.

Puedes pedir ayuda a tu proveedor de hosting o a tu programador de confianza enviando estas instrucciones.

Verifica la integración

Si todo ha ido bien, al acceder a tu web nuevamente, deberías ver en tu navegador un mensaje para permitir notificaciones. Ejemplo:


New tag


Pulsa en Permitir.


Luego abre la consola de desarrollador (pulsa F12) y ve a Consola, deberías ver algo como esto:

[IND] Client:  Method: PUT
URL: https://device-api.indigitall.com/v1/device?appKey=(tuAppKeyAquí)&deviceId=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
Request Body: {
  [...]
  "pushToken": "https://fcm.googleapis.com/fcm/send/xxxx",s
  "browserPublicKey": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "browserPrivateKey": "xxxxxxxxxxxx"
}
Response Code: 200
Response Message: OK
Response Body: {
  "deviceId": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
  "enabled": true,
  "platform": "webpush"
}


Fíjate que Response Code tenga el valor 200.

Si todo es correcto, enhorabuena, ¡ya solo te falta crear y enviar tu primera campaña!

Las campañas se administran desde el panel de control de tu cuenta indigitall. Acceder a tu cuenta.

Recursos

Guía de usuario: crear campañas, editar y más.

Guía integración Plugin Wordpress

Guía integración Google Tag Manager (GTM)

Contáctanos