| ES

SDK Web con Javascript

guía avanzada para configurar el SDK de Javascript

Indice

1. Propiedades configurables
2. Callbacks que ofrece el SDK
3. Administrar dispositivo
4. Grupos de interés
5. Enviar eventos personalizados
6. Mensajes In-App
7. Inbox
8. Inicialización personalizada
9. Documentación de referencia
10. Changelog

1. Propiedades configurables

En esta sección encontrarás una serie de funcionalidades más avanzadas y que requieren de un desarrollo más complejo. Aconsejamos que sea un desarrollador el encargado de esta configuración.

1.1. Activar las notificaciones geolocalizadas

El SDK de indigitall puede gestionar la localización del usuario. Esto te permite usar los filtros de localización en la pantalla de enviar campaña push (Campañas>Push>Nueva campaña push>Filtros>Filtros geográficos)

Una vez hayamos habilitado esta funcionalidad, el usuario final tendrá que dar su consentimiento al permiso de localización y habilitar los servicios de localización, para que la aplicación obtenga la ubicación exacta del usuario.

Para poder usar la funcionalidad de la localización a través del SDK de indigitall es necesario añadir el método requestLoation a la configuración inicial.

Puedes consultar el fragmento de código más abajo.

<script
  src="/es/indigitall/sdk.min.js"
  onload="indigitall.init({
    ...
    requestLocation: true
    ...
  })"
  async>
</script>

Opciones que debes tener en cuenta

Es necesario estar al tanto de los cambios de localización del usuario para así poderlo guardar en la herramienta de indigitall.

Para verificar si el dispositivo ha cambiado su ubicación, se debe agregar el callback onLocationUpdated a la configuración inicial para así poder escuchar estos cambios de localización en ese método.

Puedes consultar el extracto de código más abajo.

<script>
  function onLocationUpdated(location){
    console.log("Location\n \t - Latitude:"+location.coords.latitude+"\n \t - Longitude: "+ location.coords.longitude);
  }
</script>

<script
  src="/es/indigitall/sdk.min.js"
  onload="indigitall.init({
    ...
    onLocationUpdated: onLocationUpdated
    ...
  })"
  async>
</script>

1.2. Set Log Level

indigitall permite a los desarrolladores poder acceder a toda la información que nos brinda el log.

Puedes definir la variable logLevel con un enumerado con los diferentes niveles en los que aparecerán los mensajes correspondientes al nivel de advertencia de errores al que nos hayamos suscrito.

Puedes consultar el extracto de código más abajo.

<script
  src="/es/indigitall/sdk.min.js"
  onload="indigitall.init({
    ...
    //DEBUG // WARNING // ERROR
    logLevel: indigitall.LogLevel.ERROR,
    ...
  })"
  async>
</script>

* Con el ejemplo de arriba se cambiarían los logs para que sólo aparezcan los logs de ERROR. Se puede ajustar al nivel que se quiera ( DEBUG, INFO, WARNING o ERROR).

1.3. Asociar el dispositivo a un usuario

Puedes asociar tu propio ID a cada dispositivo. De esta forma te será más sencillo e intuitivo trabajar con nuestra herramienta. Por ejemplo:

Si tus usuarios se han identificado, podrías usar tu ID de usuario, o el email, o cualquier otro dato con el que estés acostumbrado a trabajar.

Esta opción será para actualizar la información del dispositivo así que llamar al método DeviceCallback nos retornará un dispositivo si esta operación fue exitosa. Para ello, necesitas añadir el siguiente código:

// Remember to replace with your external code
indigitall.setExternalCode("YOUR_EXTERNAL_CODE", (device) => {
  //DO SOMETHING
  }, (error) => {
    //LOG ERROR
  });

No te preocupes por nada. Tus IDs se cifran de forma irreversible en el propio teléfono y se mandan de forma segura a nuestros servidores. Ni siquiera el equipo de indigitall puede conocer esta información.

1.4. Dominio personalizado

Si eres CLIENTE ENTERPRISE tienes que añadir este parámetro en la configuración para que la SDK apunte al entorno correcto:

<script
  src="/es/indigitall/sdk.min.js"
  onload="indigitall.init({
    ...
    urlDeviceApi: "YOUR_DEVICE_API_DOMAIN",
    urlInappApi: "YOUR_INAPP_API_DOMAIN",
    urlInboxApi: "YOUR_INBOX_API_DOMAIN",
    ...
  })"
  async>
