Настройка email-рассылок с Resend для базового шаблона

Создадим новое приложение на основе шаблона user portal и воспользуемся месячным пробным периодом, доступным для pro-тарифа.

Теперь давайте внимательнее посмотрим, что входит в базовый шаблон пользовательского портала, который удобен тем, что служит основой для создания различных систем — справочников, CRM, систем управления аккаунтами и многого другого. Он уже настроен с такими функциями, как восстановление пароля и профили пользователей. Почему бы не создать аккаунт, чтобы изучить его подробнее?

Если перейти на страницу профиля, вы найдёте не только профиль пользователя, но и уведомления. К этой системе уведомлений можно также подключить email-рассылки.

Обратите внимание на две структуры данных — App users и Notifications. Объекты из структуры уведомлений обрабатываются сценарием, который запускается для всех новых уведомлений. Первые шаги этого сценария проверяют такие поля, как заголовок и текст, после чего идёт шаг отправки письма.

Теперь настроим шлюз — это очень просто. Перейдите в Resend, зарегистрируйтесь бесплатно, подтвердите домен и создайте новый API-ключ.

Далее, в маркетплейсе выберите плагин Resend и вставьте ваш API-ключ. Вот и всё!

Теперь email-шлюз подключён к вашему приложению, и вы можете начинать отправлять уведомления.

Вернитесь к сценарию, войдите в режим редактирования и добавьте шаг Resend. Удалите старый шаг отправки письма, поскольку теперь вы используете плагин.

Настройте адрес отправителя из домена, который вы подтвердили в сервисе Resend, укажите получателя (по ID пользователя или email), а затем заполните поля темы и сообщения в форматах HTML и plain text. Всё это — поля в вашем объекте.

Вы также можете сохранить ответ сервиса. Мы сохраним ответ в контекстную переменную. Создадим переменную с именем 'Api Response' типа JSON. Затем добавьте поле 'Resend ID' в структуру уведомлений — это ID, возвращаемый в ответе. Позже мы используем его, чтобы отслеживать, сколько раз письмо было открыто и на него кликали. После сохранения ответа от сервиса Resend опубликуйте изменения и запустите сценарий.

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

Теперь посмотрим на логи объекта. Поле Resend ID пустое, но поле api response содержит ответ сервиса в формате JSON, содержащий ID.

Заполним поле Resend ID, извлекая нужные данные из ответа. Используйте шаг Edit object, чтобы сохранить ID в структуре Resend ID. Просто добавьте эту строку в шаг Edit object: {{ContextVar.api_response}}.id с включённым JavaScript! Стандартная горячая клавиша — CTRL+J.

Протестируем ещё раз. Отправьте новое сообщение с портала. Отлично, оно появилось в почтовом ящике, и Resend ID теперь сохранён в объекте уведомления. Теперь давайте посмотрим, как реализовано восстановление пароля в базовом шаблоне — и настроим несколько дополнительных параметров.

Запросите восстановление пароля, и вы увидите новый объект в структуре reset passwords. Он также обрабатывается сценарием, который нужно дополнительно настроить. Сначала сгенерируйте случайный ключ, который пользователь будет использовать для восстановления пароля, и отправьте ссылку.

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

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

Это сценарий синхронной обработки новых объектов в структуре reset password inputs. Вы видите новый пароль, повторение пароля и секрет, сгенерированный в предыдущем сценарии. Если всё правильно, пароль сохраняется и шифруется алгоритмом MD5.

Теперь разберёмся, как слушать события, такие как «отправлено», «доставлено» и «открыто». Нужно добавить новый вебхук.

Создайте вебхук и назовите его, например, Resend. Скопируйте URL вебхука, добавьте его в сервис Resend и выберите события, которые хотите отправлять на ваш вебхук.

Всё выглядит правильно. Кликните по ссылке в уже полученном письме, и в логах сервиса Resend вы увидите новое событие — «email clicked».

Посмотрите на структуру данных. Это событие достигло вашего вебхука. Теперь его нужно обработать. Здесь и пригодится сохранённый Resend ID.

Отредактируйте сценарий обработки объекта для вебхука. Создайте новую контекстную переменную с именем «resend ID», которую вы извлечёте из JSON-объекта вебхука, и добавьте шаг разбора JSON. Скопируйте его и настройте разбор. JSON хранится в поле body. Затем нужно выбрать свойство data, а затем email ID — это ID объекта письма или внутренний Resend ID.

Далее добавим ещё одну контекстную переменную — email — это переменная-связь со структурой данных notifications. Добавьте шаг поиска, выполните поиск в структуре уведомлений и сохраните результат как массив ссылок; в данном случае будет только одна ссылка, так как email уникален.

Сохраните результат в контекстную переменную email с такими условиями поиска:

{{resend_id}} равно {{contextVar.resend_id}}, то есть тому, что вы извлекли из JSON.

Затем добавьте несколько полей в структуру данных notifications. Это будут булевы поля (true или false) для открытия, клика, доставки и так далее.

В сценарии также добавьте проверку, существует ли объект, к которому вы обращаетесь по ссылке. Идея простая. Мы идём по ссылке, выбираем ID и проверяем, что он не пустой. Далее нужно работать с типом email-уведомления — clicked, opened и так далее.

Добавьте ещё одну контекстную переменную — строку — и сохраните в неё данные разбора из объекта вебхука.

Хорошо, проверим эту контекстную переменную. Если она равна «email clicked», установите шаг «is clicked» в значение true. Для этого используйте контекстную переменную email, перейдите к ней и установите поле «is clicked» в true. Сделайте то же самое для шага Opened и так далее. Есть ещё несколько типов событий, таких как «delivered» и «bounced».

Теперь снова кликните по письму, и вы увидите, что получили объект. Проверим поле «is clicked». Теперь оно установлено в true. Всё верно!

На этом всё. Спасибо за внимание!