Инструкция

Как создать страницу подтверждения отписки на нескольких языках

Готовый код и инструкция по настройке

Что такое страница подтверждения отписки

Страница отписки — эта веб-страница, которую подписчик видит после нажатия на ссылку «отписаться» в письме.

Важно! Когда пользователь кликает на кнопку «отписаться» в письме, то он автоматически уже отписывается от получения следующих рассылок.

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

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

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

Вот как выглядит стандартная страница отписки в Mailganer:

Как изменить стандартную страницу подтверждения подписки

Задизайньте свою собственную страницу

Как изменить стандартную страницу отписки

И зачем нужно дать возможность подписаться снова

Как добавить ссылку отписки

В блочном и визуальном редакторе Mailganer

Как добавить дополнительный язык на страницу отписки

Шаг 1. В разделе редактирования списка, перейдите на вкладку «Страницы отписки/подписки».

Шаг 2. В редакторе справа нажмите на кнопку «Источник».

Шаг 3. В открывшемся окне замените весь код на тот, что ниже:

<html>
<head>
	<title></title>
	<style type="text/css">@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700&subset=latin,cyrillic);

        html {
            background-color: #fcfcfc;
        }

        form {
            max-width: 550px;
            margin: 0 auto;
        }

        .h1, p, label, .button-link {
            color: #333333;
            font-family: 'Roboto', Arial, sans-serif;
            text-align: left;
        }

        .h1 {
            font-size: 28px;
            font-weight: 700;
            line-height: 34px;
            margin-bottom: 10px;

        }

        p {
            margin: 10px 0 0 0;
        }

        p, label {

            font-size: 18px;
            line-height: 28px;
        }

        .label-wrapper {
            display: block;
            margin-top: 4px;
        }

        .button-link {
            background-color: #333333;
            border: 0;
            border-bottom: 2px solid rgba(0, 0, 0, .2);
            border-radius: 4px;
            color: #fff !important;
            cursor: pointer;
            display: inline-block;
            font-size: 16px;
            font-weight: 600;
            line-height: 17px;
            padding: 12px 25px 10px;
            text-decoration: none;
            text-shadow: none;
            letter-spacing: 0.4px;
            margin-top: 15px;
        }

        .button-wrapper {
            margin-bottom: 25px;
        }

        .button-link:hover {
            background-color: #000000;
        }

        .button-link:focus {
            outline: none;
        }

        a.button-link {
            background-color: #0783d9;
        }

        a.button-link:hover {
            background-color: #0564a8;
        }

        label {
            cursor: pointer;
            position: relative;
            padding-left: 25px;
            margin-right: 15px;
        }

        input[type=radio] {
            display: none;
        }

        label:before {
            content: "";
            display: inline-block;
            width: 17px;
            height: 17px;
            border-radius: 100%;
            position: absolute;
            left: 0;
            bottom: 1px;
            background-color: #d8d8d8;
            box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
        }

        .radio label:before {
            border-radius: 8px;
        }

        input[type=radio]:checked + label:before {
            content: "\2022";
            color: #333333;
            font-size: 41px;
            text-align: center;
            line-height: 20px;
        }
	</style>
</head>
<body>
<form method="post">
<div class="h1" id="h1">Вы отписались от рассылки</div>

<p id="text">{{ email }} отписан от рассылки. Пожалуйста, укажите, причину отписки (не обязательно):</p>

<div class="label-wrapper"><input id="type-1" name="type_unsubscribe" type="radio" value="1" /><label for="type-1" id="not-interested">Не интересно</label></div>

<div class="label-wrapper"><input id="type-2" name="type_unsubscribe" type="radio" value="2" /><label for="type-2" id="not-subscribed">Не подписывался</label></div>

<div class="label-wrapper"><input id="type-3" name="type_unsubscribe" type="radio" value="3" /><label for="type-3" id="too-often">Письма приходят часто</label></div>

<div class="label-wrapper"><input id="type-4" name="type_unsubscribe" type="radio" value="4" /><label for="type-4" id="not-relevant">Более не актуально</label></div>

<div class="label-wrapper"><input id="type-5" name="type_unsubscribe" type="radio" value="5" /><label for="type-5" id="spam">Это спам</label></div>

<div class="button-wrapper"><button class="button-link" id="button" style="">Сохранить</button>

<p id="thank-you">{% if save %}Спасибо, мы учли ваш ответ{% endif %}</p>
</div>