</script>

2. Callbacks que ofrece el SDK

Nuestro SDK ofrece diversos callbacks que te ayudan tener mayor control del flujo de ejecución y a implementar comportamientos personalizados.

Esto es un fragmento de código para usar un callback que se encarge de hacer la inicialización de indigitall. Es necesario añadir el indigitall.init dentro del método onDigitallLoaded y cargarlo en el script.

<script>
  function onNewUserRegistered(device){}

  function onIndigitallInitialized(permissions,device){}

  function onLocationUpdated(location){}

  function onError(error){}

  function requestPushPermission(permission){}

  function requestLocationPermission(permission){}

  // Remember to replace with your appKey
  function onIndigitallLoaded(){
    indigitall.init({
      appKey:'YOUR_APPKEY',
      workerPath:'./ROOT_FOLDER/worker.min.js',
      requestLocation: true,
      onInitialized: onIndigitallInitialized,
      requestPushPermission: requestPushPermission,
      onNewUserRegistered: onNewUserRegistered,
      requestLocationPermission: requestLocationPermission,
      onLocationUpdated: onLocationUpdated,
      onError: onError            
    });
  }
</script>

<script src="./ROOT_FOLDER/sdk.min.js" onload="onIndigitallLoaded()" ></script>

2.1. SDK inicializado

El método onIndigitallInitialized se ejecutará cuando el SDK termine de inicializarse y el dispositivo esté preparado para recibir notificaciones de indigitall.

Recibe como parámetro:

Un array de objetos Permission. El primer elemento es el estado del permiso de notificaciones. El segundo elemento es el estado del permiso de localización.
Un objeto Device con la información asociada al dispositivo.

A continuación te mostramos un ejemplo que imprime logs sobre el estado de los permisos y la información del dispositivo.

<script>
  function onIndigitallInitialized(permissions,device){
    console.log("Push Permission: ",permissions.push)
    console.log("Location Permission: ",permissions.location)
    console.log("Device: ", device)
  }
</script>

<script
  src="/es/indigitall/sdk.min.js"
  onload="indigitall.init({
    ...
    onInitialized: onIndigitallInitialized
    ...
  })"
  async>
</script>

2.2. Nuevo dispositivo registrado

Para comprobar que un usuario se ha registrado, se necesita asociar el callback onNewUserRegistered en la configuración inicial.

Se puede consultar el extracto de código con la implementación más abajo:

<script>
  function onNewUserRegistered(device){
    console.log("Device onNewUserRegistered: ",device)
  }
</script>

<script
  src="/es/indigitall/sdk.min.js"
  onload="indigitall.init({
    ...
    onNewUserRegistered: onNewUserRegistered
    ...
  })"
  async>
</script>

2.3. Se ha producido un error

Se pueden producir comportamientos inesperados dentro todo el flujo del SDK.
To check the error logs, you need add 'onError' callback to initial configuration. Para verificar los registros de errores en el log, se debe agregar el callback onError para la configuración inicial.

<script>
  function onError(error){
    console.log(error);
  }
</script>

<script
  src="/es/indigitall/sdk.min.js"
  onload="indigitall.init({
    ...
    onError: onError
    ...
  })"
  async>
</script>

2.4. Solicitar el permiso de las notificaciones push

Mediante estos permisos las aplicaciones serán capaces de mostrar las notificaciones que les envíe la herramienta de indigitall.

Para solicitar el estado de los permisos para las notificaciones push se debe añadir el callback requestPushPermission a la configuración inicial.

Este método no funciona on _Edge_ y _Safari_ porque estos navegadores no implementan la API de Permisos

Puedes consultar el código de ejemplo más abajo:

<script>
  function requestPushPermission(permission){
    console.log("RequestPushPermission: "+permission.state);
  }
</script>

<script
  src="/es/indigitall/sdk.min.js"
  onload="indigitall.init({
    ...
    requestPushPermission: requestPushPermission
    ...
  })"
  async>
</script>

2.5. Solicitar el permiso de localización

Mediante estos permisos las aplicaciones serán capaces de solicitar a los dispositivo la localización del usuario.

Para solicitar el estado de los permisos de localización se debe añadir el callback requestLocationPermission a la configuración inicial.

This method does not work on Edge and Safari because the browsers does not implement the Permission API

Puedes consultar el código de ejemplo más abajo:

