Crear cuenta Mailrelay Crear cuenta Mailrelay Crear cuenta Mailrelay

[Tutorial] Consigue más suscriptores utilizando Hellobar y Mailrelay

Publicado por Cyball Brigitte en agosto 9, 2016

Hellobar

¿Cómo convertir más visitantes en nuevos suscriptores? Atento a este tutorial acerca de cómo utilizar HelloBar junto a Mailrelay para captar más suscriptores en tu web o blog.

Hola, Soy Cyball Brigitte y soy momblogger en Mami 507 | El blog de una madre panameña.

Hace unas semanas, descubrí Mailrelay gracias a los posts de Ana María de Frikymamá y su entusiasmo por este sistema me impulsó a cambiar de mi antiguo proveedor y confieso que me encantan las funcionalidades que he obtenido, tanto que ya realicé un post colaborativo (fuera de mi temática) con Ana María sobre conectar Mailrelay y HelloBar, utilizando sólo el correo del suscriptor.

Puede parecer que este es el mismo post, pero existe una gran diferencia para mí, y seguro para ustedes también

En el anterior tutorial asumo que el lector ya tiene HelloBar instalado y parto de la premisa de conectar con Mailrelay como un nuevo sistema de email marketing, además de utilizar un formulario estilo slider.

Aquí les muestro como configurar desde cero esta herramienta  de captación de suscriptores en Blogger y otras plataformas con poquísima manipulación de lenguaje de programación (un plus para muchos), y con la diferencia de que en este formulario pop-up utilizaremos las variables «Name» e E-mail, con opción de configuración más personalizada e inserción de una imagen, todo en una cuenta gratuita (algo que no obtenemos en el proveedor ‘estrella’ Sumome).

Si quieres conocer porque utilizo esta herramienta puedes leer mi post ⇒ Mailrelay y HelloBar: Duplo ganador para una mami bloguera

Veamos paso a paso como puedes empezar a usar HelloBar junto a Mailrelay.

Primer paso: el registro en HelloBar

Vamos al sitio de HelloBar y colocaremos la url de nuestro blog o sitio web.

Luego ingresamos con nuestra cuenta Google.

Si no dispones de una puedes usar este >enlace< para usar tu email,para el resto de plataformas debes usar los pasos hasta el sexto; si tu sitio está en WP.com, esta plataforma no permite toolbars

Inicio en HelloBar

Segundo paso: captación de emails

Escogemos la opción Collect Emails y editamos el mensaje que aparecerá en la barra (es la opción por defecto, luego cambiaremos a pop-up).

seleccionar forma de captación de emails en HelloBar

Pop Up en HelloBar

Tercer paso: configurar nuestra lista de contactos de Mailrelay

En la pantalla Settings cambiaremos la opción Just email adresses por Names and email adresses y en la casilla Which contact list… seleccionaremos New Contact List, lo que nos abrirá una pantalla donde pondremos nombre a nuestra nueva lista y escogemos la opción Webhook (Advanced) de la casilla Where do you want your contacts stored?

Veremos entonces que la pantalla cambia y nos muestra una casilla que debemos rellenar con la información que obtendremos de Mailrelay así:

► A.- Vamos a nuestra cuenta de Mailrelay y buscamos la pestaña FORMULARIOS, donde escogemos Formularios personalizados y creamos uno exactamente como muestra la siguiente imagen (seleccionando obviamente el grupo al cual deseamos que se una nuestro suscriptor):

Creando formularios personalizados

► B.- Cuando ya está listo, veremos nuestro nuevo formulario en un listado, lo seleccionamos y pulsamos el botón Generar enlace del formulario que se encuentra justo arriba del listado.

Generar enlace para el formulario

Regresamos al sitio de HelloBar, pegamos el enlace obtenido en la casilla bajo la descripción Paste the required information below… y marcamos la opción POST request.

Debe quedar todo como en esta imagen:

