Настройка формы редактирования битрикс: Карта сайта

Простая интеграция Битрикс24 с сайтом

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

Итак, приступим. Вся интеграция будут разбита на 2 этапа:
1 этап интеграции битрикс24 с сайтом — настройка Виджета и его элементов в битрикс24

2 этап интеграции битрикс24 с сайтом — установка виджета на сайт

Красткое содержание
 Настройка виджета для сайта и его элементов в битрикс24
   Настройка CRM формы (формы обратной связи) в битрикс24
   Настройка обратного звонка
   Настройка онлайн чата
   Настройка виджета для сайта
Интеграция битрикс24 с сайтом, установка виджета
Как работает интеграция битрикс24 и сайта на примере CRM-Формы

Подготовка к интеграции битрикс24 с сайтом

Подготовку к интеграции битрикс24 с сайтом разделим на несколько частей:

1. Настройка crm формы.
2. Настройка обратного звонка
3. Настройка онлайн чата. 
4. Настройка виджета для сайта

Настройка CRM формы (формы обратной связи) в битрикс24

Для настройки crm формы давайте перейдем  по пути CRM->Еще->CRM формы, как показано на рисунке 2. 

Рисунок 2 — Переход в меню «CRM формы»

В открывшемся меню мы увидим 3 предустановленные формы: «Обратный звонок», «Форма обратной связи», «Контактные данные». Для простой интеграции битрикс24 с сайтом подойдет и предустановленная форма «Форма обратной связи», вы можете использовать ее, но для тех, кому стандартной формы недостаточно мы создадим новую фому «Обращение с сайта» на основании предустановленной формы (обратите внимание, что предустановленные формы менять не стоит).

Нажимаем на кнопку «Меню» возле «Форма обратной связи» и нажмите «Копировать», как показано на рисунке 3. 

Рисунок 3 — Копирование формы обратной связи в битрикс24

После копирования у нас появится еще одна форма, которая называется «Копия Форма обратной связи». Жмем кнопку «Редактировать» возле появившейся формы и переходим к ее редактированию. Меняем название на «Обращение с сайта». Удаляем в форме все ненужные поля и оставляем только Имя, Телефон и Комментарий. Устанавливаем цвет фона формы красным — это нужно для того, чтобы при интеграции битрикс24 с сайтом наша форма выглядела гармонично и была представлена в цветовой гамме сайта. Результат представлен на рисунке 4. 

Рисунок 4 — Настройка формы обратной связи битрикс24

После проделанных действий не забудьте сохранить результат нажав на кнопку «Сохранить». Если вы все сделали правильно, то у вас появится новый раздел «Формы моей компании» в котором будет находиться наша форма «Обращение с сайта». На этом настройка формы завершена, переходим к следующему этапу интеграции битрикс24 с сайтом.

Настройка обратного звонка

Как бы это не было странно, но обратный звонок тоже находится в CRM формах, для его настройки давайте перейдем  по пути CRM->Еще->CRM формы, как мы делали это на предыдущем шаге. В этом разделе вы увидите CRM форму ОБРАТНЫЙ ЗВОНОК С НОМЕРА «НОМЕР БАЗОВОЙ СТАНЦИИ» как показано на рисунке 5. 

Рисунок 5 — ОБРАТНЫЙ ЗВОНОК С НОМЕРА «НОМЕР БАЗОВОЙ СТАНЦИИ»

Скопируем эту форму. Нажимаем на кнопку «Меню» возле «ОБРАТНЫЙ ЗВОНОК С НОМЕРА «НОМЕР БАЗОВОЙ СТАНЦИИ» и нажмите «Копировать», как показано на рисунке 6. 

Рисунок 6 — Копирование формы «Обратный звонок с номера «Номер базовой станции»»

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

Еще один важный момент, который я упустил: после того, как вы скопировали форму, форма изначально неактивна, чтобы ее активировать, нужно нажать на кнопку включить, как показано на рисунке 7.

Рисунок 7 — Включение CRM формы битрикс24

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

Настройка онлайн чата

Одной из задач качественной интеграция сайта с битрикс24 является возможность пользователя вашего сайта задать любой интересующий его вопрос не отрываясь от просмотра сайта. В решении этой задачи нам поможет онлайн чат. Онлайн чат находится в открытых линиях, по умолчанию один онлайн чат уже будет создан, поэтому детальную его настройку рассматривать не будем, но если у вас по каким-то причинам нет онлайн чата, то вам необходимо создать открытую линию при помощи кнопки : «Создать открытую линию» в Открытые линии->Список, нажать на «Онлайн чат», в открывшемся окне нажать «Подключить» и «Сохранить».

