Получение заявок из LP Generator Отправка e-mail через свой ящик

Интеграция

Получение заявок из LP Generator Отправка e-mail через свой ящик

В этой инструкции мы по шагам с примерами разберём, как настроить оба сервиса и связать их между собой:

  1. Настройка приёма заявок из LP Generator: HTTP-источник с параметрами формы, плагин «Произвольный код» и вызов скрипта после отправки.
  2. Настройка отправки письма через свой почтовый ящик: подключение, получатели, тема, сообщение, HTML-версия и подстановка данных из сценария.

Отдельные инструкции: источник «Получение заявок из LP Generator» · действие «Отправка e-mail через свой ящик»

Создание подключений

Если вы ещё не создавали нужные подключения - не пропускайте этот блок: без них настроить интеграцию не получится. Если подключения уже есть в WebJack, можно сразу перейти к настройке источника и действия ниже.

Подключение электронной почты

Где создать подключение

  1. В меню слева выберите «Подключения».
  2. Нажмите «+» и выберите тип «Электронная почта».
  3. Укажите «Способ» подключения и заполните поля.
  4. Нажмите «Подключить».

SMTP (логин и пароль)

Подходит для любого почтового сервера, в том числе Яндекс и Gmail. В поле «Способ» выберите «SMTP (логин и пароль)».

Поле Что указать
«Название» Произвольное имя подключения в проекте (необязательно)
«SMTP-сервер» Адрес сервера исходящей почты
«Порт» Обычно 587 (STARTTLS) или 465 (SSL/TLS)
«Шифрование» STARTTLS для порта 587, SSL/TLS для порта 465
«Логин» Полный адрес почты
«Пароль» Пароль приложения (не основной пароль от аккаунта)
«Адрес отправителя» Email в поле «От» (если не заполнить - подставится логин)

Яндекс Почта (SMTP)

Рекомендуемые параметры:

  • «SMTP-сервер»: smtp.yandex.ru
  • «Порт»: 465
  • «Шифрование»: SSL/TLS (альтернатива: порт 587 и STARTTLS)
  • «Логин»: ваш адрес, например name@yandex.ru
  • «Пароль»: пароль приложения (см. ниже)
  • «Адрес отправителя»: тот же адрес, что и логин
Пароль приложения (Яндекс)
  1. Войдите в аккаунт на id.yandex.ru.
  2. Откройте «Безопасность».
  3. Включите двухфакторную аутентификацию, если она ещё не включена - без неё пароли приложений недоступны.
  4. В разделе «Пароли приложений» нажмите «Создать».
  5. Выберите тип «Почта» (или укажите название, например «WebJack»).
  6. Скопируйте сгенерированный пароль и вставьте его в поле «Пароль» при создании подключения.

Gmail (SMTP)

Рекомендуемые параметры:

  • «SMTP-сервер»: smtp.gmail.com
  • «Порт»: 465
  • «Шифрование»: SSL/TLS (альтернатива: порт 587 и STARTTLS)
  • «Логин»: ваш адрес @gmail.com или корпоративный Google Workspace
  • «Пароль»: пароль приложения Google (см. ниже)
  • «Адрес отправителя»: тот же адрес, что и логин
Пароль приложения (Google)
  1. Откройте настройки Google-аккаунта.
  2. Перейдите в «Безопасность».
  3. Включите двухэтапную аутентификацию, если она ещё не включена.
  4. Откройте страницу «Пароли приложений».
  5. Создайте пароль: приложение - «Почта», устройство - «Другое» (например, «WebJack»).
  6. Google покажет 16-символьный пароль - скопируйте его в поле «Пароль» (пробелы можно не вводить).

Редактирование SMTP-подключения

После создания можно изменить сервер, порт, логин и пароль в карточке подключения. При сохранении сервис снова проверит SMTP-соединение.

Яндекс Почта (OAuth)

Без ручного ввода SMTP-параметров и пароля приложения - достаточно войти в аккаунт Яндекса и разрешить отправку писем.

  1. В форме подключения в поле «Способ» выберите «Яндекс Почта».
  2. При желании укажите «Название» подключения.
  3. Нажмите «Подключить».
  4. Откроется страница авторизации Яндекса - войдите в нужный аккаунт.
  5. Подтвердите доступ приложению к отправке писем (доступ к SMTP Яндекс.Почты).
  6. После успешной авторизации вы вернётесь в сервис - подключение создастся автоматически.

Сервис сохранит адрес отправителя из вашего аккаунта Яндекса. SMTP-параметры подставляются автоматически, редактировать их не нужно.

Частые проблемы

Создайте обработку

В левом меню откройте «Обработки» и нажмите «+».

processing-01.png

В списке типов источника выберите «lpgenerator.ru» и нажмите кнопку «Выбрать».