Selección de formulario

Ahora pulsamos DONE.

Cuarto paso: configuración del pop up

En la pantalla «Style», cambiamos el tipo de nuestra barra por MODAL, que es lo mismo que un Pop-up. En «Placement» escogemos donde se mostrará el pop-up, yo recomiendo escoger «Middle2, para que se vea centrado en la pantalla.

En When does it display? seleccionaremos el momento en que se mostrará el pop-up.

Las opciones que ofrece son:

  • Immediately
  • 5 seconds delay
  • 10 seconds delay
  • 60 seconds delay
  • After scrolling a little
  • After scrolling to middle
  • After scrolling to bottom
  • User intends to leave

 

Yo escogí After scrolling to middle pues me parece que permite al lector haber conocido buena parte de tu sitio y es un buen momento para ofrecerle la suscripción al blog.

Configuración del estilo del formulario de Hellobar

Quinto paso: aplicar un buen diseño

En la pantalla Design, seleccionamos el diseño de nuestro pop-up.

Aquí podremos ver la diferencia que nos ofrece HelloBar sobre Sumome

Disponemos de 10 temas a escoger, cada uno configurable a su manera.

En el tutorial usamos el Hello Bar Classic.

En la pestaña COLORS podemos seleccionar los colores que vayan acorde a nuestro sitio, o incluso darle un toque distinto y más llamativo.

En la pestaña IMAGE es donde podremos subir la imagen que estará en nuestro pop-up (no es un background) y disponemos de varias opciones de posicionamiento.

En la pestaña TEXT es donde seleccionamos les textos que van en cada área del pop-up: Título (headline), descripción (caption), los que van dentro de las casillas a rellenar por el suscriptor (placeholders) y el del botón, así como la fuente a utilizar (las opciones de esta varían de tema a tema).

Para nuestro pop-up borré el texto tanto de headline como caption, pues la imagen utilizada es muy explicativa para mi parecer.

Aplicación de diseño a nuestro formulario de HelloBar

Sexto paso: elegir cuando se va a mostrar nuestro pop up de HelloBar

En la pantalla Targeting, la única opción que podremos cambiar es How often should the Hello Bar be displayed? que indica cuando parar de mostrar el pop-up.

Recomiendo escoger Stop showing after the visitor provided a response (parar cuando el visitante da una respuesta), esto implica que durante el resto de su navegación en nuestro sitio durante un mismo día y en las diversas páginas, el pop-up no saltará.

Y con esto ya tenemos nuestro pop-up de suscripción listo, sin ningún uso de lenguaje CSS o HTML para configurarle.

hellobar

Séptimo paso: llévate el código html de HelloBar a Blogger

Al salir de la configuración del pop-up, llegaremos a la pantalla que nos muestra el script a insertar en nuestro sitio.

Sólo lo seleccionamos, vamos a nuestro panel de Blogger y escogemos Plantilla > Editar HTML.

Allí buscamos /head y justo después de ello pegamos nuestro script.

Tomará sólo unos minutos, o menos, para que nuestro pop-up sea totalmente funcional y esté conectado directamente a nuestro grupo de suscriptores escogido en el tercer paso de este tutorial acerca de HelloBar.

Código de hellobar para insertar formulario en Blogger

hellobar

Puedes ver el resultado de este tutorial en esta página de pruebas que he publicado

Cómo usar HelloBar en otras plataformas