Настройка виджета для сайта

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

Для настройки инструмента «Виджет на сайт» вам необходимо пройти по пути CRM->Еще->Виджет на сайт, как показано на рисунке 8.

Рисунок 8 — Переход в инструмент «Виджет на сайт»

В этом разделе мы увидим предустановленный виджет на сайт, который и начнем редактировать, нажав на кнопку «Редактировать». Внешний вид формы редактирования виджета приведен на рисунке 9. 

Рисунок 9 — Вид формы редактирования «Виджет на сайт»

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

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

). Подробности на рисунке 10.

Рисунок 10 — Подключение открытой линии к виджету

2. В поле CRM-форма выберите название нашей CRM-Формы — «Обращение с сайта». Обязательно проконтролируйте, чтобы активности была включена (Вкл.), как показано на рисунке 11.

Рисунок 11 — Подключение CRM-Формы

3. В поле «Обратный звонок» выбрать «Обратный звонок с сайта» и проконтролируйте, чтобы блок был активен, как показано на рисунке 12.

Рисунок 12 — Подключение обратного звонка к виджету

После проделанных выше манипуляций не забудьте нажать кнопку «Сохранить». На этом подготовка к интеграции битрикс24 с сайтом завершена, далее приступим к самой интеграции.

Интеграция битрикс24 с сайтом, установка виджета

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

Рисунок 13 — Копирование кода виджета

После чего вам нужно войти в административную часть сайта, перейти по пути Настройки->Настройки продукта->Шаблоны сайтов, далее в списке шаблонов найти тот, кторый установлен у вас и нажать на кнопку изменить, как показано на рисунке 14. 

Рисунок 14 — Переход к редактированию шаблона

Следующим шагом необходимо вставить код виджета, который мы скопировали в битрикс24 на сайт перед тегом </body> — этот тег находится в самом низу шаблона, пример показан на рисунке 15.

Рисунок 15 — Пример вставки скрипта «Виджет на сайт»

После того, как вы вставили скрипт, не забудьте нажать на кнопку «Сохранить». На этом все, простая интеграция битрикс24 и сайта завершена, пример того, как выглядит вставленный виджет вы можете посмотреть на рисунках 16 и 17.

Рисунок 16 — Свернутый виджет

Рисунок 17 — Развернутый виджет

Как работает интеграция битрикс24 и сайта на примере CRM-Формы

Допустим пользователь зашел на сайт, нажал на виджет, выбрал CRM-форму и заполнил ее как показано на рисунке 18.
 

Рисунок 18 — Заполненная пользователем форма обратной связи

После того, как пользователь заполнит все поля формы и нажмет кнопку отправить, вы получите автоматически созданый лид в вашем битрикс24 (рисунок 19), в котором уже будут все данные, которые ввел пользователь, вам останется только продать ему товар или услугу. 

Рисунок 19 — Пример автоматически созданного лида

На этом все, надеюсь наша статья об интеграции битрикс24 с вашим сайтом была полезной, спасибо за прочтение. Всегда готовы помочь вам в интеграции битрикс24 с сайтом:)

Формы приема данных Битрикс24

tilda help center

Зарегистрируйтесь на сайте сервиса Битрикс24 или войдите в свой аккаунт.

После регистрации или авторизации вы окажетесь в вашем личном кабинете. В боковом меню нажмите на пункт «Еще» → «Маркет». В строке поиска укажите Tilda Publishing Forms и установите приложение или нажмите «Установить» из маркетплейса.

Важное замечание. С 1 января 2021 года Битрикс24 изменил условия для маркета приложений и установка расширений стала возможна только на коммерческих тарифах.

Если вы не нашли приложения Тильды в списке, значит оно недоступно в вашей стране. В таком случае нужно перейти к ручному подключению.

Откройте приложение Tilda Publishing Forms. Нажмите кнопку «Установить».

На экране появится всплывающее окно с перечисленными действиями, к которым приложению потребуется доступ. Дополнительно необходимо установить галочки у пунктов с условиями работы сервиса. Нажмите на кнопку «Установить».

