Cómo agregar una ventana emergente de suscripción de correo electrónico a Blogger (a través de Mailchimp)

Publicado: 2022-04-20

¿Desea recopilar correos electrónicos de los visitantes de su sitio web y enviar mensajes personalizados directamente a sus bandejas de entrada? Bueno, sigue este tutorial paso a paso para saber cómo hacerlo.

El marketing por correo electrónico es una de las formas más efectivas de conectarse con la audiencia, atraer más tráfico a los sitios y presentar productos y servicios a su audiencia.

Entonces, para esto, necesita herramientas de marketing por correo electrónico como Mailchimp , convertkit y un formulario de registro de correo electrónico que conectará su sitio web a estas herramientas. Puede usar un formulario de registro o una ventana emergente de suscripción a su sitio web.

La ventana emergente de suscripción es más eficaz que el formulario de suscripción tradicional, ya que atrae la atención del usuario al aparecer en la pantalla. Los usuarios pueden unirse fácilmente a su lista de correo electrónico dando sus nombres y direcciones de correo electrónico en el campo.

Después de eso, la dirección de correo electrónico se agregará a su herramienta de marketing por correo electrónico y luego podrá enviar correos electrónicos personalizados a sus suscriptores y brindarles actualizaciones sobre su nueva publicación o productos.

Si desea hacer marketing de afiliación a través de correos electrónicos, también puede considerar las respuestas automáticas de correo electrónico donde puede automatizar diferentes procesos y generar mejores resultados.

bien, veamos cómo puede agregar una ventana emergente de suscripción de correo electrónico a su sitio web de Blogger e integrarla con su cuenta de Mailchimp.

Pasos para agregar una ventana emergente de suscripción de correo electrónico en Blogger

