Добавить в календарь кнопку в приветственном письме после регистрации - PullRequest
Новая
       40

Добавить в календарь кнопку в приветственном письме после регистрации

0 голосов
/ 24 апреля 2020

Я реализовал кнопку «Добавить в календарь» на веб-странице 

<div class="dropdown" style="display: inline;">
            <button target="_blank" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="border: 1px;border-radius: 2px;padding: 5px 10px;max-height: 30px; background-color: #004FBF;"><i class="material-icons" style="color: #FFFFFF">event</i> <span style="font-size: 12px;font-family: RobotoMedium;color:#FFFFFF;line-height:14px;letter-spacing:0px;border:1px;position: relative;top: -8px;">Add to Calendar</span></button>
            <ul class="dropdown-menu" style="margin-top: 12px;">
              <li style="padding: 5px;"><a target="_blank" href="http://www.google.com/calendar/event?action=TEMPLATE&text={{encode title}}&dates={{calendarFormat sessionStartTime}}/{{calendarFormat sessionEndTime}}&details={{calendarDetail _id}}&location={{location _id}}&trp=false&output=xml" ><i class="fa fa-google" style="color: #000000;padding: 5px;font-size: 18px;"></i><span style="font-size: 14px; font-family: RobotoRegular; color: #464646; letter-spacing: 0;height: 16px;width: 45px;  line-height: 16px;">Google</span></a></li>
              <li class="addToIcalendar" style="padding: 5px;" ><a target="_blank" href="/ics/{{getOrgId}}/{{getEventId}}/{{getSessionId}}" download><i class="fa fa-apple" style="color: #000000;padding:5px;font-size: 18px;"></i><span style="font-size: 14px; font-family: RobotoRegular; color: #464646; letter-spacing: 0;height: 16px;width: 45px;  line-height: 16px;">Apple</span></a></li>
              <li class="addToIcalendar" style="padding: 5px;"><a target="_blank" href="/ics/{{getOrgId}}/{{getEventId}}/{{getSessionId}}" ><img src="/images/outlook.png" height="19" width="19"><span style="font-size: 14px; font-family: RobotoRegular; color: #464646; letter-spacing: 0;
              height: 16px;width: 45px;  line-height: 16px;padding: 5px;">Outlook</span></a></li>
              <li class="addToIcalendar" style="padding: 5px;"><a target="_blank" href="/ics/{{getOrgId}}/{{getEventId}}/{{getSessionId}}"><i class="fa fa-yahoo" style="color: #000000;padding:5px;font-size: 18px;"></i><span style="font-size: 14px; font-family: RobotoRegular; color: #464646; letter-spacing: 0;
              height: 16px;width: 45px;  line-height: 16px;">Yahoo</span></a></li>
            </ul>
          </div>

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

Вывод команды Добавить в календарь в адрес электронной почты:

По умолчанию раскрывающиеся элементы отображаются не после нажатия кнопки. Значки не отображаются должным образом Не работает тот же код в теле письма. Пожалуйста, помогите и спасибо!

Ответы [ 2 ]

1 голос
/ 24 апреля 2020

Раскрывающиеся списки и вообще все, что связано с событием щелчка, очень сложно кодировать в электронном письме, потому что вы не можете использовать JS, к тому же, это может не работать на всех клиентах. Я предлагаю использовать что-то вроде AddEvent , в частности их прямой URL-метод , так как обычная кнопка будет работать только на веб-странице, а не на электронной почте. Используя метод прямого URL, вы можете создать CTA в своем электронном письме, который будет ссылаться на веб-страницу, созданную AddEvent, с информацией о событии и добавлять ссылки в календарь.

0 голосов
/ 27 апреля 2020

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

Во-первых, вы должны прикрепить файл .ics. Например, Gmail извлекает это и делает его очень простым для добавления в календарь человека.

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

В-третьих, вы можете включить прямые ссылки на календарь для Gmail и Yahoo. Это определенные c URL-адреса, которые приведут пользователя к версиям электронной почты в веб-почте. Это может не подходить с мобильных телефонов - вам нужно проверить опыт. Но если учесть, что Gmail делает его действительно простым и видимым, когда вы прикрепляете файл ics, нет никакой реальной причины разбираться с этим.

У лакмуса есть описание специфика c код для этого (это сложно) и некоторые инструменты генерации URL. https://litmus.com/blog/how-to-create-an-add-to-calendar-link-for-your-emails, Gmail: http://kalinka.tardate.com/, генерация ICS: https://apps.marudot.com/ical/.

...