Перейдите в настройки сайта на Tilda → откройте пункт «Формы» → Cервисы приёма данных из форм → Системы управления клиентами (CRM) → выберите сервис Bitrix24.

Откроется страница настройки интеграции. Нужно заполнить поле «Ваш поддомен на Bitrix24», нажать «Далее», и на следующей странице нажать «Добавить».

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

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

Сохраните внесенные изменения. Теперь вы можете подключить приемщик к формам на вашем сайте.

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

Важная особенность работы интеграции:
если подключением не пользовались в течение месяца, оно аннулируется. Чтобы этого не произошло, нужно отправлять данные с формы хотя бы один раз в месяц. Либо нужно заходить в настройки вашего сайта на Tilda → «Формы» → кликать на кнопку «Настройки» напротив подключенного Битрикса. Откроется страница с информацией о подключении. Если на этой странице вы увидите кнопку «Подключить», обязательно нажмите на нее. После этого интеграция будет вновь активирована.

Ручной способ подключения Битрикс24

Авторизуйтесь в личный кабинет, кликните на «Еще», и затем откройте пункт «Маркет».

В открывшемся окне кликните на кнопку «Добавить приложение».

Откроется окно для разработчиков. Выберите вариант «Другое».

В следующем окне выберите тип – «Локальное приложение».

Заполнителе форму следующими данными:

• Тип локального приложения: Серверное.
• Поставьте галочку для пункта «Используется только API»
• Важно! В поле «Путь вашего обработчика» укажите ссылку: https://tilda.cc/projects/forms/bitrix/
• Настройка прав: CRM и Пользователи.

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

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

Перейдите в Настройки сайта на Tilda → «Формы» → «Системы управления клиентами (CRM)» → выберите сервис Bitrix24.

Откроется форма настройки интеграции. Нужно нажать на кнопку «Ручное подключение».

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

Завершите настройку приемщика выбрав Состояние, Ответственного, Источник и Тему заявки.

Сохраните внесенные изменения. Теперь вы можете подключить приемщик к формам на вашем сайте.

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

Как изменить тему заявки

Поменять тему заявки можно в Настройках сайта → Формы → кнопка «Настройки» напротив сервиса приема данных. Внесите изменения в поле «Тема заявки».

В теме можно указывать свой текст, системные переменные и значения переменных в формате {{name}}, где name — латинское название переменной.

К сожалению, на данный момент такой возможности нет. 

Вы можете попробовать произвести подключение с помощью Webhook – http://help-ru.tilda.ws/formswebhook

Задайте переменные для каждого поля в форме: меню «Контент» > выберите поле > графа «Имя переменной». Переменные должны быть на латинице. Например: city, age, name и т.д.

Примите во внимание: имена полей должны совпадать с именами, указанными на стороне Битрикс24.

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

На стороне Битрикс24 можно выбрать режим работы. Он влияет на передачу новых заявок в секцию «Сделки» или в «Лиды».

В режиме «Простая CRM» новые заявки с сайта будут передаваться в секцию «Сделки». А в режиме «Классическая CRM» новые заявки с сайта будут передаваться в секцию «Лиды».

Вернуться к списку сервисов

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

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

начать работу

После недавнего обновления Битрикс24 теперь вы можете бесплатно создавать онлайн-формы для сайтов. Несмотря на то, что шаблоны форм поставляются в комплекте, вы можете создавать формы любого типа, начиная от контактов или онлайн-заказов и заканчивая приложениями и отправкой резюме. Формы полностью настраиваются, включая CSS, и не требуют знания HTML, PHP или JavaScript — предоставляется код для вставки на сайт или публичную страницу формы Битрикс24, если у вас нет сайта.

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

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

Зарегистрируйтесь сейчас или ознакомьтесь с нашими видео и руководством по CRM, чтобы быстро начать работу.

* Обратите внимание, что информация могла измениться с момента публикации. Актуальные цены и функции смотрите на странице цен Битрикс24.

Начните бесплатно

Основные характеристики

• Бесплатно для неограниченного числа пользователей
• Бесплатные неограниченные представления
• Бесплатное онлайн-хранилище объемом 5 ГБ
• Полностью настраиваемый
• Оптимизировано для мобильных устройств
• Уведомления
• Встраиваемая или публичная страница Битрикс24
• CRM подключен
• Облако или собственный хостинг (доступ с открытым исходным кодом)
• Бесплатные приложения для iOS и Android
• API и интеграции