Para agregar una ventana emergente de suscripción por correo electrónico en Blogger, siga los pasos a continuación.

  1. Ve a tu panel de control de Blogger y haz clic en la sección del tema.
  2. Ahora haga clic en la sección Editar HTML y busque la etiqueta </body>.
  3. Luego pegue el código dado arriba y reemplace el enlace de acción del formulario de Mailchimp en él.
  4. Ahora guarde el código y la ventana emergente de suscripción por correo electrónico se agregará a su sitio web de Blogger.
 <style> .email-subscription-overlay {display: flex;align-items: center;justify-content: center;position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background: rgba(0, 0, 0, 0);z-index: -100;transition: all 400ms;} .email-subscription-overlay.active {background: rgba(0, 0, 0, 0.9);z-index: 200;} .email-subscription-container {background: #fff;padding: 32px;text-align: center;display: flex;box-shadow: 0 2px 12px 3px rgba(0, 0, 0, 0.3);border-radius: 8px;transform: translateY(-200px);opacity: 0;transition: all 200ms;} .email-subscription-overlay.active .email-subscription-container {transform: translateY(0);opacity: 1;} .email-subscription-container form {display: flex;flex-direction: column;margin-top: 32px;} .email-subscription-overlay .email-close-btn {top: 24px;right: 24px;position: fixed;font-size: 50px;font-weight: 600;color:#eee;background: none;border: none;cursor: pointer;pointer-events: none;transition: all 400ms;opacity: 0;} .email-subscription-overlay.active .email-close-btn {opacity: 1;pointer-events: auto;} .email-subscription-container img {width: 300px;object-fit: contain;} .email-subscription-container h2 {font-size: 35px;text-transform: uppercase;margin-bottom: 15px;margin-top: 12px;color: #0a0908;} .email-subscription-container p {margin-top: 10px;font-weight: bold;color: #1d3557;font-size:16px;} .email-subscription-container .text-content {padding: 48px;} .email-subscription-container form .email-input-field {margin-bottom: 16px;padding: 12px 24px;font-size: 16px;border: 1px solid #777;} .email-subscription-container form .email-submit-btn {background: #f50057;border: none;font-weight: 600;font-size: 20px;color: #fff;padding: 10px 60px; cursor: pointer;text-transform: uppercase;transition: all 400ms;} .email-subscription-container form .email-submit-btn:hover {background: #069b7a;} @media (max-width: 800px) {.email-subscription-container {flex-direction: column;width: 400px;align-items: center;}.email-subscription-container .text-content {padding: 0;width: 100%;}} @media (max-width: 500px) {.email-subscription-container { ancho: 75%; }}

#mc_embed_signup div.mce_inline_error {margen: 0 0 1em 0;índice z: 1;color: #000;}
#mc_embed_signup div.mce_inline_error {padding: 5px 10px;font-weight: bold;background-color: white;}
.response {font-weight: 600; color: negro; margen: -5px 0 5px 0;}
  </estilo>

<!-- Ventana emergente de suscripción de correo electrónico-->
<div class='superposición de suscripción de correo electrónico'>
<button class='email-close-btn'>&#215;</button>
<div class='email-subscription-container'>
<img alt='email-signup-form-Image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9TPAOsLb2-sDqk1TUCfkg_Qj2vnK9KnDPPEd94_TKlHtTw6iVhMMwIG7NjdQYseYXG4cCsdNKhkM7zEEe9qwrORpFvQ54cgqDViw7SSXEVFraofdZItMXStgo_2z_LJCXEebwopU0Pf7FWPAlaBkuxjibbvn8zmTLZZ9X81LYFsqUZU4eIjSs6MHJFw/s1600/undraw_Opened_re_i38e%20%281%29.png'/>

<div class='texto-contenido'>
<h2> Suscribir </h2>
<p> Techyleaf para las últimas actualizaciones de SEO </p>

<div class='contenedor'>
<div>
<acción de formulario=' # ' class='validate' method='post' name='mc-embedded-subscribe-form' target='_blank'>
<div><div class='mc-field-group'><input class='email-input-field email obligatorio' name='EMAIL' placeholder='Su dirección de correo electrónico' type='email' value=''/ ></div>
<div class='clear'><div class='response'/><div class='response'/>
</div><!-- las personas reales no deben completar esto y esperar cosas buenas; no elimine esto ni se arriesgue a registrarse con bots-->
<div aria-hidden='true'><input name='b_ac52e8b1ce2a06907e0091d7c_63bf572981' tabindex='-1' type='text' value=''/></div>
<div class='clear'><input class='email-submit-btn subscribe' name='subscribe' type='submit' value='Subscribe'/></div>
</div></formulario></div>
<script src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js' type='text/javascript'/><script type='text/javascript'>(función($ ) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]=&#39;EMAIL&#39;;ftypes[0]=&#39;email&#39;;fnames[ 1]=&#39;NOMBRE&#39;;ftypes[1]=&#39;texto&#39;;}(jQuery));var $mcj = jQuery.noConflict(true);</script>
</div></div></div></div>

  <script>
    const emailSubscriptionOverlay = document.querySelector(&quot;.email-subscription-overlay&quot;);
const emailCloseButton = document.querySelector(&quot;.email-close-btn&quot;);

establecerTiempo de espera(() =&gt; {
    if (!localStorage.getItem(&#39;popupClosed&#39;)) {
        emailSubscriptionOverlay.classList.add(&quot;activo&quot;);
        localStorage.setItem(&#39;ventana emergenteCerrada&#39;, &#39;verdadero&#39;);
    }
}, 3000);

emailCloseButton.addEventListener(&quot;clic&quot;, () =&gt; {
    emailSubscriptionOverlay.classList.remove(&quot;activo&quot;);
});
  </script>

¿Cómo integrar Mailchimp con el formulario Popup?

Debe cambiar el enlace de acción del formulario (Reemplace el # ) con su URL de Mailchimp. (es decir, <form action='#' class='validate').

Para obtener este enlace, debe registrarse para obtener una cuenta gratuita con una cuenta de MailChimp y crear un formulario de registro allí. Después de eso, debe extraer el enlace de acción del formulario de ese código. Sigue el videotutorial para comprobarlo paso a paso.

Video de Youtube

¿Cómo personalizar el formulario de registro emergente?

Si está utilizando temas como Median UI o Fletro pro , es posible que no funcione correctamente en dispositivos móviles. Debe ajustar el ancho de la ventana emergente en el código CSS para eso.

 @media (max-width: 500px) {.email-subscription-container {width: 75%;}}

Encuentre este código y cambie el ancho del contenedor de 75% a 85% así.

También debe cambiar la etiqueta h2 y de párrafo (resaltada arriba) utilizada en el código anterior. Simplemente cambie el texto de acuerdo con su sitio web.

También he mostrado cómo cambiar la duración de la ventana emergente que se muestra en el tutorial de vídeo. De forma predeterminada, se establece en 3 segundos. Entonces, la ventana emergente se cargará después de 3 segundos de carga de la página.

Si desea cambiar la imagen, simplemente busque la imagen del formulario de registro de correo electrónico y luego cambie la URL de origen (src) de la imagen. Primero, cargue la imagen en su sitio web de Blogger y luego obtenga la URL de la imagen haciendo clic derecho en la imagen.

También puede consultar las formas alternativas de integrar Mailchimp con Blogger aquí.

Conclusión

Espero que haya agregado con éxito el formulario de registro emergente a su sitio web de Blogger e integrado Mailchimp para recopilar las direcciones de correo electrónico de sus visitantes.

Si todavía tienes alguna duda, no dudes en preguntarme en la sección de comentarios.