<script>
  function requestLocationPermission(permission){
    console.log("RequestLocationPermission: "+permission.state);
  }
</script>

<script
  src="/es/indigitall/sdk.min.js"
  onload="indigitall.init({
    ...
    requestLocationPermission: requestLocationPermission
    ...
  })"
  async>
</script>

3. Administrar dispositivo

Esta sección describe las diferentes acciones que se podrían realizar en un dispositivo indigitall. El modelo de dispositivo tendría esta estructura:

device = {
  deviceId: "string",
  pushToken: "string",
  browserPublicKey: "string",
  browserPrivateKey: "string",
  platform: "string",
  version: "string",
  productName: "string",
  productVersion: "string",
  browserName: "string",
  browserVersion: "string",
  osName: "string",
  osVersion: "string",
  deviceType: "string",
  enabled: "boolean",
  externalCode: "string"
};

3.1. Consultar información y estado del dispositivo

Puedes usar el método deviceGet para obtener la información que ha registrado el SDK en referencia al dispositivo.

Debes instanciar un objeto DeviceCallback y pasarlo como segundo parámetro del método deviceGet. Este callback recibirá como parámetro el objeto device que contiene toda la información asociada al dispositivo.

indigitall.deviceGet((device) => {
  // success function
  console.log(device);
},() => {
  // error function
});

3.2. Habilitar / deshabilitar el dispositivo

Puedes elegir deshabilitar el dispositivo para bloquear la recepción de notificaciones. Es un método muy útil para:

Implementar una pantalla de preferencias para que el usuario pueda habilitar / deshabilitar la recepción de notificaciones.
Evitar la recepción de notificaciones si el usuario no se ha logado, o no ha aceptado los términos de uso, etc.
Gestionar la Lista Robinson.

Para ello, dispones de los métodos deviceEnable y deviceDisable.

Debes instanciar un onjeto DeviceCallback y pasarlo como segundo parámetro. Este callback recibirá como parámetro el objeto device que contiene toda la información asociada al dispositivo.

indigitall.deviceEnable((device) => {
  // success function
  console.log(device);
},() => {
  // error function
});

indigitall.deviceDisable((device) => {
  // success function
  console.log(device);
},() => {
  // error function
});

3.3. Ejemplo de uso del dispositivo

Vamos a ver la implementación para verificar el estado del dispositivo donde se está ejecutando la aplicación. Llevaremos a cabo las operaciones de: verificar el estado del dispositivo, habilitar el estado del dispositivo y deshabilitar el dispositivo.

Antes que nada necesitamos crear una vista en HTML. Lo haremos de la siguiente manera:

<div id="notifications-manager">
  <p>Notifications:</p>
  <!-- Rounded switch -->
  <label class="switch">
    <input type="checkbox">
    <span class="slider round"></span>
  </label>
</div>

Tras esto, añadiremos los estilos para la vista dentro del CSS:


/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

Y para finalizar definiremos los eventos indicados anteriormente en la guía en Javascript con jQuery.

$(() => {
  indigitall.deviceGet((device) => {
    if (device && device.enabled === true) {
      $('.switch input[type=checkbox]')[0].checked = true;
    } else {
      $('.switch input[type=checkbox]')[0].checked = false;
    }
  });

  $('.switch span.slider').click(() => {
    if ($('.switch input[type=checkbox]')[0].checked === true) {
      indigitall.deviceDisable((device) => {
        console.log ('device disabled');
      })
    } else {
      indigitall.deviceEnable((device) => {
        console.log ('device enabled');
      })
    }
  });
});

4. Grupos de interés

Nuestro SDK te permite clasificar a los usuarios en diferentes grupos personalizables. Esto es muy útil para:

Implementar una pantalla de preferencias para que el usuario pueda elegir los temas para los que quiere recibir notificaciones.
Etiquetar según la navegación o acciones que realice el usuario.
Segmentar las comunicaciones según si el usuario se ha identificado o es anónimo.
Segmentar en base al idioma, cultura, categoría de cliente, o en base a cualquier otro criterio que necesites.

Recuerda que primero debes definir los grupos con los que quieres trabajar en la consola de indigitall (Herramientas > Grupos de interés). Consulta nuestro manual de usuario para más info.

El objeto Topic o grupo de interés tiene esta estructura:

topics = [{
  code: "string",
    name: "string",
    subscribed: "boolean",
    visible: "boolean",
    parentCode: "string"
},
{
  ...
}];