Зарегистрируйтесь бесплатно

Полностью настраиваемые формы

• Создатель веб-формы
• Пользовательский CSS
• Обязательные поля
• Полевые правила
• Несколько типов полей
• Шаблоны и темы
• Соглашение об условиях обслуживания
• Каталог продукции
• Онлайн-заказы и платежи
• Контактная форма для сайта бесплатно
• Действия отправки сообщений (перенаправления)
• Узнать больше

Зарегистрируйтесь бесплатно

Встроенная CRM

• Создание интереса, контакта, компании, предложения или счета
• Автозаполнение CRM из полей формы
• Уведомления по электронной почте и мобильным устройствам
• Назначить нескольких ответственных пользователей
• Распространение форм среди сотрудников
• CRM-отчеты
• Маркетинг по электронной почте
• Телемаркетинг
• Google Analytics

Зарегистрируйтесь бесплатно

Открытые каналы

• Facebook
• Телеграмма
• Скайп
• Вайбер
• Живой чат
• Форма обратного звонка
• Узнать больше

Зарегистрируйтесь бесплатно

Больше, чем формы

• Документооборот
• Задачи и проекты
• Отдел кадров и Интранет
• Автоматизация продаж
• Почтовый сервер
• Онлайн-календарь

Зарегистрируйтесь бесплатно

Подробнее о Битрикс24 читайте на наших обучающих курсах.

У нас также есть отличный канал на YouTube, который освещает все аспекты Битрикс24, от продаж и планирования до документооборота и инструментов внутренней коммуникации компании.

Чтобы скачать версию Битрикс24 для собственного хостинга, которую можно установить на свой сервер и получить доступ к открытому исходному коду, посетите страницу Битрикс24 для собственного хостинга.

Обязательно ознакомьтесь с другими инструментами Битрикс24:

Формы

Бесплатный онлайн-конструктор форм запроса котировок

CRM

Бесплатная CRM для фотографов

Управление проектами

Бесплатное программное обеспечение для отслеживания проектов

Менеджмент

Бесплатные офисные инструменты для повышения производительности

10 000 000+ организаций выбрали Битрикс24

Изучите Битрикс24

Как создать новую веб-форму — Bitrix Site Manager

Как создать новую веб-форму — Bitrix Site Manager — Content Management & Portal Solutions

Чтобы создать новую веб-форму, выполните следующие действия:

1. Открыть список форм в административном разделе ( Услуги -> Веб-формы Управление формами ).
2. Щелкните Создать .
3. Введите новое имя веб-формы в Имя поля .
4. Введите код символа формы в поле Идентификатор . Этот код будет использоваться при настройке параметров отображения формы на общедоступном сайте раздел.
5. Укажите порядок сортировки. Чем выше значение, тем ниже форма будет располагаться в списке.
6. Укажите пункты меню для административного раздела сайта, обеспечивающие доступ к таблицам результатов. Также укажите права доступа групп пользователей к этой форме и другим.
7. Выберите язык интерфейса веб-формы.
8. Введите текст, который будет отображаться на кнопке отправки из результатов (например, Сохранить ).
   
   
9. Загрузить образ с локального компьютера. Он будет отображаться в публичном разделе сайта. рядом с названием формы и описанием.
10. Введите описание веб-формы в виде простого текста или HTML-кода.
11. Нажмите Применить , чтобы новые настройки вступили в силу.
12. Теперь вы можете определить шаблоны для:
    • Отображение формы;
    • Отображение результата;
    • Печать результата;
    • Изменение результата;
    • Отправка результатов по электронной почте (шаблоны электронной почты могут генерироваться автоматически).

    Ссылку Создать можно использовать для создания шаблона электронной почты.

    Вы можете перейти на страницу редактирования шаблона, нажав ссылку View Template .

13. У вас есть возможность регистрировать события заполнения и сохранения формы в модуле статистики. Кроме того, ежедневно отслеживается динамика заполнения форм. Укажите идентификаторы типов событий для модуля статистики в форме настройки.
    
    
14. Определить права доступа групп пользователей к этой форме. Вы можете указать следующие права доступа типы:
    • Доступ запрещен;
    • Заполнение форм;
    • Работа с результатом по его состоянию;
    • Работа со всеми результатами в соответствии с их состоянием;
    • Просмотр параметров формы;
    • Полный доступ.