Способ 1. Настройка интеграции в Личном кабинете MANGO OFFICE

Порядок действий

Переход к настройкам интеграции

Вот, что Вам нужно сделать в Личном кабинете MANGO OFFICE, в разделе «Коллтрекинг»:
1) выберите пункт «Интеграции»;
2) в поле «Сайт» проверьте, правильно ли выбран виджет для подключения интеграции с Заявками с сайта;
3) нажмите на блок «Заявки с сайта».
Примечание. Если вы не видите блок с названием нужной вам интеграции, воспользуйтесь полем «Поиск по интеграциям». В этом поле введите название нужной вам интеграции, затем нажмите на название нужной вам интеграции. Подробнее о поиске…

Подключение формы

1) нажмите кнопку «Добавить форму»:

2) в поле «Укажите название формы» Вам нужно ввести название Вашей формы (например, форма на главной странице сайта). Используйте информативное название, по которому, в дальнейшем, при работе с отчетами коллтрекинга, можно будет легко понять назначение формы;
3) в поле «Селектор кнопки отправки формы» укажите селектор кнопки, размещенной в Вашей форме. Подробнее о селекторе и где его взять смотрите в тут;
4) настройте соответствие полей коллтрекинга и селекторов Вашей формы. В базе коллтрекинга есть 4 поля для сохранения данных формы: имя, email, телефон, комментарий. Их значения автоматически получаются от селекторов формы, размещенной на Вашем сайте. Настройка соответствия полей и селекторов формы необходима, чтобы коллтрекинг мог определять, в какое поле базы сохранять значение, введенное в определенное поле формы;

Чтобы настроить соответствие полей коллтрекинга и Вашей формы, выполните следующие действия:
а) в поле «Тип поля» выберите поле коллтрекинга;
б) скопируйте селектор поля формы из браузера и вставьте его в поле «Селектор поля» окна «Подключение формы»;
в) чтобы добавить еще одно поле, нажмите кнопку «Добавить поле», затем повторите действия а), б);
г) повторите действия а) — в) для всех полей Вашей формы.
Коллтрекинг поддерживает сохранение только 4 полей формы: имя, email, телефон, комментарий.

5) после того как Вы настроите соответствие всех полей формы, нажмите кнопку «Подключить»:

Интеграция «Заявки с сайта» подключена на Вашем коллтрекинге. Открыта страница «Заявки с сайта», на которой показана активная интеграция с Вашей формой:

Как на сайте найти селектор кнопки или поля

Обобщенно о селекторах и id-номерах элементов

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

Примечание. Поскольку дизайн сайта может поменяться, селектор элемента интерфейса тоже может поменяться.

При настройке интеграции коллтрекинга вместо селектора Вы можете указать уникальный ID-номер кнопки или поля. ID-номер элемента не меняется при изменении дизайна сайта.

Как получить селектор

Получить селектор кнопки или поля Вы можете при помощи браузера. В разных браузерах получение селекторы происходит по-разному.

Google Chrome

Чтобы определить селектор кнопки или поля, размещенного на форме, в браузере Google Chrome нужно:
1) наведите курсор на кнопку / поле, селектор которого хотите получить, и нажмите правую кнопку мыши. Будет открыто контекстное меню, в котором выберите пункт «Посмотреть код»:

2) открыта консоль браузера Google Chrome, в которой подсвечена строка с параметрами кнопки / поля (см. рисунок ниже). Наведите курсор на выделенную строку и нажмите правую кнопку мыши. Будет открыто контекстное меню, в котором выберите «Copy -> Copy selector»:

В результате будет скопирован селектор выбранного Вами ранее элемента (кнопки или поля). Теперь Вы можете вернуться к настройке соответствия полей и селекторов формы и вставить скопированный селектор в соответствующее поля настроек интеграции.

Mozilla Firefox

Чтобы определить селектор кнопки или поля, размещенного в форме, в браузере Mozilla Firefox нужно:
1) наведите курсор на кнопку / поле, селектор которого хотите получить, и нажмите правую кнопку мыши. Будет открыто контекстное меню, в котором выберите пункт «Исследовать элемент»:

2) открыта консоль браузера Mozilla Firefox, в которой подсвечена строка с параметрами кнопки / поля (см. рисунок ниже). Наведите курсор на выделенную строку и нажмите правую кнопку мыши. Будет открыто контекстное меню, в котором выберите «Копировать -> CSS-селектор»:

В результате будет скопирован селектор выбранного Вами ранее элемента (кнопки или поля). Теперь Вы можете вернуться к настройке соответствия полей и селекторов формы й и вставить скопированный селектор в соответствующее поля настроек интеграции.

Opera

Чтобы определить селектор кнопки или поля, размещенного на форме, в браузере Opera нужно:
1) наведите курсор на кнопку / поле, селектор которого хотите получить, и нажмите правую кнопку мыши. Будет открыто контекстное меню, в котором выберите пункт «Посмотреть код элемента»:

2) открыта консоль браузера Opera, в которой подсвечена строка с параметрами кнопки / поля (см. рисунок ниже). Наведите курсор на выделенную строку и нажмите правую кнопку мыши. Будет открыто контекстное меню, в котором выберите «Copy -> Copy selector»:

В результате будет скопирован селектор выбранного Вами ранее элемента (кнопки или поля). Теперь Вы можете вернуться к настройке соответствия полей и селекторов формы и вставить скопированный селектор в соответствующее поля настроек интеграции.