Web-to-Case

Руководство
Сложный

Функциональность Web-to-Case реализует возможность создания обращений в Creatio посредством заполнения необходимых полей формы, встроенной на сторонний сайт — лендинга.

Пакет ProductCore зависит от пакета WebForms, в котором и содержится функциональность Web-to-Case. Это означает, что лендинги могут использоваться во всех продуктах. Преднастроенная "коробочная" функциональность реализована в продуктах service enterprise, customer center, marketing и всех бандлах, включающих эти продукты.

Подробнее о лендингах можно узнать из документации соответствующих продуктов, например, из блока статей "Раздел Лендинги и web-формы" документации Marketing Creatio.

Настройку Web-to-Case можно произвести, воспользовавшись интерфейсом системы, но для внедрения полученного JavaScript-скрипта на сторонний сайт необходимы общие базовые навыки Web-разработчика.

Базовая функциональность Web-to-Case без использования программирования в Creatio (но используя небольшие доработки на стороннем сайте) позволяет настроить следующее:

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

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

Логика автоматического заполнения полей для обращения 

При регистрации обращения через Web-форму предлагаются для заполнения следующие поля: ФИО, Email, Телефон, Тема обращения. Значение поля Тема обращения будет передаваться в новое обращение.

По сочетанию полей ФИО, Email и Телефон в Creatio идентифицируется контакт. Поиск происходит следующим образом:

  1. Если существует контакт, у которого поля [ФИО], [Email] и [Телефон] совпадают с заполненными данными формы, то он подставляется в создаваемое обращение.
  2. Иначе, если есть контакт, у которого совпадают только поля [ФИО] и [Email], то он подставляется в создаваемое обращение.
  3. Иначе, если есть контакт, у которого совпадает только поле [Email], то он подставляется в создаваемое обращение.
  4. Иначе создается новый контакт, и у него заполняются поля [ФИО], [Email] и [Телефон]. Созданный контакт подставляется в регистрируемое обращение.

Если по одному правилу найдено несколько контактов, то в качестве контакта обращения будет взят первый найденный. Также автоматически заполнится дата регистрации обращения (колонка RegisteredOn) текущей датой и временем.

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

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

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

  1. Создать схему страницы, унаследованную от CaseGeneratedWebFormPageV2. Страница не должна быть замещающей.
  2. Добавить запись нового типа лендинга в таблицу LandingType и локализацию в таблицу SysLandingTypeLcz.
  3. Зарегистрировать стандартным образом типизированную страницу, созданную на первом шаге (значение типа — новое созданное).
  4. Если необходима предварительная обработка данных формы до сохранения записи в базе данных, то нужно создать класс, реализующий интерфейс IGeneratedWebFormPreProcessHandler. Этот класс представляет собой предварительный обработчик регистрации обращения. Также нужно реализовать метод Execute(). Этот метод — точка входа в обработчик. В нем реализуются все вспомогательные действия. В качестве примера можно взять схему WebFormCasePreProcessHandler.
  5. Если необходимо выполнить действия после сохранения обращения в базу данных, то нужно создать класс, реализующий интерфейс IGeneratedWebFormPostProcessHandler. Этот класс представляет собой предварительный обработчик регистрации обращения. Далее нужно реализовать метод Execute(), в котором выполнить необходимые действия.
  6. Если созданы обработчики регистрации обращения, то нужно зарегистрировать их в таблице WebFormProcessHandlers. В качестве примера регистрации можно взять уже существующую запись.
  7. Отредактировать шаблон скрипта, формирующего конфигурационный JavaScript-объект лендинга, и поместить в локализируемую строку ScriptTemplate созданной страницы. Аналогичный скрипт указать для всех используемых локализаций. Пример скрипта можно найти в схеме CaseGeneratedWebFormPageV2.
  8. Привязать все созданные данные к пакету.

Алгоритм создания Web-to-Case лендинга:

  1. Создать новую запись лендинга в Creatio.
  2. Создать посадочную страницу, в которой будет содержаться сгенерированный в системе код, связывающий форму лендинга и запись лендинга.
  3. Добавить посадочную страницу на сайт.

 

Создать Web-to-Case лендинг
Сложный

Пример. Создать Web-to-Case лендинг.

1. Создать новую запись лендинга в Creatio 

Чтобы создать новую запись лендинга, необходимо в разделе Лендинги и web-формы (Lending pages and web forms) выполнить действие Добавить (Add). В открывшейся странице нужно заполнить следующие поля:

  • [Название] ([Name]) — заголовок лендинга в Creatio.
  • [Домены сайта] ([Website domains]) — URL посадочной страницы.
  • [Состояние] ([Status]) — состояние лендинга.
  • [Адрес перехода] ([Redirection URL]) — URL страницы, на которую переходит клиент после регистрации на посадочной странице.
scr_create_landing.png