4.1. Listar grupos

Usa el método topicsList para obtener la lista de grupos que están configurados en tu proyecto de indigitall. El callback de este método recibe como parámetro un array de Topics, que contiene la información de todos los grupos disponibles, además de un flag que indica si el usuario está incluido en alguno de ellos.

indigitall.topicsList((topics) => {
  // success function
  console.log(topics);
}, () => {
  // error function
});

4.2. Gestionar suscripción

El actual dispositivo podría ser suscrito a varios temas. Si la operación ha sido satisfactoria, este método retonar un array de objetos Topic.

Para gestionar la suscripción del dispositivo a uno o varios grupos, existen dos métodos: topicsSubscribe y topicsUnsubscribe.

Opcionalmente ambos reciben un objeto TopicsCallback como tercer parámetro, que devolverá el listado de todos los Topic del proyecto.

var topicsCodes = ["001", ...];
indigitall.topicsSubscribe(topicsCodes, (topics) => {
  // success function
  console.log(topics);
}, () => {
  // error function
});

// Recuerda reemplazar con los códigos de tus grupos
indigitall.topicsUnsubscribe(topicCodes, (topics) => {
  // success function
  console.log(topics);
}, () => {
  // error function
});

4.3. Casos de uso

Cómo hacer la suscripción/darse de baja de los grupos

En este caso nosotros usaremos el ejemplo anterior para extenderlo con este ejemplo concreto.

Primero vamos a añadir esta vista para el archivo HTML:

<div id="notifications-manager">
  ...

  <p>Topics:</p>
  <ul class="topics">
  </ul>
</div>

Después vamos a eliminar el estilo 'ul' por defecto:

...

ul {
  list-style: none;
}

Y al final habrá que añadir este código a tu archivo Javascript:

$(() => {
  ...

  indigitall.topicsList((topics) => {
    topics.forEach((topic) => {
      $("ul.topics").append(`<li><input type="checkbox"
        id="${topic.code}"
        ${topic.subscribed ? 'checked' : ''}/>
        ${topic.name}</li>`)
    });

    $('ul.topics li input[type="checkbox"]').click((e) => {
      if (e.target.checked === true) {
        indigitall.topicsSubscribe([e.target.id]);
      } else {
        indigitall.topicsUnsubscribe([e.target.id])
      }
    })
  });
});

5. Enviar eventos personalizados

Tu app puede mandar información a los servidores de indigitall para identificar las acciones y eventos que suceden en ella. Esto te permite automatizar acciones de retargeting.

Para registrar estos eventos hay que llamar al método sendCustomEvent, pasando como parámetro un ID descriptivo (puedes inventarte el que más te guste) y el set de datos que necesites.

indigitall.sendCustomEvent({
          eventType: "YOUR_CUSTOM_EVENT",
          customData: {}, // add your data
          async: false, // call this event sync/async
        }, (response) => {
          //DO SOMETHING     
        },(error)=>{
          //LOG ERROR
        });

6. Mensajes In-App

Si quieres integrar los mensajes In-App en tu aplicación, puedes hacerlo con varios formatos complementarios:

Banner. Contenido estático que está siempre visible, pero permite al usuario seguir utilizando la aplicación.
Popup. Contenido a pantalla completa que obliga al usuario a pulsar o descartar la información.

El modelo del InApp sería el siguiente:

inApp = {
  inAppId: int,
  lastVersionId: int,
  showOnce: boolean,
  properties: {
      action: {
          url: "string",
          type: "string"
      }
  }
  contentUrl: "string",
  renewalTime: "string",
  schema: {
      code: "string",
        width: int,
        height: int
    }
};

A continuación te contamos como instanciar uno o varios mensajes In-App en formato banner.

Recuerda que primero deberías tenerlos definidos en la consola de indigitall. Consulta nuestro manual de usuario para más info.

En este primer método se carga una InApp en una página. Para llamarlo, se debe crear un div en su página con el tamaño que ya previamente haya creado en InApp/InWeb Schemes de nuestra consola de indigitall. Como este ejemplo:

<div id="divView" style="width:1250px; height:285px;"></div>

si se asigna un ancho y un tamaño de altura diferente al que hayamos definido en la consola es probable que la InApp no se muestre correctamente.

