Создание и настройка лендинга

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

Функциональность лендингов позволяет вам настроить автоматическое создание записей в объектах системы, которые потом могут быть использованы при ведении продаж. Например, в BPMSoft возможна регистрация контакта, лида или участника мероприятия после того, как пользователь введет данные на вашей посадочной странице. Лендинг может содержать в себе страницу покупки товара, форму регистрации пользователя, функциональность, позволяющую клиентам подписаться на ваши специальные предложения, и многое другое.

Интеграция BPMSoft с посадочной страницей (лендингом) предполагает следующие этапы:

1. Создание лендинга.
2. Подключение лендинга к BPMSoft и сопоставление полей страницы лида и формы необходимого лендинга.

Создание лендинга

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

Примеры лендингов для разных типов клиентов:

• Форма ввода email — адреса для подписки на новости или рассылки - для клиентов, которые впервые зашли на сайт;
• Контактная форма — для клиентов, заинтересованных в продуктах или услугах вашей компании. Например, оставить данные для того, чтобы ваш менеджер мог перезвонить клиенту;
• Полная веб-форма — для клиентов, готовых оформить заявку или заказать услуги.

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

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

Пользовательский интерфейс лендинга

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

Хороший лендинг:

• Содержит УТП (уникальное торговое предложение);
• Наполнен продающим текстом с призывом к действию и снятием возражений;
• Показывает ценность продукта;
• Имеет логичную и простую структуру;
• Рассказывает о ценовой политике;
• Информирует об обработке персональных данных.

Поля лендинга

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

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

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

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

Призыв к действию и переадресация

Разместите на лендинге кнопку с ясным призывом к действию, например, «Купить», «Подписаться» или «Записаться на демонстрацию». Эта кнопка должна вести клиента на соответствующую страницу, обеспечивая правильную переадресацию после ее нажатия.

Подключение лендинга к BPMSoft

После создания лендинга, необходимо выполнить следующие шаги:

1. Создать новую запись в разделе «Лендинги и web-формы».
2. Настроить страницу переадресации клиентов.
3. Изменить уникальный HTML-код.
4. Настроить передачу стандартных полей.
5. Настроить передачу справочных и нестандартных полей.
6. Добавить уникальный HTML-код в код лендинга.
7. Настроить автоматическое заполнение полей лида (или другого объекта системы), которые не представлены в веб-форме.

Создать новую запись в раздел «Лендинги и web-формы»

1. В разделе «Лендинги и web-формы» нажмите кнопку «Добавить» и выберите форму объекта, который требуется зарегистрировать в BPMSoft, например, форму регистрации лида.

Рисунок 1 — Добавление нового лендинга

2. На странице заполните поля:
• «Название» — название лендинга в системе;
• «Домены сайта» — URL посадочной страницы;

Рисунок 2 — Пример заполнения страницы лендинга

• «Описание» — подробная информация о лендинге (заполняется опционально);
• «Создавать контакт» —признак, при котором после заполнения клиентом формы на лендинге в BPMSoft автоматически зарегистрируется не только лид, но и контакт;
• «Адрес перехода» — URL страницы, на которую переходит клиент после регистрации на посадочной странице.

3. Нажмите кнопку «Сохранить».

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

Клиенты могут быть направлены на страницу переадресации после выполнения какого-либо действия на вашем лендинге. Например, заполнив веб-форму посетитель будет перенаправляться на страницу благодарности. Для этого на вкладке «Настройка лендинга» в поле «Адрес перехода» разместите ссылку страницы переадресации, например, http://site.ru/submit/thankpage. В HTML-коде, который встраивается на вашу посадочную страницу, будет использоваться указанный адрес следующим образом:

Изменение уникального HTML-кода

Для корректного заполнения полей лида, созданного на посадочной странице, требуется изменить HTML-код и внедрить его в структуру лендинга.

Рисунок 3 — Сгенерированный уникальный HTML-код для интеграции с лендингом