<p id="unsubscribe-mistake">Отписались случайно? Всегда можете восстановить подписку.</p>
<a class="button-link" href="{{ confirmUrl }}" id="restore">Восстановить подписку</a></form>
<script>
      const button = document.getElementById('button');
      const h1 = document.getElementById('h1');
      const text = document.getElementById('text');
      const type_1 = document.getElementById('not-interested');
      const type_2 = document.getElementById('not-subscribed');
      const type_3 = document.getElementById('too-often');
      const type_4 = document.getElementById('not-relevant');
      const type_5 = document.getElementById('spam');
      const thank_you = document.getElementById('thank-you');
      const unsubscribe_mistake = document.getElementById('unsubscribe-mistake');
      const restore = document.getElementById('restore');
      const params = new URLSearchParams(location.search);
      const lang = params.get('lang')
      if (lang === 'eng') {
          button.innerText = 'Submit'
          h1.innerText = 'You have successfully unsubscribed'
          text.innerText = '{{ email }} was unsubscribed. Please select the unsubscribe reason (optional):'
          type_1.innerText = 'Not interested'
          type_2.innerText = 'Have not subscribed'
          type_3.innerText = 'Receive emails to often'
          type_4.innerText = 'No longer relevant'
          type_5.innerText = 'This is spam'
          thank_you.innerText = '{% if save %}Thank you, we have saved your answer{% endif %}'
          unsubscribe_mistake.innerText = 'If you unsubscribed by mistake you can always restore your subscription'
          restore.innerText = 'Restore subscription'
          restore.href = '{{ confirmUrl }}?lang=eng'
      }
  </script></body>
</html>

Код для страницы повторной подписки:

<html>
<head>
	<title></title>
	<style type="text/css">@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700&subset=latin,cyrillic);

        html {
            background-color: #fcfcfc;
        }

        form {
            max-width: 550px;
            margin: 0 auto;
        }

        .h1, p, label, .button-link {
            color: #333333;
            font-family: 'Roboto', Arial, sans-serif;
            text-align: left;
        }

        .h1 {
            font-size: 28px;
            font-weight: 700;
            line-height: 34px;
            margin-bottom: 10px;

        }

        p {
            margin: 10px 0 0 0;
        }

        p, label {

            font-size: 18px;
            line-height: 28px;
        }

        .label-wrapper {
            display: block;
            margin-top: 4px;
        }

        .button-link {
            background-color: #333333;
            border: 0;
            border-bottom: 2px solid rgba(0, 0, 0, .2);
            border-radius: 4px;
            color: #fff !important;
            cursor: pointer;
            display: inline-block;
            font-size: 16px;
            font-weight: 600;
            line-height: 17px;
            padding: 12px 25px 10px;
            text-decoration: none;
            text-shadow: none;
            letter-spacing: 0.4px;
            margin-top: 15px;
        }

        .button-wrapper {
            margin-bottom: 25px;
        }

        .button-link:hover {
            background-color: #000000;
        }

        .button-link:focus {
            outline: none;
        }

        a.button-link {
            background-color: #0783d9;
        }

        a.button-link:hover {
            background-color: #0564a8;
        }

        label {
            cursor: pointer;
            position: relative;
            padding-left: 25px;
            margin-right: 15px;
        }

        input[type=radio] {
            display: none;
        }

        label:before {
            content: "";
            display: inline-block;
            width: 17px;
            height: 17px;
            border-radius: 100%;
            position: absolute;
            left: 0;
            bottom: 1px;
            background-color: #d8d8d8;
            box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
        }

        .radio label:before {
            border-radius: 8px;
        }

        input[type=radio]:checked + label:before {
            content: "\2022";
            color: #333333;
            font-size: 41px;
            text-align: center;
            line-height: 20px;
        }
	</style>
</head>
<body>
<form method="post">
<div class="h1" id="h1">Подписка подтверждена</div>

<p id="text">{{ email }} подписан на рассылку от Зуйков и партнеры</p>
<a class="button-link" href="https://zuykov.com" id="button">Перейти на сайт</a></form>
<script>
      const button = document.getElementById('button');
      const h1 = document.getElementById('h1');
      const text = document.getElementById('text');
      const params = new URLSearchParams(location.search);
      const lang = params.get('lang')
      if (lang === 'eng') {
          button.innerText = 'Go to site'
          h1.innerText = 'Subscription confirmed'
          text.innerText = '{{ email }} was subscribed'
      }
  </script></body>
</html>

Шаг 4. Задайте собственные переводы для каждого текст в самом низу вставленного кода внутри тэга <script>.

Как подписчику показать ссылку отписки на английском языке

Теперь, чтобы подписчики видели ссылку подписки на нужном языке, вам нужно к конструкции {{unsubscribeUrl}} добавить параметр ?lang=eng, чтобы получилось так:

{{unsubscribeUrl}}?lang=eng

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

Страница отписки на английском языке готова!