Una vez que se haya creado el código para mostrar la InApp, hay que instanciarla y llamarla en el método showInApp que podemos ver más abajo. Hay que pasarle como parámetros el código de la InApp, el id del div anterior y el callback oportuno para obtener la vista y el código. Este callback nos indicará si se ha cargado correctamente o no y en relación a este resultado haremos una acción u otra.

indigitall.showInApp(divView_code, "divView", (inApp, div)=>{
      // DO SOMETHING
  },(error)=>{
      // Log error message
  }, (inApp, div, showTime)=>{
    // onShowtimeFinished
  });

indigitall.showInApp(divView_code, "divView",(inApp, div, showTime)=>{
    // onShowtimeFinished
  }, (inApp, error) => {
    //did expired
  }, (inApp, error) => {
    //didShowMore 
  }, (inApp, error) => {
    //did clickOut
  }, (inApp, error) => {
    //did dismiss forever
  }, (inApp, div)=>{
      // DO SOMETHING
  },(error)=>{
      // Log error message
  });

Si queremos tener varias InApp para ser mostradas en el flujo de los usuarios hay que seguir los siguientes pasos.

Para ello, en primer lugar se debe crear cada vista div en su página. Cada una de ellas debe tener asignado el mismo tamaño que se creó en InApp/inWeb Schemes de nuestra consola de indigitall.

  <div id="divView" style="width:1250px; height:285px;"></div>
  <div id="divViewTwo" style="width:980px; height:150px;" ></div>
  <div id="divViewThree" style="width:150px; height:950px;"></div>
...

Una vez que se han creado todos las vistas, hay que instanciarlos mediante el método showMultipleInApp. Antes de llegar a esta llamada hay que crear un par de arrays. El primero de ellos es la lista de los código InApp mientras que el segundo contendrá los identificadores de los div donde aparecerán las InApp. Cuando se llame al método showMultipleInApp hay que pasarle la lista con los identificadores, la lista con los div y además un callback que será el encargado de indicarnos si la operación ha sido satisfactoria o por el contrario ha ocurrido un error.

let inAppCodeList = [];
inAppCodeList.push("divView_code");
inAppCodeList.push("divView_code_two");
inAppCodeList.push("divView_code_three");
...

let divList = [];
divList.push("divView");
divList.push("divViewTwo");
divList.push("divViewThree");
...

indigitall.showMultipleInApp(inAppCodeList, divList,(inApp, div)=>{
      //DO SOMETHING
  },(error)=>{
      // Log error message
  }, (inApp, div, showTime)=>{
    // onShowTimeFinished
  });

indigitall.showMultipleInApp(inAppCodeList, divList,(inApp, div, showTime)=>{
    // onShowtimeFinished
  }, (inApp, error) => {
    //did expired
  }, (inApp, error) => {
    //didShowMore 
  }, (inApp, error) => {
    //did clickOut
  }, (inApp, error) => {
    //did dismiss forever
  }, (inApp, div)=>{
      // DO SOMETHING
  },(error)=>{
      // Log error message
  });

Podría darse el caso que se quisiera mostrar una InApp con un PopUp.

Afortunadamente, en Javascript, para crear una InApp como un PopUp no es necesario un nuevo procedimiento para crearlo. Se puede seguir la misma actuación que para mostrar una única InApp.

6.3. Utilidades del InApp

En el caso de que quieras mostrar el esquema InApp de diferente manera a como lo pinta nuestra SDK, ponemos a tu disposición unos métodos para que podáis customizar el "pintado", sin que se vean afectadas ni las estadísticas ni las funcionalidades del InApp.

Recogida del objeto InApp


indigitall.getInApp(inAppId, (inApp) =>{    
    //do something
}, (error)=>{
  //log error
});

Comprobación si debería mostrarse el InApp

Gracias a las funcionalidades de InApp, se puede indicar que el inApp se muestre o se pulse un número de veces máximo, o si en el caso del popUp, tras realizar una acción, como pulsar al botón cerrar, no se vuelva a mostrar. Para ello podríamos hacer lo siguiente dentro del método inAppGet que hemos visto anteriormente:

indigitall.inAppGet(inAppId, async (inApp) => {
      if (inApp && inApp.properties){
        if (inApp.properties.dismissForever &&
          await indigitall.isInAppDismissForever(inApp)) {
            //dismiss forever
        } else {
          indigitall.inAppWasShown(inApp, () => {
            //did expired
          }, () => {
            //show more 
          }, () => {
            //click out
          }, (inApp) => {
            // show InApp
          });
        }                         
      }
    },(error) => {
        //log error
    });