Скрипт track-cookies.js в HTML-коде предназначен для управления cookies (bpmRef, bpmHref, bpmTrackingId, BPMSESSIONID), которые отслеживают пользовательскую навигацию, источники переходов и сессии при открытии страницы лендинга. Адрес скрипта задается в системной настройке «Url скрипта сбора данных по хостингу» (HostingDataCollectionScriptUrl). Значение по умолчанию:

 <script src="https://files.cloudbpm.ru/Delivery/js/track-cookies.js"></script>

Скрипт create-object.js является основным компонентом для обработки формы на лендинге и выполняет следующие задачи:

• Сбор данных из полей веб-формы лендинга;
• Форматирование собранных данных в нужный формат;
• Отправка данных на сервер, указанный в системной настройке «URL сервиса приёма данных со страниц лендингов» (ServiceUrl), для создания объекта (например, лида или контакта).

Адрес скрипта create-object.js задается в системной настройке «URL api создания объектов» (ApiUrl). Значение по умолчанию:

<script src="https://files.cloudbpm.ru/Delivery/js/create-object.js"></script>

Блок fields в HTML-коде содержит параметры, которые автоматически заполняются после регистрации клиента. В этом блоке необходимо задать соответствие между полями веб-формы и полями лида. Пример настройки приведен ниже.

               fields: {
"Name": "[ИМЯ CSS-СЕЛЕКТОРА]", // Имя посетителя, отправляющего форму
"Email": "[ИМЯ CSS-СЕЛЕКТОРА]", // Электронная почта посетителя
"Zip": "[ИМЯ CSS-СЕЛЕКТОРА]", // Почтовый индекс посетителя
"MobilePhone": "[ИМЯ CSS-СЕЛЕКТОРА]", // Номер телефона посетителя
"Company": "[ИМЯ CSS-СЕЛЕКТОРА]", // Название компании (для бизнес-посадочных страниц)
"Industry": "[ИМЯ CSS-СЕЛЕКТОРА]", // Отрасль компании (для бизнес-посадочных страниц)
"FullJobTitle": "[ИМЯ CSS-СЕЛЕКТОРА]", // Название должности посетителя (для бизнес-страниц)
"UseEmail": "[ИМЯ CSS-СЕЛЕКТОРА]" // Логическое поле: 'true' равнозначно согласию посетителя на получение электронной почты.
}
            

При регистрации лида должна быть контактная информация о нем. Для этого HTML-код на посадочной странице должен содержать как минимум одно поле из блока contactFields. Пример представлен ниже.

               fcontactFields: {
        "FullName": "[ИМЯ CSS-СЕЛЕКТОРА]", // Имя контакта
        "Phone": "[ИМЯ CSS-СЕЛЕКТОРА]", // Мобильный телефон контакта
        "Email": "[ИМЯ CSS-СЕЛЕКТОРА]" // Электронная почта контакта
}
            

