Apuesto que mas de una vez te haz topado con la frase (activa las notificaciones para recibir mas contenido) en diferentes sitios web(revistas,periódicos, blogs, tiendas etc). Pues bien, si tienes un blog u otro tipo de sitio web te invito a seguir este tutorial paso a paso en el que vas a aprender a como configurar el plugin onesignal para tener las notificaciones push web.

Si te preguntas a diario ¿como incrementar las visitas en mi blog? o ¿como hacer para que los lectores regresen a tu blog con cada nueva publicación?. Las dos principales formas son; captar sus email y tener configurado las notificaciones push web. Y estas son muy recomendadas. Y aquí aprenderás a hacerlo tanto si tienes un blog con: wordpress, blogger, joomla, shopify o una web programada desde cero.

¿Que es y para que sirve onesignal?

Hasta este momento ya debes tener una idea para que sirve(enviar notificaciones push) a visitantes de tu blog; pero ¿Que es y como usarlo para sacarle buen provecho?. Te lo explico a continuación.

Si bien en el mundo wordpress se suele utilizar plugins para dotar de funciones extra a una web desarrollada bajo este cms. Quiero aclarar que onesignal no solo esta disponible en formato plugin; sino que también puede ser usado en otras plataformas(blogger, joomla, shopify etc) y por si fuera poco nos permite usar las lineas de código personalizado para insertarlas dentro del código web.

Claro está que para ello deberemos darnos de alta en la plataforma y hacer una configuración de acuerdo al contenido de nuestro blog.

¿Porque usar onesignal para enviar notificaciones push?

No es que sea el único en este sector; sino que sin duda es muy sencillo de configurar y hace a la perfección su trabajo(enviar notificaciones web). Esto siempre y cuando esté correctamente configurado, de lo contrario todo habrá sido una pérdida de tiempo.

Sugerencia
Si ya usas alguna otra plataforma para enviar este tipo de notificaciones te invito a dejarla en los comentarios.

Por si deseas usar otros plugins para las notificaciones te sugiero los de la siguiente lista:

  1. PushEngage Web Push Notifications – Descargar.
  2. Push Notifications for WordPress by PushAssist – Descargar.
  3. Push Monkey Pro – Descargar.
  4. Smart Notification WordPress Plugin – Descargar.
  5. Free Web Push Notification Tool by iZooto – Descargar.

Esta lista no está ordenada según su buena funcionalidad; muy por el contrario, está hecha para brindarte otras alternativas si no deseas usar onesignal. Deja tu comentario si deseas que cree un tutorial sobre los plugins antes mencionados.

¿Cómo agregar notificaciones push a WordPress gratis?

Sin duda esto es lo que estás esperando. Aprende a como configurar notificaciones push en wodpress con y sin plugin.  Para no hacer mas extenso doy inicio al tutorial para configurar onesignal paso a paso.

Antes de iniciar. Si te resulta muy útil este tutorial no dudes en compartirlo con otras personas interesadas en este tipo de contenido.

El paso a paso para las notificaciones push web

Veamos que necesitaremos para dar inicio:

  • Un email nuevo(hotmail, yahoo o gmail)
  • Un sitio web(dominio propio, o sub dominios)
  • Conocimiento básico de html

Vamos al sitio web oficial de onesignal. Nos damos de alta. Rellenar los datos de registro y confirmar para dar inicio a la configuración.

El proceso de registro es similar a crearte una cuenta en cualquier red social o plataforma online. No debes tener ningún tipo de problema. Por lo que obviaré este paso a paso.

En este apartado quiero hacer una aclaración. Este tutorial esta echo usando el código personalizado para pegarlo en nuestra web; más si deseas hacerlo con el plugin te comparto un video al final del articulo.

Ya que te has dado de alta en el sitio web es momento de configurar las tan famosos y valiosas notificaciones push web. Veamos

Configurando las notificaciones push dentro del dashboar de onesignal