Acciones para contabilizar clicks o para no mostrar InApp nunca más

Para el caso de lo que llamamos Dismiss Forever, una vez que se realiza la acción, se debe llamar a este método:


indigitall.addNewInAppToDismissForever(inApp);

En el caso de que se quiera mostrar un inApp sólo si hace 'x' clicks o pulsaciones sobre él hay que añadir lo siguiente:


indigitall.addNewInAppClick(inApp);

En este método se mandan las estadísticas del click, no sólo el contador de clicks.

7. Inbox

7.1. Configuración Inbox

En esta sección encontrarás una serie de funcionalidades más avanzadas y que requieren de un desarrollo más complejo. Aconsejamos que sea un desarrollador el encargado de esta configuración.

7.1.1. Identificación de usuarios

Para poder obtener las notificaciones del Inbox de Indigitall, el usuario debe identificarse. Primero hay que inicializar la SDK de Indigitall para que genere nuestro identificador (deviceId) y poder asociarlo al ID personalizado que asocies a dispositivo, similar a como se explica aquí.

Para realizar las tareas de registro, se usan estos dos métodos:

//Identificación de usuario
indigitall.logIn("YOUR_ID", (device)=>{
     //DO SOMETHING
}, (error)=>{
    //LOG ERROR
});

//Desconexión
indigitall.logOut((device)=>{
    //DO SOMETHING
}, (error)=>{
    //LOG ERROR
});

7.1.2. Generar token de autentificación

En esta sección verás cómo se genera un token de validación para una aplicación que tenga configurado una autentificación con webhook. Para generar dicho token, se necesita añadir el JSON con la configuración.

El token tiene una fecha predeterminada de caducidad, una vez caducado en nuestro sistema, se lanzará un evento llamado getConfigAuth que indicará dicha caducidad y tendrá que generar el token con el JSON de configuración. Para recoger el evento, hay que añadirlo a las llamadas del Inbox e implementarlo de la siguiente manera:

function getAuthConfig(){
    return YOUR_JSON
}

7.2. Funcionalidades principales del Inbox

Una vez hecho el registro del dispositivo correctamente, se puede empezar a realizar las peticiones del Inbox. Hay que tener en cuenta las siguientes características del Inbox, que opcionalmente son configurables.

Esta sección describe las diferentes acciones que se podrían realizar con el Inbox de indigitall. El modelo de Inbox y el de notification tendrían esta estructura:

inbox = {
  lastAccess: "string",
  notifications: [Inboxnotification],
  count: int,
  pageSize: int,
  page: int,
  allNewNotifications: [Inboxnotification],
  totalPages: int
};

notification = {
  id: "string",
  externalId: "string",
  sentAt: {},
  status: "string",
  sendingId: int,
  campaignId: int,
  message: Push,
  read: Boolean
};

7.2.1. Propiedades del Inbox

Las notificaciones del Inbox tendrán los siguiente estados de la clase inboxStatus:

Sent o enviado: la notificación se ha enviado al cliente, la ha podido leer o no.
Click: han pulsado sobre la notificación mostrada en el Inbox.
Delete o borrado: se ha borrado por parte del cliente la notificación del Inbox.

Las notificaciones también vendrán con un estado leído o 'read', para ayudar a diferenciar dichos estados.

Cada notificación vendrá asignada con un sendingId entero y único, para poder diferenciarlos y usarlos para algunas de las funcionalidades.

7.2.2. Obtener las notificaciones

Como se ha explicado anteriormente, para obtener las notificaciones se usa el siguiente método:

indigitall.getInbox({auth: getAuthConfig}, (inbox)=>{
    //DO SOMETHING
}, (error)=>{
    //LOG ERROR
});

7.2.2.1 Siguiente página

Una vez obtenida la instancia Inbox, la usaremos para pedir la siguiente página, que se realizada con el siguiente método, en el caso de que no haya más páginas te lo indicará en el error con el códigoo 410:

inbox.getNextPage((inbox, newNotifications)=>{
    //DO SOMETHING
}, (error)=>{
    if (error == 410){
        //LOG NO HAY MÁS PÁGINAS
    }else{
        //LOG ERROR
    }
});

Ten en cuenta que el callback del Inbox a parte de devolver el Inbox actualizado, devuelve un array que se llama newNotifications, en el que se irán las nuevas notificaciones que añadir al Inbox, para que, en caso de ser necesario, poder utilizar dicho array para moverte entre las páginas sin depender de las llamadas al Inbox.