HelloBar funciona además con WordPress.org, Shopify, Squarespace, Weebly y con Tumblr y así serían sus configuraciones tras terminar nuestro pop-up (o slider como el que uso en mami507.com):

  • WP: al finalizar nuestro formulario, en la pantalla que nos da el script escogemos la opción I use WordPress, descargamos e instalamos el plugin en nuestro sitio y eso es todo. El plugin descargado ya está configurado para la url que diste en el primer paso
  • Shopify: en nuestro dashboard escogemos Online Store > Theme > Pulsamos el botón de tres puntos suspensivos (…) y escogemos Edit HTML/CSS. En la siguiente pantalla, debajo de la opción Layout seleccionamos theme.liquid y allí vemos la plantilla, donde buscamos /body> y antes de este pegamos el script obtenido en I can install code myself en HelloBar (igual para el resto de plataformas)
  • Squarespace: en el dashboard vamos a Settings > Advanced > Code Injection y allí localizamos la sección del «Footer», donde pegamos el script
  • Weebly: en «dashboard» vamos a Sites > Edit > Settings > SEO y vamos a la casilla del Foster Code donde pegamos el script
  • Tumblr: la instalación es idéntica a Blogger, vamos a configuración de nuestro blog, >Modificar apariencia >Editar Html y buscamos /head> pegando después de este el script dado, así fue como lo configuré en cyballruiz.com, mi blog alterno a Mami507, aunque en esta ocasión utilicé una barra superior y sólo la variable E-mail

 

Con esto termina el tutorial para utilizar en nuestro sitio HelloBar para captar suscriptores para Mailrelay, quedando sólo configurar nuestros autorespondedores, newsletters y más para mantener enamorados a nuestros lectores.

-Cyball Brigitte

Cyball Ruiz


El motivo principal por el que no vendes con tus emails es porque acaban en SPAM. Eso tiene solución, está en este ebook, lo puedes descargar registrándote, abajo







Acepto la política de privacidad.



Comentarios

  1. Juan

    Hola Un buen tutorial, en la publicacion dices que para terminar se pega el codigo en WordPress, pero no se dice donde.
    Un saludo

    01/12/2019 - 20:36:05 Publicar una respuesta
    • Mailrelay

      ¡Hola Juan! Creo que se indica aquí, aunque no lo he probado >> WP: al finalizar nuestro formulario, en la pantalla que nos da el script escogemos la opción I use WordPress, descargamos e instalamos el plugin en nuestro sitio y eso es todo. El plugin descargado ya está configurado para la url que diste en el primer paso

      02/12/2019 - 07:27:24 Publicar una respuesta
      • juan

        Gracias, descargando el plugin solo hay que pegar el codigo, muchas gracias por la informacion.

        04/12/2019 - 22:27:24
      • Mailrelay

        ¡Perfecto! Nos alegra que te sea de utilidad 🙂

        05/12/2019 - 07:29:37
  2. Fernando

    Hola, muchas gracias por este fantástico tutorial, 🙂

    Imagino que el proceso envía un correo de suscripción que el «cliente» ha de aceptar, ¿se puede suprimir ese paso? y así pueda recibir la newsletter directamente.

    Un saludo y muchas gracias.

    20/11/2016 - 17:17:20 Publicar una respuesta
    • Mailrelay

      ¡Hola Fernando! En principio no, con Mailrelay es necesario trabajar con doble opt-in, es mejor a la larga.

      21/11/2016 - 09:39:13 Publicar una respuesta
  3. Cristina

    Hola, se puede configurar en prestashop???
    Gracias!

    15/11/2016 - 17:51:56 Publicar una respuesta
    • Mailrelay

      ¡Hola Cristina! Pues no lo se, quizá haya más información en la web de Hellobar

      15/11/2016 - 18:19:26 Publicar una respuesta
    • Cyball

      Hola, he investigado y en Prestashop no se puede configurar Hellobar. Pero si encuentras un módulo que te permita trabajar con webhooks, el proceso sería el mismo en cuanto a la conexión con Mailrelay (agregar enlace de formulario personalizado y activar el post request), Saludos.

      16/03/2017 - 08:19:46 Publicar una respuesta
  4. Javier

    Gracias mil por los pasos, yo usaba hellobar y me cambié porque no lograba conectarlo con mailrelay

    11/11/2016 - 19:41:06 Publicar una respuesta

Deja un comentario

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


Menu Title