Doy por hecho que ya tienes iniciada la sesión de tu cuenta luego de haber realizado la confirmación de la cuenta. Y te debe salir una ventana similar a la siguiente

registrar el nombre del sitio web para crear la opcion de notificacion push web
Registrar el nombre del sitio web para crear la opción de notificación push web

Solo debes ingresar el nombre de tu sitio web o tienda y seleccionar al opción de web push. Luego darle a continuar(Next configure your platform).

seleccionar la primera opcion
Deja la selección predeterminada por el sistema

En este primer apartado no debes hacer nada y dejar lo que el sistema de recomienda. Sigue el tutorial con la siguiente imagen.

Completamos los campos que nos pide en la siguiente ventana.

configuracion del sitio web principal para push web
Es importante rellenar todos los campos incluyendo la imagen o logo de tu web
  1. Ingresamos el nombre del dominio
  2. La url del dominio
  3. Subir la imagen(logo) del sitio web

La imagen puedes subirla desde tu pc o también usar la url de la misma que tienes en la biblioteca de tu blog.

Por lo demás dejamos tal cual está y seguimos con la siguiente configuración.

configurar los permisos de las notificaciones push
Configurando y personalizando los permisos de las notificaciones push

Este apartado es el que vamos a configurar las notificaciones, personalizar el tipo de texto con el que vamos a incentivar que los visitantes quieran activar las notificaciones push.

Para ello damos click donde dice(opens slide prompt) cuadro verde. Se va a abrir la siguiente ventana. Ahí es donde vas a personalizar el mensaje de la notificación que verán los visitantes de tu web.

activar para personalizar el texto de las notificaciones push
Activar el check para personalizar el texto de las notificaciones push

En esta ventana es donde daremos forma al texto de la notificación y también los botones. Para ello debes activar la opción que está seleccionada color rojo.

Seguido se te va a activar las opciones para personalizar el texto. Ver siguiente imagen.

personalizar el texto de la notificacion y los botones
Aquí tendrás que personalizar el texto de la notificación y los botones

El resultado final será tal como se muestra en la siguiente ventana.

Texto ya personalizado de las notificaciones push web
Así es como verán los visitantes el mensaje de notificación push

Ya que haz hecho todo lo antes indicado solo queda darle al botón save(guardar). Y continuar con los últimos ajustes para tener bien configurado las notificaciones.

dar las gracias por que se suscriban

En esta ventana solo personalizamos el titulo y el mensaje de la bienvenida por haberse suscrito a tu sitio web. Y activas el link para que se dirijan a la web.

Y nos dirigimos al apartado final en el que no haremos nada mas que darle al botón save. Que luego activará la ventana donde nos dará el código personalizado para pegar en nuestra web.

codigo para pegar en nuestra web

Si haz seguido a detalle el tutorial habrás llegado con éxito a este apartado en la nueva ventana que te mencioné en el párrafo anterior. La pagina también te ofrece la opción de descargar el código; pero con copiarlo es suficiente.

Este código lo pegaremos en el archivo header.php si estás usando wordpress. Y te vas a dirigir específicamente a la linea de código </head>. Pegarlo ahí y darle a guardar. Ver imagen.

pegar el codigo de la notificion onesignal

Si por el contrario usas otro cms(joomla, shopify, blogger, etc) debes seguir el mismo proceso. Pegar el código antes de la etiqueta </head> y guardar los cambios.

Si lo haces bien entonces ya tendrás configurado e instalado las notificaciones web push con onesignal.

Si no deseas hacer este proceso; y usar plugin en wordpress; entonces solo debes seguir el video que te dejo a continuación.

Link para descargar el plugin: Descarga abajo.

[appbox wordpress onesignal-free-web-push-notifications]

Ahora solo te queda probar las notificaciones ya sea en tu móvil o pc. Es así como se configuran las tan conocidas notificaciones push en una web con wordpress u otro cms, pagina web. Si te gustó esta guía no dudes en compartirla para ayudar a más personas.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *