Как добавить всплывающее окно с подпиской по электронной почте в Blogger (через Mailchimp)

Опубликовано: 2022-04-20

Вы хотите собирать электронные письма от посетителей вашего веб-сайта и отправлять персонализированные сообщения прямо в их почтовые ящики? ну, следуйте этому пошаговому руководству, чтобы узнать, как это сделать.

Электронный маркетинг — один из самых эффективных способов установить связь с аудиторией, привлечь больше трафика на сайты и представить продукты и услуги вашей аудитории.

Итак, для этого вам понадобятся инструменты электронного маркетинга, такие как Mailchimp , convertkit и форма подписки по электронной почте, которая свяжет ваш сайт с этими инструментами. Вы можете использовать форму регистрации или всплывающее окно подписки на своем веб-сайте.

Всплывающее окно подписки более эффективно, чем традиционная форма регистрации, поскольку оно привлекает внимание пользователя, всплывая на экране. Пользователи могут легко присоединиться к вашему списку адресов электронной почты, указав свои имена и адреса электронной почты в поле.

После этого адрес электронной почты будет добавлен в ваш инструмент маркетинга по электронной почте, и вы сможете отправлять индивидуальные электронные письма своим подписчикам и сообщать им обновления о вашей новой публикации или продуктах.

Если вы хотите заниматься партнерским маркетингом через электронные письма, вы также можете рассмотреть автоответчики по электронной почте, где вы можете автоматизировать различные процессы и добиться лучших результатов.

Хорошо, давайте проверим, как добавить всплывающее окно подписки по электронной почте на свой веб-сайт Blogger и интегрировать его со своей учетной записью Mailchimp.

Действия по добавлению всплывающего окна подписки по электронной почте в Blogger

Чтобы добавить всплывающее окно подписки по электронной почте в Blogger, выполните следующие действия.

  1. Перейдите на панель инструментов Blogger и щелкните раздел темы.
  2. Теперь щелкните раздел «Редактировать HTML» и найдите тег </body>.
  3. Затем вставьте указанный код над ним и замените на него ссылку действия формы Mailchimp.
  4. Теперь сохраните код, и всплывающее окно подписки по электронной почте будет добавлено на ваш веб-сайт 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 { ширина: 75%; }}

#mc_embed_signup div.mce_inline_error {маржа: 0 0 1em 0;z-index: 1;цвет: #000;}
#mc_embed_signup div.mce_inline_error {отступы: 5px 10px; толщина шрифта: полужирный; цвет фона: белый;}
.response {шрифт: 600; цвет: черный; поле: -5px 0 5px 0;}
  </стиль>

<!-- Всплывающее окно подписки по электронной почте-->
<div class='email-subscription-overlay'>
<button class='email-close-btn'>&#215;</button>
<div class='емейл-подписка-контейнер'>
<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='текстовое содержимое'>
<h2> Подписывайся </h2>
<p> Techyleaf для последних обновлений SEO </p>

<div class='контейнер'>
<дел>
<действие формы=' # ' 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='Ваш адрес электронной почты' type='email' value=''/ ></дел>
<div class='clear'><div class='response'/><div class='response'/>
</div><!-- настоящие люди не должны заполнять это и ожидать хороших вещей - не удаляйте это и не рискуйте регистрацией ботов-->
<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 = новый массив(); window.ftypes = новый массив(); 1]=&#39;NAME&#39;;ftypes[1]=&#39;text&#39;;}(jQuery));var $mcj = jQuery.noConflict(true);</script>
</div></div></div></div>

  <скрипт>
    const emailSubscriptionOverlay = document.querySelector(&quot;.email-subscription-overlay&quot;);
const emailCloseButton = document.querySelector(&quot;.email-close-btn&quot;);

setTimeout(() =&gt; {
    если (!localStorage.getItem(&#39;popupClosed&#39;)) {
        emailSubscriptionOverlay.classList.add("активный");
        localStorage.setItem(&#39;popupClosed&#39;, &#39;true&#39;);
    }
}, 3000);

emailCloseButton.addEventListener(&quot;нажмите&quot;, () =&gt; {
    emailSubscriptionOverlay.classList.remove(&quot;активный&quot;);
});
  </скрипт>

Как интегрировать Mailchimp с всплывающей формой?

Вам нужно изменить ссылку действия формы (замените # ) на ваш URL-адрес Mailchimp. (т.е. <form action='#' class='validate').

Чтобы получить эту ссылку, вам нужно зарегистрировать бесплатную учетную запись с учетной записью MailChimp и создать там форму регистрации. После этого вам нужно извлечь ссылку действия формы из этого кода. Следуйте видеоуроку , чтобы проверить это шаг за шагом.

YouTube видео

Как настроить форму всплывающей подписки?

Если вы используете такие темы, как Median UI или Fletro pro , они могут работать некорректно на мобильных устройствах. Для этого вам нужно настроить ширину всплывающего окна в коде CSS.

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

Найдите этот код и измените ширину контейнера с 75% до 85% следующим образом.

Вам также необходимо изменить теги h2 и абзаца (выделенные выше), используемые в приведенном выше коде. Просто измените текст в соответствии с вашим сайтом.

Я также показал, как изменить продолжительность всплывающего окна в видеоуроке. По умолчанию установлено значение 3 секунды. Таким образом, всплывающее окно загрузится через 3 секунды после загрузки страницы.

Если вы хотите изменить изображение, просто найдите email-signup-form-Image, а затем измените URL-адрес источника (src) изображения. Сначала загрузите изображение на свой веб-сайт Blogger, а затем получите URL-адрес изображения, щелкнув изображение правой кнопкой мыши.

Вы также можете ознакомиться с альтернативными способами интеграции Mailchimp с Blogger здесь.

Вывод

Надеюсь, вы успешно добавили всплывающую форму регистрации на свой веб-сайт Blogger и интегрировали Mailchimp для сбора адресов электронной почты ваших посетителей.

Если у вас все еще есть какие-либо сомнения, не стесняйтесь спрашивать меня в разделе комментариев.