Пример HTML-кода страницы лендинга с заданным соответствием между полями веб-формы и полями лида представлен ниже.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Регистрация</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .form-container {
            background-color: #fff;
            padding: 2rem;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            max-width: 450px;
            width: 95%;
            height: 100%;
        }
        h2 {
            text-align: center;
        }
        .form-group {
            margin-bottom: 1rem;
        }
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
        }
        .form-group input {
            width: 100%;
            padding: 0.5rem;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-sizing: border-box;
        }
        .form-group button {
            width: 100%;
            padding: 0.5rem;
            background-color: #5cb85c;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
        }
        .form-group button:hover {
            background-color: #4cae4c;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <h2>Регистрация</h2>
        <form action="/webinar-BPMSoft" method="post" id="ts-form-universal-form" accept-charset="UTF-8" onSubmit="createObject1(); return false">
            <div class="form-group">
                <label for="name">Имя:</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="email">Электронная почта:</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="password">Телефон:</label>
                <input type="phone" id="phone" name="phone" required>
            </div>
            <div class="form-group">
                <label for="company">Название компании:</label>
                <input type="text" id="company" name="company" required>
            </div>
            <div class="form-group">
                <label for="fullJob">Должность посетителя:</label>
                <input type="text" id="fullJob" name="fullJob" required>
            </div>
            <div class="form-group">
                <label for="employeesNumber">Количество сотрудников:</label>
                <input type="text" id="employeesNumber" name="employeesNumber" required>
            </div>
            <div class="form-group">
                <label for="webSite">Web:</label>
                <input type="text" id="webSite" name="webSite" required>
            </div>
            <div class="form-group">
                <label for="country">Страна:</label>
                <input type="text" id="country" name="country" required>
            </div>
            <div class="form-group">
                <label for="country">Дата принятия решения:</label>
                <input type="date" id="dateNext" name="dateNext" required>
            </div>
            <div class="form-group">
                <input type="hidden" id="landingIdForm" name="landingIdForm"/>
            </div>
            <div class="form-group">
                <input type="hidden" id="serviceUrlForm" name="serviceUrlForm"/>
            </div>
            <div class="form-group">
                <button type="submit">Зарегистрироваться</button>
            </div>
        </form>
    </div>
 
   
<!--
 Последующий код скопирован из поля Шаг 2 при создании лендинга в BPMSoft. В коде заменены значения в блоках fields и contactFields.
-->
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://files.cloudbpm.ru/Delivery/js/track-cookies.js"></script>
    <script src="https://files.cloudbpm.ru/Delivery/js/create-object.js"></script>
    <script>
 
    /**
    * Замените выражение в кавычках "css-selector" в коде ниже значением селектора элемента на Вашей лендинговой странице.
    * Вы можете использовать #id или любой другой CSS селектор, который будет точно определять поле ввода на Вашей лендинговой странице.
    * Пример: "Email": "#MyEmailField".
    * Если Ваша лендинговая страница не содержит одного или нескольких полей из приведенных ниже – оставьте строку без изменений или удалите полностью.
    */
    var config = {
        fields: {
            "Name": "#name", // Имя посетителя, заполнившего форму
            "Email": "#email", // Email посетителя
            "MobilePhone": "#phone", // Телефон посетителя
            "Company": "#company", // Название компании
            "Job": "#fullJob", // Должность посетителя
            "EmployeesNumber": "#employeesNumber", // Количество сотрудников
            "Country": "#country", // Страна
            "Website": "#webSite", // Web
            "DecisionDate": "#dateNext" // Дата принятия решения
        },
        contactFields: {
            "FullName": "#name", // Name of a contact
            "Phone": "#phone", // Contact's mobile phone
            "Email": "#email" // Contact's email
        },
        customFields: {"WebFormId":"3a8762fa-82c3-44ed-85ba-69a02e64d629"},
        landingId: "e6658ad3-c2f9-49ba-be58-b11b3eeb9e0a",
        serviceUrl: "http://localhost/ServiceModel/GeneratedObjectWebFormService.svc/SaveWebFormObjectData",
    };
   
    /**
    * Функция ниже создает объект из введенных данных.
    * Привяжите вызов этой функции к событию "onSubmit" формы или любому другому элементу события.
    * Пример: <form class="mainForm" name="landingForm" onSubmit="createObject(); return false">
    */
    function createObject1() {
        landing.createObjectFromLanding(config);
    }
 
    /**
    * Функция ниже инициализирует лендинг из параметров URL.
    */
    function initLanding() {
        landing.initLanding(config);
    }  
    jQuery(document).ready(initLanding);
    </script>
</body>
</html>
			  

Настройка передачи стандартных полей

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

Соответствие стандартных полей в HTML-коде и полей на странице лида:

• "Name" — «ФИО контакта»;
• "Email" — «Email»;
• "Zip" — «Индекс»;
• "MobilePhone" — «Мобильный телефон»;
• "Company" — «Название контрагента»;
• "Industry" — «Отрасль»;
• "FullJobTitle" — «Должность»;
• "UseEmail" — чек-бокс для подтверждения клиентом согласия на получение маркетинговых материалов.

Неиспользуемые в веб-форме поля лендинга можно удалить из HTML-кода при настройке.

Настройка соответствия полей веб-формы и страницы лида

Для передачи информации на страницу лида замените выражение "[ИМЯ CSS-СЕЛЕКТОРА]" на id или class соответствующего поля в форме лендинга:

1. Скопируйте уникальный HTML-код в текстовый редактор.
2. Вставьте название селектора, который содержится на лендинге, вместо выражения "[ИМЯ CSS-СЕЛЕКТОРА]" в полученном коде.

Рассмотрим настройку заполнения полей «ФИО», «Телефон», «Email» в браузере Chrome.

1. Откройте веб-страницу лендинга и отобразите исходный код страницы клавишей F12.

Рисунок 4 — Отображение посадочной страницы с исходным кодом

2. В области исходного кода страницы нажмите на соответствующую иконку.

Рисунок 5 — Выбор элемента кода на странице

3. Наведите курсор на поле «Телефон или email» посадочной страницы.

Рисунок 6 — Выбор элемента для просмотра кода

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

Рисунок 7 — Выделенный фрагмент кода, соответствующий выбранному полю «ФИО»

4. Скопируйте значение параметра "id" исходного кода лендинга.

Рисунок 8 — Копирование значения параметра “id” исходного кода посадочной страницы

5. Замените "[ИМЯ CSS-СЕЛЕКТОРА]" атрибута «Name» в уникальном коде:

6. Таким же методом замените "[ИМЯ CSS-СЕЛЕКТОРА]" других полей, используемых в форме.

Рекомендации по настройке соответствия полей

• Одно поле веб-формы может быть сопоставлено с несколькими полями в BPMSoft. Например, данные, введенные клиентом в поле «ФИО», могут передаваться в поля «ФИО» (контактные данные) и «Название» (данные контрагента) на странице лида в BPMSoft.
• Каждое поле лида в BPMSoft должно быть связано только с одним полем веб-формы. В противном случае данные из одного поля веб-формы будут перезаписываться значениями из другого поля на странице лида.
• Сопоставляемые поля формы и страницы лида должны иметь одинаковый тип и формат. Если клиент введет в справочное поле данные другого формата, они все равно будут заполнены. Например, если поле "Страна" является текстовым и клиент введет значение, соответствующее справочнику стран в системе, это значение будет корректно сохранено в поле «Страна» на странице лида. Дополнительно, если поля «Страна», «Область» или «Город» не найдены в системе, введенные значения будут сохранены в текстовом формате в блоке «Требует проверки».
• Для справочных полей рекомендуется передавать уникальный код, поскольку название не всегда является уникальным идентификатором записи.
• Для справочных полей можно использовать радиокнопки или выпадающие списки при взаимодействии пользователя с системой, сохраняя в значениях id объектов. Подробнее: Настроить передачу справочных и нестандартных полей.
• При заполнении полей даты и времени (тип данных DATETIME) необходимо использовать формат передачи данных с указанием часового пояса. Например, в часовом поясе UTC-1, формат будет 19/11/2023 12:50:00 AM -01:00, а в часовом поясе UTC — 19/11/2023 12:50:00 AM +00:00.

Настройка передачи справочных и нестандартных полей

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

Приведенные ниже настройки выполняются администратором веб-сайта и описаны на примере настройки регистрации лида.

Настройка передачи данных, выбранных с помощью радиокнопки

Шаги настройки передачи данных из радиокнопки:

1. Добавьте в html-код лендинга скрытое поле. Значение id данного поля может быть произвольным:

<input type="hidden" id=" idOfButton" />

2. В блоке "fields" кода лендинга в системе настройте соответствие полей между нужным полем лида и созданным скрытым полем:

"UsrField": "#idOfButton"

3. Значение из радиокнопки нужно передать в ранее созданное скрытое поле. Далее вставьте выражение, содержащее это значение, в код лендинга перед фрагментом, вызывающим функцию создания лида — createObject:

var idOfButton = $('input»name=name_of_your_button»:checked').val();

4. Сохраните изменения.

Настройка передачи значений, выбранных из выпадающего списка

Шаги настройки передачи данных из выпадающего списка:

1. Добавьте в html-код лендинга скрытое поле. Значение id данного поля может быть произвольным:

<input type="hidden" id="fieldId" />

2. В блоке "fields" кода лендинга в BPMSoft настройте соответствие полей между нужным полем лида и созданным скрытым полем:

"UsrField": "#fieldId"

3. Необходимо определить значение, которое было выбрано из выпадающего списка, и передать это значение в ранее созданное скрытое поле. Далее вставьте выражение, содержащее это значение, в код лендинга перед фрагментом, вызывающим функцию создания лида — createObject:

var fieldId = $("#name_of_dropdown option:selected").text();
$("#fieldId").val(fieldId);

4. Сохраните изменения.

По завершении настройки данные, выбранные пользователем из выпадающего списка или с помощью радиокнопки, будут переданы на страницу лида в BPMSoft.

Добавление уникального HTML-кода в код лендинга

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

Выполните следующие шаги:

1. Скопируйте HTML-код, который ранее был отредактирован в текстовом редакторе.
2. Встройте исходный код на посадочную страницу:
• Откройте папку лендинга на сервере;
• Откройте лендинг в любом текстовом редакторе;
• Добавьте уникальный HTML-код в исходный код посадочной страницы, перед закрывающим тегом </body>;

Рисунок 9 — Внедрение уникального HTML-кода в исходный код посадочной страницы

• Сохраните изменения.

В случае, если лендинг сделан на основе конструктора:

1. Разместите на странице блок с HTML-кодом.
2. Вставьте уникальный HTML-код в исходный код посадочной страницы.

Рисунок 10 — Внедрение HTML-кода в лендинг

3. Для добавления события, запускающего функцию createObject(), необходимо использовать код: onSubmit=”createObject(); return false”. Размещение в коде лендинга:
• В коде лендинга перейти в часть «form action»:

<span class="registration"> Отправить </span>

<form action="/webinar-BPMSoft-7-6" method="post" id="ts-form-universal-form" accept-charset="UTF-8">

• Добавьте в открывающий тег <form> код OnSubmit=”createObject(); return false”.
  Пример реализации:

<span class="registration"> Отправить </span>

<form action="/webinar-BPMSoft" method="post" id="ts-form-universal-form" accept-charset="UTF-8" onSubmit="createObject(); return false">

• Сохраните изменения.

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

Дополнительные настройки лендинга

Автозаполнение полей записей, полученных с лендинга

С помощью BPMSoft можно автоматически получать определенные поля с лендинга и добавлять их на страницу записи. Рассмотрим пример автоматического заполнения полей на примере объекта «Лид».

Для объекта можно настроить предустановленные значения для полей «Тип потребности» и «Зрелость потребности». Например, можно автоматически связать регистрационную форму для получения специальных предложений в сфере компьютерной техники с категорией «Компьютерная техника». Веб-форму, предназначенную клиентам, проявившим готовность или интерес совершить покупку, можно ассоциировать со степенью зрелости потребности «Интерес проявлен» или «Готов к сделке».

Настроить предварительное заполнение полей информацией можно в разделе «Значения по умолчанию». Можно настроить предзаполнение и для полей, по которым установлено соответствие. В таком случае предустановленное значение отобразится на странице, если клиент не заполнил соответствующее поле на форме лендинга.

Для активации автоматического заполнения поля лида:

1. В разделе «Лендинги и веб-формы» на странице записи нужного лендинга откройте вкладку «Значения по умолчанию» и нажмите кнопку  на детали «Значения полей лида по умолчанию».

Рисунок 11 — Создание записи на детали

2. Выберите из выпадающего списка поле, которое необходимо заполнять автоматически.

Рисунок 12 — Выбор заполняемого поля

3. Заполните поле «Значение» информацией, которая будет отображена в выбранном поле лида.
4. Сохраните изменения.

Рисунок 13 — Сохранение настроек

Таким образом, после регистрации клиента на посадочной странице автоматически заполнится поле «Тип потребности» на странице созданного лида.

Рисунок 14 — Отображение заполненного поля на странице лида

Предварительное заполнение веб-формы лендинга данными из BPMSoft

По умолчанию на странице вашего лендинга настроена веб-форма, в которой клиенты могут указать свои контактные данные (имя, email, телефон и пр.). Эти данные передаются в BPMSoft и формируют базу клиентов.

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

Принцип работы предварительного заполнения веб-формы лендинга

В BPMSoft есть возможность автоматического заполнения веб-формы на посадочной странице для имеющейся базы контактов. Для этого внесите изменения в URL посадочной страницы, которая отправляется в email-рассылке. Необходимо включить специальный макрос в URL, вместо которого, при отправке письма, будет подставляться значение соответствующего поля для каждого отдельного контакта. При открытии страницы с этого URL поля веб-формы будут автоматически заполнены информацией о контакте, которому адресовано письмо.

Возможность передавать информацию в поля веб-формы распространяется не только на основные объекты BPMSoft, но и на связанные с ними. Например, такие данные как адрес и ИНН контрагента, связанного с определенным контактом, также могут быть предварительно заполнены.

Настройка предварительного заполнения веб-формы лендинга

Настроить предварительное заполнение веб-формы возможно при создании email-рассылки в процессе добавления в тело письма URL на лендинг.

Для выполнения задачи:

1. Создайте новую запись в разделе «Email»: заполните обязательные поля на странице рассылки (название рассылки, тему, имя и email отправителя), далее выберите существующий шаблон сообщения или создайте новый. Подробнее: Cоздать массовую рассылку, Cоздать триггерное письмо.
2. Откройте шаблон рассылки по кнопке «Редактировать».
3. На шаблоне выберите элемент, в который будет добавлена ссылка на лендинг и нажмите кнопку  панели инструментов.
4. В появившимся окне введите URL лендинга с веб-формой, которая будет заполняться. В конец URL добавьте параметры для предзаполнения веб-формы в следующем формате: ?Name=[ #Адресат.ФИО# ]&MobilePhone=[ #Contact.MobilePhone# ], где «Name» и «MobilePhone» — названия полей веб-формы на сайте, содержащих ФИО контакта и его мобильный телефон. Значения [ #Адресат.ФИО# ] и [ #Contact.MobilePhone# ] — макросы, добавляемые в тело письма. Подробнее: Персонализировать контент с помощью макросов.

5. Нажмите кнопку «ОК». В редактируемом элементе шаблона сформируется ссылка на лендинг с веб-формой.
6. Сохраните измененный шаблон письма, затем созданную email-рассылку.

Таким образом, при переходе получателем по ссылке из письма, отобразится веб-форма лендинга, в полях «ФИО» и «Мобильный телефон» которой будут предзаполнены данные из BPMSoft.

Настройка внешнего адреса BPMSoft для генерации HTML-кода лендинга

При работе с on-site версией BPMSoft может возникнуть необходимость настроить систему для корректного формирования HTML на лендинговой странице.

Такая настройка требуется в случае, когда с учетом требований безопасности URL, отображаемый в браузере пользователя, отличается от URL, используемого для внешнего доступа к BPMSoft. Примером такой ситуации может быть блокировка адреса с помощью брандмауэра (firewall).

Для настройки выполните следующие шаги:

1. Откройте дизайнер системы и перейдите в раздел «Системные настройки».
2. Откройте настройку «URL сервиса приёма данных со страниц лендингов».
3. Введите в поле «Значение по умолчанию» внешний адрес вашего приложения BPMSoft, например, http://service.bpmsoft.ru.
4. Сохраните внесенные изменения.

После этого в HTML-коде на вашей лендинговой странице будет использоваться правильный адрес для активации веб-сервиса, генерирующего новые объекты (например, лиды).

Рекомендуем изучить

Отслеживание источника лида