7.2.3. Obtener la información de una notificación

Para obtener la información de una notificación en particular, hay que hacer la siguiente llamada con el sendingId de cada notificación:

inbox.getInfoFromNotification(SENDING_ID, (notification)=>{
    //DO SOMETHING
},(error)=>{
    //LOG ERROR
});

7.2.4. Editar el estado de una o más notificaciones

Para editar el estado de una o más notificaciones a la vez, se realiza con el siguiente método en el que se deben indicar los sendingIds de las notificaciones a editar y el estado al que se quiere cambiar:

//Modificar una notificación
inbox.modifyStatusFromNotification(SENDING_ID, STATUS,(notification)=>{
    //DO SOMETHING
},(error)=>{
    //LOG ERROR
});

//Modificar masivamente
inbox.massiveEditNotifications(SENDING_IDS,STATUS, ()=>{
    //DO SOMETHING
}, (error)=>{
    //LOG ERROR
});

7.2.5. Contadores de estado de las notificaciones

En este apartado podrás conocer el número de notificaciones que hay en el Inbox según su estado, el modelo es el siguiente:

counter = {
    click: int,
    sent: int,
    deleted: int,
    unread: {
       count: int,
       lastAccess: "string" 
    }
}

Y se reliza con este método:

indigitall.getInboxMessagesCount({auth: getAuthConfig}, (counter)=>{
    //DO SOMETHING
},(error)=>{
    //LOG ERROR 
});

8. Inicialización personalizada

Esta inicialización se puede realizar a través de NPM o archivos locales.

Si tiene otros ServiceWorkers en su sitio web, puede crear un archivo service-worker.js e importar todos sus ServiceWorkers en él. Siga estos pasos para hacerlo:

Cree un archivo en su proyecto raíz con el nombre service-worker.js
Agregue esta de estas líneas a su archivo service-worker.js:

Si usas NPM:

importScripts('/node_modules/indigitall-webpush/worker.min.js');
// Other imports

Si usas archivos locales:

importScripts('/indigitall/worker.min.js');
// Other imports

Tu proyecto tendrá la siguiente estructura:

Con NPM:

/
|   node_modules/
|   |   indigitall-webpush/
|   |   |   index.js
|   |   |   package.json
|   |   |   readme.md
|   |   |   sdk.min.js
|   |   |   worker.min.js
|   |   ...
|   service-worker.js
|   ...

Usando archivos locales:

/
|   indigitall/
|   |   sdk.min.js
|   |   worker.min.js
|   service-worker.js
|   ...

Elimine el parámetro workerPath en el método indigitall.init ({... ~~ workerPath: '/indigitall/worker.min.js'~~ ...}).

<!-- Reemplaza este fragmento con tu appKey -->
<script
  src="/es/indigitall/sdk.min.js"
  onload="indigitall.init({
    appKey:'765b4222-ae48-xxxx-80e2-213c62f337df'
  })"
  async>
</script>

9. Documentación de referencia

Referencia JSdoc

10. Changelog

3.11.4 - 04/2022

Correcciones

Mejorar llamadas PUT device

3.11.3 - 03/2022

Correcciones

Mejorar llamadas a la API

3.11.2 - 03/2022

Correcciones

Arreglar topic subscribe cuando pulsas un botón de la push

3.11.1 - 01/2022

Correcciones

Añadir métodos de inApp en la clase Indigitall

3.11.0 - 01/2022

Añadido

InApp Dismiss Forever
Utilidades del InApp (numberOfClicks, numberOfShows)
Event custom para iurny

3.10.1 - 11/2021

Correcciones

Enviar todos los campos al hacer click en notificación
Mostrar logs del service worker

3.10.0 - 10/2021

Añadido

Customer Service

3.9.0 - 09/2021

Añadido

Contador de clicks en inApp

3.8.2 - 08/2021

Correcciones

Callbacks onError en Safari

3.8.1 - 07/2021

Correcciones

Definir id en el método externalCode o LogIn
Método externalCode sin callback

3.8.0 - 06/2021

Añadido

Optimizar SDK

3.7.2 - 06/2021

Correcciones

Dominio personalizado en retargeting

3.7.1 - 05/2021

Correcciones

Arreglado callback onError cuando el permiso de push es denegado

3.7.0 - 05/2021

