Лендинг для сбора пуш подписок

Хочу поделиться своим лендингом для сбора базы пуш подписок. Главными достоинствами ленда является то, что он универсален и работает так же хорошо на десктопах, как и на мобайле, без необходимости редиректа на мобильную версию и умеет перехватывать событие подписки и запрета подписки, после чего можно сделать редирект на другую страницу, чтобы попытаться снова. Так же при клике, страница открывается в полноэкранном режиме, чтобы затрудняет уход из лендинга, и как бы настаивает подписаться, если вы понимаете о чем я 😉 Не менее важная деталь, анимированная стрелка, указывающая на кнопку подписаться.

Сам я пользуюсь сервисом Sendpulse, для сбора Push подписчиков, но вы можете изменить лендинг и пользоваться любым другим способом.

Для нормального отображения, вам понадобиться картинка стрелки, вот она.

Стрелка для лендинга

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

<!DOCTYPE html>
<html lang="ru_RU" prefix="og: https://ogp.me/ns#">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ТУТ_ТАЙТЛ_ЛЕНДИНГА</title>
    <!-- Приложил опен граф теги, если хотите опубликовать ссылку на лендинг в соцсетях -->
    <meta property="og:type" content="website" />
    <meta property="og:locale" content="ru_RU" />
    <meta property="og:title" content="ТУТ_ТАЙТЛ_ЛЕНДИНГА">
    <meta property="og:description" content="ТУТ_ОПИСАНИЕ_ЛЕНДИНГА">
    <meta property="og:image" content="ТУТ_КАРТИНКА_ЛЕНДИНГА">
    <meta property="og:site_name" content="ТУТ_НАЗВАНИЕ_САЙТА_ЛЕНДИНГА">
    <style type="text/css">
      body {
        background-color: #000000;
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
      }

      #content {
        width: 100%;
        max-width: 800px;
        position: absolute;
        top: 45%;
        left: 55%;
        transform: translate(-50%, -50%);
        z-index: 9;
      }

      #subnote {
        position: absolute;
        top: 0;
        font-weight: normal;
        text-align: center;
        color: white;
        font-size: 400%;
      }

      .button {
        background-color: white;
        text-align: center;
        font-size: 50%;
        padding: 13px 28px 13px 28px;
        line-height: 60px;
        color: black;
        text-transform: capitalize;
        border-radius: 3%;
      }

      #blockI {
        position: absolute;
        top: 210px;
        left: 180px;
        margin-bottom: 0px;
        margin-top: 0px;
        z-index: 2;
      }

      .arrow {
        width: 100px;
        height: auto;
        -webkit-animation: mover 0.5s infinite alternate;
        animation: mover 0.5s infinite alternate;
      }

      @media screen and (max-width: 600px) {
        #content {
          top: 0;
          transform: translate(-50%);
        }

        #blockI {
          top: auto;
          left: auto;
          right: 10%;
          bottom: 0;
        }

        .arrow {
          width: 50px;
        }

        #subnote {
          font-size: 250%;
        }
      }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script charset="UTF-8" src="//cdn.sendpulse.com/9dae6d62c816560a842268bde2cd317d/js/push/19f8f1f5cc48ef9182c1d6c2a921fdfb_1.js" async></script>
  </head>
  <body>
    <div id="blockI"><img src="/arrow.png" class="arrow"></div>

    <div id="content">
      <div id="subnote">
        <div>Разрешите просмотр</div>
        <span class="button">Разрешить</span>
      </div>
    </div>

    <script>
      function requestFullScreen() {
        var el = document.body;

        // Supports most browsers and their versions.
        var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen
                || el.mozRequestFullScreen || el.msRequestFullScreen;

        if (requestMethod) {

          // Native full screen.
          requestMethod.call(el);

        } else if (typeof window.ActiveXObject !== "undefined") {

          // Older IE.
          var wscript = new ActiveXObject("WScript.Shell");

          if (wscript !== null) {
            wscript.SendKeys("{F11}");
          }
        }
      }

      var i = 0;
      var arrow = true;
      function arrowan() {
        if (arrow == true) {
          if (i == 0) {
            i = 1;

            $("#blockI").animate({
              "margin-bottom": "+=50px",
            }, function () {
              arrowan();
            });

            $("#blockI").animate({
              "margin-top": "-=50px",
            }, function () {
              arrowan();
            });
          } else if (i == 1) {
            i = 0;
            $("#blockI").animate({
              "margin-bottom": "-=50px",
            }, function () {
              arrowan();
            });

            $("#blockI").animate({
              "margin-top": "+=50px",
            }, function () {
              arrowan();
            });
          }
        }
      }

      $(document).ready(function () {
        arrowan();

        $(document).click(function () {
          requestFullScreen();
        });

        if (Notification.permission == 'default') {
          oSpP.startSubscription(); // Ставьте в настройках Sendpulse вызов окна подписки при клике на кнопку

          var grantedch = setInterval(function () {
            if (Notification.permission == 'granted' || Notification.permission == 'denied') {
              clearInterval(grantedch);
              // ТУТ СРАБАТЫВАЕТ ЕСЛИ ПОДПИСАЛСЯ ЛИБО ОТКАЗАЛСЯ ОТ ПОДПИСКИ
            }
          }, 1000);
        }
      });
    </script>
  </body>
</html>

 

Вам может так же понравиться

Об авторе: Эрик Акопян

Онлайн с 2002 года. Вебмастер, программист, дизайнер и блогер.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *