Crear cuenta Mailrelay Crear cuenta Mailrelay Crear cuenta Mailrelay

Get more subscribers using Hellobar and Mailrelay

Published by Cyball Brigitte on August 9, 2016


Would you like to convert more visitors into new subscribers? In this tutorial, we will give you  basic information about using HelloBar with Mailrelay to capture more subscribers on your website or blog.

Hi, I’m Cyball Brigitte and I am momblogger in Mami 507 | The blog of a Panamanian mother.

A few weeks ago, I discovered Mailrelay thanks to some articles by Ana Maria from Frikymamá and my enthusiasm with this system led me to migrate from my old provider and I confess that I loved the features available in Mailrelay, so I have even prepared a guest post (out of my niche) with Ana Maria about connecting Mailrelay and HelloBar using only the email field.

It may seem that this is the same post, but there is a big difference for me, and certainly for you too

In the previous tutorial, I assumed that the reader already installed HelloBar and it was created to explain how to connect with the Mailrelay as a new email marketing platform, and using a slider form.

Here I will show you how to set up this tool from scratch using Blogger and other platforms with minimal programming language manipulation (very easy to do), and for this popup, we will use the variables

“Name” and email with more custom configuration option and inserting an image, all in a free account (which is not possible with Sumome).

I have written other articles on Mailrelay in Spanish, which is my native language.

Let’s see step by step how you can start using HelloBar with Mailrelay.

First step: How to create an account on HelloBar

We will access the HelloBar website to register our URL (the URL of our blog or website).

After that, we will open our Google account.

If you don’t have an account, you can use this> link <to use your email with other platforms, you must follow the steps up to the sixth step; if you created your website using, this platform doesn’t allow the use of toolbars.

Inicio en HelloBar

Second step: Getting the email addresses

We will choose the option Collect emails and edit the message that will be displayed  (this is the default option, so we will change to pop-up).

seleccionar forma de captación de emails en HelloBar

Pop Up en HelloBar

Step Three: Set up our contact list in Mailrelay

In the Settings screen we will change the option from just email addresses to Names and email addresses and the option which “contact list “, to ” new contact list “ here we will  insert the name of the new list, selecting the option Webhook (Advanced)  with the field “Where do you want your contacts stored”?

On the next screen, insert the information you will get on the Mailrelay account:

► A.- In your  Mailrelay account, click on opt-in -> custom forms, to create a new form with the group you want to work with:


Creando formularios personalizados

► B.- Once you finish it, you will see the new form in a list, just select this form and click the button to generate a link, located just above the list.

Generar enlace para el formulario

After that,  go back to the HelloBar site, paste the link you have generated, in the field “Paste the required information below” and select the option Post Request.

If you created it correctly, it would look like this image:

Selección de formulario

Now just click on Done.

Step Four: popup Configuration

On “Style”  we will change the bar type to modal, which is the same as a popup. In “Placement” we will choose where the pop-up will be displayed, I recommend selecting  Middle2 so that the form is centered on the screen.

In “When does it display”? we will Select when the pop-up will be displayed.

The available options are:

  • 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

I selected the option “after scrolling to middle” because I think this option allows the visitor to view the  website first, and it is a good time to invite him to subscribe to your blog.

Configuración del estilo del formulario de Hellobar

Fifth step: apply a good design

In screen design, we will select the design of the popup.

Here we can see the main difference between HelloBar and Sumone

We have 10 themes to choose from, all of them are configurable.

In the tutorial we will be using the Hello Bar Classic.

In COLORS tab, you can select the colors you want to use to match the design of the website, or any other template you want to use.

In the Image tab, you can choose the image of the pop-up (not a backgrownd image) it offers several options for where you want to place it.

In the TEXT tab, we will add the texts, for each field of the form: title (headline) Description (Caption) the fields that the subscriber will fill (placeholders) and button, and the font to be used (this may vary depending on the selected theme).

For this pop-up, I deleted the headline and caption, because the image used is very explanatory in my opinion.

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

Sixth step: choose when the HelloBar pop-up will be displayed

In the Targeting tab, the only option we can change is “How Often should the Hello bar be displayed?” Select the option you prefer.

I would recommend you to select Stop showing after the visitor provided the response, with this option, during 24 hours, the popup will no longer be displayed after the first time, and this will allow the visitor to read your content without any other interruption.

And so we have the subscription form with our pop-up without any Use of CSS or HTML code for creating it.


Seventh step: Inserting the HelloBar HTML code in Blogger

After finishing the pop-up configuration, we will see the screen which displays the script to insert to the website.

Just select it, access the Blogger dashboard and click on Templates> Edit HTML.

Search for “Head” and below it, you can paste the script.

It will take only a few minutes or less, and your pop-up will be fully functional and directly synchronized to the subscriber group selected in the third step of this tutorial on HelloBar.

Código de hellobar para insertar formulario en Blogger


You can see the result of this tutorial on this test page which I published

Using HelloBar on other platforms

HelloBar also works with, Shopify, Squarespace, Weebly and Tumblr and these would be the settings after creating the pop-up (or slider, as used in

  • WP: When you complete the form, on the script screen, choose the option I use WordPress, so you can download and install the plugin generated by the tool on the website and the form will be installed. The downloaded plugin already will have the URL you entered in the first step
  • Shopify: In your dashboard, click on Online Store> Theme> Press the three ellipses button and click Edit HTML / CSS. On the next screen, on the layout option, select theme.liquid to see the template and search for / Body> tag and before this, we will paste the script obtained en I can install code myself en HelloBar (the same with the rest of the platforms)
  • Squarespace: In the dashboard, click Settings> Advanced> Code Injection and search for “Footer” and paste the script
  • Weebly: in “dashboard” click Sites> Edit> Settings> SEO and in the field Foster the Code you can paste the script.
  • Tumblr: The installation is identical to Blogger, click on the blog configuration> Change Appearance> Edit Html search for head> to paste the script, I set up this script in, my alternative blog from Mami507. But in this case, I only used the email field.

With these simple steps, you can configure Hellobar on your blog, to get more subscribers. After that, just create your newsletters and autoresponders, you can do that using the Free account offered by Mailrelay.

-Cyball Brigitte

Subscribe to Mailrelay's newsletter

We don't offer the typical PDF download that no one reads, just a subscription to great weekly contents


  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???

    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

Leave a comment

Your email address will not be published. Required fields are marked *

Menu Title