Источник «lpgenerator.ru»

Заявки из форм LP Generator начнут приходить на URL HTTP-источника. с параметрами формы, вставьте скрипт в плагин сайта и вызовите его после отправки формы.

Параметры HTTP

  1. Задайте настройки HTTP-запроса как на скриншоте.
    lp-http.png
  2. Добавьте параметры: name, phone, email, form_fields, form_info. При необходимости добавьте utm_source, utm_medium, utm_campaign, utm_content, utm_term, roistat.
    lp-parametres.png
  3. Нажмите «Сохранить».
  4. Откройте вкладку «Источник данных» и скопируйте «URL».
    lp-http-source.png

Плагин на сайте LP Generator

  1. Откройте настройки сайта.
    platformalp-04-2.png
  2. Добавьте новый плагин.
    platformalp-05-2.png
  3. Выберите тип «Произвольный код».
    platformalp-04.png
  4. Вставьте скрипт в поле «Произвольный код BODY» и замените ВСТАВЬТЕ_СКОПИРОВАННЫЙ_URL на скопированный «URL».
    platformalp-06.png
function webjack(name, phone, email, form_fields, form_info) {
    try {
        var wj_webhook = 'ВСТАВЬТЕ_СКОПИРОВАННЫЙ_URL';
        webjack_send_webhook(wj_webhook, name, phone, email, form_fields, form_info);
        swal("Спасибо!\nВаша заявка отправлена.\nВ ближайшее время мы с Вами свяжемся!", "", "success");
    } catch (err) {
        console.log(err);
    }
}

function webjack_send_webhook(wj_webhook, name, phone, email, form_fields, form_info) {
    try {
        var xhr = new XMLHttpRequest();
        var body =
            'name=' + encodeURIComponent(name) +
            '&phone=' + encodeURIComponent(phone) +
            '&email=' + encodeURIComponent(email) +
            '&form_fields=' + encodeURIComponent(JSON.stringify(form_fields)) +
            '&form_info=' + encodeURIComponent(form_info) +
            '&utm_source=' + webjack_get_url_parameter('utm_source') +
            '&utm_medium=' + webjack_get_url_parameter('utm_medium') +
            '&utm_campaign=' + webjack_get_url_parameter('utm_campaign') +
            '&utm_content=' + webjack_get_url_parameter('utm_content') +
            '&utm_term=' + webjack_get_url_parameter('utm_term') +
            '&roistat=' + webjack_get_cookie('roistat_visit');
        xhr.open("POST", wj_webhook, true);
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xhr.send(body);
    } catch (err) {
        console.log(err);
    }
}

function webjack_get_url_parameter(name) {
    try {
        name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
        var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
        var results = regex.exec(location.search);
        return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
    } catch (err) {
        console.log(err);
    }
}

function webjack_get_cookie(name) {
    try {
        var matches = document.cookie.match(new RegExp(
            "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
        ));
        return matches ? decodeURIComponent(matches[1]) : undefined;
    } catch (err) {
        console.log(err);
    }
}

Формы на сайте

  1. Откройте настройку формы.
    platformalp-07.png
  2. В действии после отправки выберите «Выполнение JavaScript кода».
    platformalp-08.png
  3. Вставьте вызов webjack(name, phone, email, fields, "");.
    platformalp-09.png
  4. Повторите для всех нужных форм и опубликуйте страницу.
    platformalp-10.png

Действие «Отправить e-mail через свой ящик»

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

Перейдите в обработке во вкладку "Действия" и нажмите на кнопку "Добавить действие"
wj2-action-create-01.png

Подключение

  1. В поле «Подключение» выберите ранее созданное подключение типа «Электронная почта», через которое будет отправляться письмо.

Адрес и получатели

  1. В поле «От (имя)» при необходимости укажите отображаемое имя отправителя, например «Отдел продаж». Сам email-адрес задаётся в подключении и в действии не меняется.
  2. В поле «Получатель» укажите один или несколько адресов. Чтобы подставить адрес из данных сценария, выберите переменную в панели справа и вставьте её в поле.
  3. При необходимости заполните «Копия», «Скрытая копия» и «Обратный адрес» - в каждом поле можно указать один или несколько адресов.

Тема и содержание

  1. В поле «Тема» задайте заголовок письма - текстом или с переменными из панели справа.
  2. В поле «Сообщение» соберите основной текст письма из текста и данных предыдущих шагов.
  3. Если нужна HTML-разметка, заполните «HTML-версия». Если поле пустое, получатели увидят только текст из «Сообщения».

Сохранение

  1. Нажмите «Сохранить».

Запустите обработку

  1. В обработку начнут поступать данные из настроенного источника.
  2. По очереди выполнятся все добавленные действия.
  3. Входящие данные, статус и история отобразятся в «Истории операций».

vk-ads-02.png