Поскольку из посадочной страницы при создании обращения можно получить только четыре поля ("Subject, "Email", "Name" и "Phone"), то для новой записи лендинга необходимо установить значения по умолчанию.

scr_def_values.png

Для применения изменений страницу нужно сохранить.

2. Создать посадочную страницу 

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

Для регистрации в Creatio данных, отправляемых через web-форму, в ее код необходимо добавить четыре поля (HTML-элемент <input>), определяющие обращение:

  • тема обращения;
  • Email контакта;
  • имя контакта;
  • телефон контакта

Для каждого поля нужно указать атрибуты name и id.

Чтобы при отправке данных формы в Creatio создавался новый объект Обращение, в HTML-страницу нужно добавить скрипт на языке JavaScript. Исходный код скрипта необходимо скопировать из поля ШАГ 2. Скопируйте код и настройте в нем соответствие полей (STEP 2. Copy the code and configure and map the fields) страницы редактирования лендинга.

Скрипт необходимо скопировать из уже сохраненного лендинга.

Скрипт содержит конфигурационный объект config, в котором определены следующие свойства:

  • fields — содержит объект со свойствами "Subject, "Email", "Name" и "Phone", значения которых должны совпадать с селекторами атрибутов id соответствующих полей формы.
  • landingId — содержит идентификатор лендинга в базе данных.
  • serviceUrl — содержит URL службы, по которому будут отправляться данные формы.
  • redirectUrl — содержит URL адреса перехода, указанного в поле [Адрес перехода] лендинга.
  • onSuccess — содержит функцию-обработчик успешного создания обращения. Необязательное свойство.
  • onError — содержит функцию-обработчик ошибки создания обращения. Необязательное свойство.

Конфигурационный объект config передается в качестве аргумента функции createObject(), которая должна выполняться при отправке формы.

Чтобы функция createObject() была вызвана при отправке формы, в тег формы HTML-страницы лендинга необходимо добавить атрибут onSubmit="createObject(); return false" .

Пример полного исходного кода посадочной страницы для регистрации обращений
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!--ШАГ 2-->
    <!--Эту часть необходимо скопировать из поля ШАГ 2 страницы редактирования лендинга-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://webtracking-v01.creatio.com/JS/track-cookies.js"></script>
    <script src="https://webtracking-v01.creatio.com/JS/create-object.js"></script>
    <script>
        /**
         * Replace the "css-selector" placeholders in the code below with the element selectors on your landing page.
         * You can use #id or any other CSS selector that will define the input field explicitly.
         * Example: "Email": "#MyEmailField".
         * If you don't have a field from the list below placed on your landing, leave the placeholder or remove the line.
         */
        var config = {
            fields: {
                "Subject": "#subject-field", // Case subject
                "Email": "#email-field", // Visitor's email
                "Name": "#name-field", // Visitor's name code
                "Phone": "#phone-field", // Visitor's phone number
            },
            landingId: "8ab71187-0428-4372-b81c-fd05b141a2e7",
            serviceUrl: "http://localhost/creatioservice710/0/ServiceModel/GeneratedObjectWebFormService.svc/SaveWebFormObjectData",
            redirectUrl: "http://creatio.com",
            onSuccess: function(response) {
                window.alert(response.resultMessage);
            },
            onError: function(response) {
                window.alert(response.resultMessage);
            }

        };
        /**
         * The function below creates a object from the submitted data.
         * Bind this function call to the "onSubmit" event of the form or any other elements events.
         * Example: <form class="mainForm" name="landingForm" onSubmit="createObject(); return false">
         */
        function createObject() {
            landing.createObjectFromLanding(config)
        }
    </script>
    <!--ШАГ 2-->
</head>
<body>
<h1>Landing web-page</h1>
<div>
    <h2>Case form</h2>
    <form class="mainForm" name="landingForm" onSubmit="createObject(); return false">
        Subject:<br>
        <input type="text" name="subject" id="subject-field"><br>
        Email:<br>
        <input type="text" name="Email" id="email-field"><br>
        Name:<br>
        <input type="text" name="Name" id="name-field"><br>
        Phone:<br>
        <input type="text" name="Phone" id="phone-field"><br><br>
        <input type="submit" value="Submit">
        </font>
    </form>
</div>
</body>
</html>

3. Добавить Web-страницу на сайт 

Обращение с посадочной страницы будет добавлено в Creatio только в том случае, если страница размещена на сайте, имя которого указано в поле Домены сайта лендинга. Если открыть страницу в браузере локально, то при создании обращения будет выведено пустое сообщение.

scr_localpage.png

Вывод пустого сообщения настроен в методе-обработчике onError() конфигурационного объекта.

Если разместить страницу на локальном сервере компьютера, обслуживающий зарезервированное доменное имя localhost (как указано в настройке лендинга), то скрипт добавления обращения с Web-страницы лендинга отработает корректно.

scr_localhost.png

Результат выполнения примера

В результате в системе будет автоматически создано обращение с указанными параметрами.

scr_case.png