Comment ajouter une fenêtre contextuelle d'abonnement par e-mail à Blogger (via Mailchimp)

Publié: 2022-04-20

Vous souhaitez collecter les e-mails des visiteurs de votre site Web et envoyer des messages personnalisés directement dans leur boîte de réception ? Eh bien, suivez ce tutoriel étape par étape pour savoir comment procéder.

Le marketing par e-mail est l'un des moyens les plus efficaces de se connecter avec le public, d'obtenir plus de trafic sur les sites et de présenter des produits et services à votre public.

Donc, pour cela, vous avez besoin d'outils de marketing par e-mail comme Mailchimp , convertkit et un formulaire d'inscription par e-mail qui connectera votre site Web à ces outils. Vous pouvez soit utiliser un formulaire d'inscription, soit une fenêtre contextuelle d'abonnement à votre site Web.

La fenêtre contextuelle d'abonnement est plus efficace que le formulaire d'inscription traditionnel car elle attire l'attention de l'utilisateur en s'affichant à l'écran. Les utilisateurs peuvent facilement rejoindre votre liste de diffusion en indiquant leurs noms et adresses e-mail dans le champ.

Après cela, l'adresse e-mail sera ajoutée à votre outil de marketing par e-mail et vous pourrez ensuite envoyer des e-mails personnalisés à vos abonnés et leur donner des mises à jour sur votre nouveau message ou vos nouveaux produits.

Si vous souhaitez faire du marketing d'affiliation par e-mail, vous pouvez également envisager des répondeurs automatiques par e-mail où vous pouvez automatiser différents processus et générer de meilleurs résultats.

ok, voyons comment vous pouvez ajouter une fenêtre contextuelle d'abonnement par e-mail à votre site Web Blogger et l'intégrer à votre compte Mailchimp.

Étapes pour ajouter une fenêtre contextuelle d'abonnement par e-mail dans Blogger

Pour ajouter une fenêtre contextuelle d'abonnement par e-mail dans Blogger, suivez les étapes ci-dessous.

  1. Accédez à votre tableau de bord Blogger et cliquez sur la section thème.
  2. Cliquez maintenant sur la section Modifier HTML et recherchez la balise </body>.
  3. Collez ensuite le code donné au-dessus et remplacez le lien d'action du formulaire Mailchimp dessus.
  4. Enregistrez maintenant le code et la fenêtre contextuelle d'abonnement par e-mail est ajoutée à votre site Web 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 { largeur : 75 % ; }}

#mc_embed_signup div.mce_inline_error {marge : 0 0 1em 0 ; z-index : 1 ; couleur : #000 ;}
#mc_embed_signup div.mce_inline_error {padding : 5px 10px;font-weight : gras ;background-color : blanc ;}
.response {font-weight : 600 ; couleur : noir ; marge : -5px 0 5px 0 ;}
  </style>

<!-- Popup d'abonnement par e-mail-->
<div class='email-subscription-overlay'>
<bouton class='email-close-btn'>&#215;</bouton>
<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='text-content'>
<h2> S'abonner </h2>
<p> Techyleaf pour les dernières mises à jour SEO </p>

<div class='container'>
<div>
<action de formulaire=' # ' class='validate' method='post' name='mc-embedded-subscribe-form' target='_blank'>
<div><div class='mc-field-group'><input class='email-input-field required email' name='EMAIL' placeholder='Votre adresse e-mail' type='email' value=''/ ></div>
<div class='clear'><div class='response'/><div class='response'/>
</div><!-- de vraies personnes ne devraient pas remplir ceci et s'attendre à de bonnes choses - ne supprimez pas cela ou ne risquez pas d'inscrire des 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></form></div>
<script src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js' type='text/javascript'/><script type='text/javascript'>(function($ ) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]=&#39;EMAIL&#39;;ftypes[0]=&#39;email&#39;;fnames[ 1]=&#39;NOM&#39;;ftypes[1]=&#39;text&#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;);

setTimeout(() => {
    si (!localStorage.getItem(&#39;popupClosed&#39;)) {
        emailSubscriptionOverlay.classList.add(&quot;active&quot;);
        localStorage.setItem(&#39;popupFermé&#39;, &quot;vrai&quot;);
    }
}, 3000);

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

Comment intégrer Mailchimp au formulaire Popup ?

Vous devez modifier le lien d'action du formulaire (Remplacez le # ) par votre URL Mailchimp. (c'est-à-dire <form action='#' class='validate').

Pour obtenir ce lien, vous devez créer un compte gratuit avec un compte MailChimp et y créer un formulaire d'inscription. Après cela, vous devez extraire le lien d'action du formulaire à partir de ce code. Suivez le didacticiel vidéo pour le vérifier étape par étape.

Vidéo Youtube

Comment personnaliser le formulaire d'inscription Popup ?

Si vous utilisez des thèmes tels que Median UI ou le thème Fletro pro , il se peut qu'il ne fonctionne pas correctement sur les appareils mobiles. Vous devez ajuster la largeur du Popup dans le code CSS pour cela.

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

Trouvez ce code et changez la largeur du conteneur de 75% à 85% comme ceci.

Vous devez également modifier la balise h2 et le paragraphe (mis en surbrillance ci-dessus) utilisés dans le code ci-dessus. Changez juste le texte selon votre site Web.

J'ai également montré comment modifier la durée d'affichage de la fenêtre contextuelle dans le didacticiel vidéo. Par défaut, il est réglé sur 3 secondes. Ainsi, la popup se chargera après 3 secondes de chargement de la page.

Si vous souhaitez modifier l'image, recherchez simplement email-signup-form-Image, puis modifiez l'URL source (src) de l'image. Tout d'abord, téléchargez l'image sur votre site Web Blogger, puis obtenez l'URL de l'image en cliquant avec le bouton droit sur l'image.

Vous pouvez également consulter les autres moyens d'intégrer Mailchimp à Blogger ici.

Conclusion

J'espère que vous avez ajouté avec succès le formulaire d'inscription Popup à votre site Web Blogger et intégré Mailchimp pour collecter les adresses e-mail de vos visiteurs.

Si vous avez encore des doutes, n'hésitez pas à me demander dans la section des commentaires.