Añadido

Ocultar inApp/popUp transcurrido un tiempo configurado en consola
InApp y popUp con bordes redondeados

3.6.1 - 04/2021

Correcciones

Mejorar tratamiento click en push

3.6.0 - 04/2021

Añadido

InApp mostrar un número de veces definido en consola

3.5.3 - 03/2021

Correcciones

Evento click en dominio personalizado

3.5.2 - 01/2021

Correcciones

Dominio personalizado en Service Worker

3.5.1 - 12/2020

Correcciones

Dominio personalizado en Service Worker

3.5.0 - 11/2020

Añadido

Dominio personalizado

3.4.1 - 07/2020

Correcciones

Click en inApp
Callback modelo inApp

3.4.0 - 06/2020

Añadido

Inbox

3.3.6 - 05/2020

Correcciones

Callback onIndigitallInitialized con múltiples dominios

3.3.5 - 04/2020

Correcciones

Callback onNewUserRegistered

3.3.4 - 04/2020

Correcciones

Subscribir a topic con botón

3.3.3 - 03/2020

Correcciones

Configuración de Integración continua

3.3.2 - 03/2020

Correcciones

Acciones tras denegar los permisos de pushes

3.3.1 - 03/2020

Correcciones

Registro de usuarios sin pushtoken

3.3.0 - 03/2020

Añadido

EventCustomSynct
Constructor de Device
Subscribir a topics

3.2.0 - 01/2020

Correcciones

Refactorizar callbacks y log.

3.1.3 - 10/2019

Correcciones

El método requestPushPermission on Edge para typo.

3.1.2 - 10/2019

Modificaciones

El método requestPushPermission en Edge con Notification.permission.

3.1.1 - 09/2019

Correcciones

En la ejecucción en Edge.

3.1.0 - 08/2019

Añadido

El método para eventos personalizados.

SDK Web con Javascript

Indice

1. Propiedades configurables

1.1. Activar las notificaciones geolocalizadas

Opciones que debes tener en cuenta

1.2. Set Log Level

1.3. Asociar el dispositivo a un usuario

1.4. Dominio personalizado

2. Callbacks que ofrece el SDK

2.1. SDK inicializado

2.2. Nuevo dispositivo registrado

2.3. Se ha producido un error

2.4. Solicitar el permiso de las notificaciones push

2.5. Solicitar el permiso de localización

3. Administrar dispositivo

3.1. Consultar información y estado del dispositivo

3.2. Habilitar / deshabilitar el dispositivo

3.3. Ejemplo de uso del dispositivo

4. Grupos de interés

4.1. Listar grupos

4.2. Gestionar suscripción

4.3. Casos de uso

Cómo hacer la suscripción/darse de baja de los grupos

5. Enviar eventos personalizados

6. Mensajes In-App

6.1. Formato banner

6.1.1. Un Único banner

6.1.2. Múltiples banner

6.2. Formato Popup

6.3. Utilidades del InApp

Recogida del objeto InApp

Comprobación si debería mostrarse el InApp

Acciones para contabilizar clicks o para no mostrar InApp nunca más

7. Inbox

7.1. Configuración Inbox

7.1.1. Identificación de usuarios

7.1.2. Generar token de autentificación

7.2. Funcionalidades principales del Inbox

7.2.1. Propiedades del Inbox

7.2.2. Obtener las notificaciones

7.2.2.1 Siguiente página

7.2.3. Obtener la información de una notificación

7.2.4. Editar el estado de una o más notificaciones

7.2.5. Contadores de estado de las notificaciones

8. Inicialización personalizada

9. Documentación de referencia

10. Changelog

3.11.4 - 04/2022

Correcciones

3.11.3 - 03/2022

Correcciones

3.11.2 - 03/2022

Correcciones

3.11.1 - 01/2022

Correcciones

3.11.0 - 01/2022

Añadido

3.10.1 - 11/2021

Correcciones

3.10.0 - 10/2021

Añadido

3.9.0 - 09/2021

Añadido

3.8.2 - 08/2021

Correcciones

3.8.1 - 07/2021

Correcciones

3.8.0 - 06/2021

Añadido

3.7.2 - 06/2021

Correcciones

3.7.1 - 05/2021

Correcciones

3.7.0 - 05/2021

Añadido

3.6.1 - 04/2021

Correcciones

3.6.0 - 04/2021

Añadido

3.5.3 - 03/2021