Заявка падает в очередь: «Добавьте кнопку Apple Wallet в письмо с подтверждением». На первый взгляд, ничего сложного — пока не открываешь документацию Apple и не упираешься в правила использования бейджа, подписанный .pkpass и вопрос, куда вообще должна вести кнопка. Сама кнопка — это просто картинка; сложность начинается там, где её нужно подключить к живому пропуску и правильно разместить.
Это короткая версия для того, кому предстоит выкатить эту кнопку: где ей место в email, на сайте и в приложении, какие правила действуют у Apple и Google, и как подключить её к работающей ссылке на установку, которая действительно сохраняет пропуск. Сделанная правильно, кнопка поднимает конверсию в установку, а не простаивает мёртвым грузом в шаблоне.
Где кнопке место: email, сайт, приложение
Кнопка работает в трёх местах, и у каждого — свой момент, когда пропуск представляет ценность для клиента.
В email она идёт в письмо-подтверждение или предложение: чек заказа, подтверждение билета, приветствие после регистрации в программе лояльности. Есть нюанс: клиент может открыть письмо на ноутбуке, где кнопка не сработает, поэтому добавьте строку вроде «откройте это письмо на iPhone, чтобы добавить пропуск».
На сайте кнопке место на странице подтверждения или предложения, рядом с тем, что сохраняют: сразу после оплаты заказа, на странице подтверждения бронирования, на отдельной странице с купоном.
В приложении кнопка идёт там, где информация о пропуске уже отображается, сразу после действия, которое его создаёт: покупки, оформления подписки, выпуска билета. Нативные приложения используют собственный элемент кнопки от Apple, а не картинку.
Официальные правила Apple для кнопки
Apple считает бейдж кнопки товарным знаком, поэтому правила строгие, и их стоит соблюдать, чтобы не получить отказ при проверке приложения или кнопку, которая выглядит криво.
Используйте SVG-файл кнопки, который можно скачать у Apple, для веба и email, и EPS-версию — для печатных материалов с QR-кодом. Не создавайте свою версию бейджа и не перекрашивайте, не разворачивайте, не анимируйте его и не добавляйте тени. В нативных приложениях используйте элемент управления PKAddPassButton — он сам отрисовывает правильный вид и язык.
По вёрстке: оставляйте вокруг бейджа свободное поле не меньше одной десятой его высоты и размещайте его на белом или светлом фоне. Для тёмных фонов у Apple есть контурная версия. Бейдж должен оставаться второстепенным элементом, а не доминировать над основным контентом.
В названиях пишите «Apple Wallet» при первом упоминании и «Wallet» — при последующих, и добавляйте строку с указанием товарного знака Apple там, где у вас есть юридический текст. Эти правила именования — то, что Apple проверяет отдельно.
Несколько ошибок гарантированно приводят к отклонению кнопки или к тому, что она просто не работает. Самодельный бейдж вместо официального не проходит проверку, а бейдж, спрятанный так, что его назначение непонятно, игнорируют.
Ссылка на неподписанный или некорректно собранный пропуск при нажатии не даёт ничего, а непоследовательное название вроде «сохранить в iPhone wallet» нарушает правила бренда. Всего этого легко избежать, используя готовые файлы и правильно подписанный пропуск.
Кнопка Add to Google Wallet: та же задача, другие правила
Если вы поддерживаете оба кошелька — а большинству consumer-бизнесов стоит, особенно учитывая, что у глобальной диаспорной аудитории доля iOS и Android держится ближе к 50/50, — кнопка Google встанет рядом с кнопкой Apple. Задача та же самая, детали другие.
Кнопка Google поставляется в форматах Android XML, SVG и PNG, только в чёрном цвете, с основным и укороченным вариантами. Свободное поле — фиксированные 8dp со всех сторон, минимальная высота кнопки — 48dp. Одно правило легко упустить: если на странице есть другие кнопки, кнопка Add to Google Wallet должна быть равна им по размеру или больше, но никогда не меньше.
Кнопка должна вызывать flow Google Wallet API, который открывает приложение Google Wallet, чтобы пользователь сохранил пропуск на Android-устройство и в свой Google-аккаунт. В названии пишите «Google Wallet» с заглавных G и W и используйте локализованный текст кнопки от Google, а не свой собственный.
Получается две кнопки и два свода правил в одном месте шаблона. Соберите пропуск под оба стандарта, разместите оба бейджа рядом — а дальше устройство клиента само разберётся, что показать.
Подключаем кнопку к рабочей ссылке на установку
Бейдж — это просто картинка, пока он не ведёт на настоящий подписанный пропуск. Три вещи связывают его с тем, что клиент реально может сохранить.
-
1
Сгенерируйте ссылку на установку для каждого пользователя
Кнопка ведёт на install-URL, который разрешается в подписанный пропуск. Получить такой пропуск можно двумя путями: собрать его самостоятельно на PassKit от Apple — то есть сгенерировать и подписать .pkpass и поднять сервис, который отдаёт ссылку, — либо взять платформу для пропусков, которая берёт подпись и хостинг на себя. Первый путь даёт полный контроль и подходит командам с ресурсом на бэкенд; второй — быстрее для большинства маркетинговых и продуктовых команд. Для общего пропуска, например обычного купона, одной ссылки хватает на всех. Для персонализированного — например, карты лояльности с баллами конкретного клиента, — генерируется уникальная ссылка на каждого пользователя, чтобы сохранённый пропуск нёс именно его данные. С платформой вроде Pushwoosh Wallet passes вы собираете пропуск один раз и генерируете такую ссылку на установку, не занимаясь подписью .pkpass вручную — сама платформа сертифицирована по SOC 2 Type I и ISO 27001:2022, с дата-центрами в ЕС и США.
-
2
Вставьте кнопку в шаблон вашей email-платформы
В вашей email-платформе разместите SVG-бейдж Apple (и кнопку Google, если поддерживаете оба кошелька) и укажите в качестве ссылки install-URL. Для персонализированного пропуска большинство email-платформ позволяют вставить уникальную ссылку как переменную персонализации, так что кнопка каждого получателя будет вести на его собственный пропуск. Добавьте пометку «откройте на iPhone» и держите бейдж на светлом фоне, как того требуют правила Apple.
-
3
Считайте сохранения, а не только клики
Клик по бейджу — это ещё не сохранение; клиенту всё ещё нужно подтвердить добавление пропуска. Отслеживайте само добавление как отдельное событие, чтобы измерять именно конверсию в установку, а не просто CTR. Этот показатель говорит, работают ли размещение и предложение, и именно его стоит оптимизировать — на телефоне остаётся только сохранённый пропуск.
Одна ссылка на все каналы
Генерировать уникальную ссылку на установку для каждого пользователя и вручную вставлять её в каждый канал — подход, который не масштабируется дальше пары кампаний. Ссылка — один и тот же актив, независимо от того, идёт ли она в email, push или SMS, поэтому эффективный путь — сгенерировать её один раз и переиспользовать везде.
С Pushwoosh Wallet passes вы собираете пропуск, генерируете ссылку на установку и распространяете её через push, email и SMS из одного места. Кнопки Apple и Google ведут на один и тот же пропуск, а сохранения и обновления вы контролируете, не прикасаясь к файлу .pkpass.
Поднимите конверсию в установку wallet-пропуска с Pushwoosh
Выкатите кнопку один раз и переиспользуйте ссылку везде. Pushwoosh Wallet passes генерирует ссылку на установку для Apple и Google Wallet и распространяет её через push, email и SMS из одного дашборда.
FAQ
Используйте официальный SVG-бейдж Apple для веба и email без изменений: не перекрашивайте, не разворачивайте, не анимируйте и не добавляйте эффекты. Оставляйте свободное поле не меньше одной десятой высоты бейджа, размещайте его на белом или светлом фоне (или используйте контурную версию на тёмном), и держите его второстепенным по отношению к основному контенту. В приложениях используйте элемент PKAddPassButton вместо картинки и называйте кошелёк «Apple Wallet», а затем — «Wallet».
Нет. У Apple и Google — собственные бейджи и правила, и заменить одно другим нельзя. Если поддерживаете оба кошелька, разместите оба бейджа, каждый со ссылкой на свой формат пропуска. Кнопка Google — только в чёрном цвете, с фиксированным полем 8dp и минимальной высотой 48dp, и должна вызывать flow Google Wallet API.
И там, и там. SVG-бейдж Apple и кнопка Google сделаны как для email, так и для веб-страниц. Единственная оговорка для email — пропуск добавляется, только если письмо открыто на совместимом устройстве, поэтому добавьте короткую подсказку получателям открыть письмо на телефоне.