Как создать страницу битрикс 24

Интеграция Битрикс24 с сайтом с помощью виджета и CRM-формы

Мастер-класс: как поставить Виджет и CRM-форму из Битрикс24 на свой сайт.

Вам может быть интересно:

Разработчики сервиса предпринимают серьезные усилия в направлении интеграции Битрикс24 с различными системами. В этой статье мы рассмотрим возможность интеграции корпоративного портала с сайтом компании, покажем, как можно своими руками настроить генерацию лидов с помощью связки Б24+Сайт. Итак вперед. У нас есть облачный Битрикс24 и тестовый сайт:

На многих сайтах вы встречали популярный виджет “Обратный звонок”. Это телефонного трубка, которая, либо вибрирует, либо мигает, чтобы привлечь внимание. Аналогичный элемент вы можете установить на своём сайте с помощью Битрикс24, не прибегая к услугам программистов.

Технология установки виджета состоит из трех этапов:

первый этап — настройка формы, которая вызывается виджетом;
настройка самого виджета;
установка виджета на сайте.

Первый этап.

Откройте в Битрикс24 раздел CRM-формы:

Откроется окно, в котором вы увидите три предустановленные формы “Обратный звонок”, “Форма обратной связи», “Контактные данные”:

Здесь вы можете использовать предустановленную форму или создать новую форму. Что следует знать для дальнейшей работы. Изменять предустановленные формы нельзя! Если вам требуется форма, отличная от штатной, то нужно обязательно создать новую форму. Но можно поступить хитрее. Открыть штатную форму и на её основе создать новую. Что мы с вами и сделаем.

Нажмите кнопку Просмотреть возле формы Обратный звонок с номера «Номер базовой станции».

В открывшемся окне сразу нажмите кнопку внизу экрана Создать на основании:

Теперь можно перейти к редактированию формы. Измените название, заголовок и текст в самой форме, как приведено ниже. Добавим еще поле Имя из сущности Лид. Для этого откройте раздел Лид и щелкните по полю Имя:

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

Не забудьте в поле Ответственный указать, кто будет отвечать за новый лид и за обратный звонок клиенту:

Откройте раздел Дополнительно. В нем скрыто много полезных настроек для нашей формы, с помощью которых можно задать правила заполнения полей лида и задавать метрики для оценки рекламных кампаний маркетологами:

Сохраните свою новую форму и увидите её в списке. Не забудьте её включить:

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

Второй этап.

Создадим виджет и прикрепим к нему нашу новую форму обратного звонка. Для этого зайдите в CRM и в меню выберите Виджет на сайт.

У вас откроется окно с предустановленным одним виджетом. В этом виджете объединены сразу несколько каналов для поступления лидов:

Открытые линии (для связи с клиентами в соцсетях);
Форма обратной связи (для получения запросов от клиентов);
Обратный звонок.

Но нам требуется создать виджет только для заказа обратного телефонного звонка. Поступим следующим образом. Выберите Создать виджет.

Введите название виджета, например, Заказать звонок. Отключите ненужные в данный момент каналы — открытая линия и CRM-форма и выберите созданную форму Заказать обратный звонок:

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

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

Третий этап.

Чтобы разместить виджет на сайте достаточно в коде гипертекстовой странице вставить скрипт, который сгенерировался в ходе нашей работы. Но мы рассмотрим, как разместить виджет на сайте, чтобы он был сразу на всех страницах. В качестве примера используем тестовый сайт на CMS 1С-Битрикс. Нажмите кнопку Код на сайт:

В открывшемся окне нажмите Скопировать в Буфер.

Далее переходим на наш тестовый сайт и входим в режим администрирования. Здесь последовательно выбираем разделы Настройки — Настройки продукта — Сайты — Шаблоны сайтов. У используемого шаблона выбираем Изменить:

В коде шаблона переходим в самый низ и вставляем наш скрипт перед закрывающимся тегом :

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

При нажатии на виджет открывается созданная нами форма.

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

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

Вам может быть интересно:

Как создать свой сайт в «Битрикс24»

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

Именно эта предпосылка и привела к появлению CRM-систем, которые позволяют организовать единое пространство для работы сотрудников организации для повышения их эффективности, а также компании в целом.

Не является исключением и площадка «Битрикс24», положительно себя зарекомендовавшая среди многих ее пользователей.

Зачем нужно создавать свой сайт на «Битрикс24»

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

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

Таким образом, создав версию сайта на данной платформе, Вы сможете уже представить ее потенциальному покупателю. Также будет возможность его быстро переделать (например, изменить условия акции), находясь непосредственно в личном кабинете. А еще станет возможным подключение быстронастраиваемой контекстной рекламы в поисковых системах «Яндекс» или «Google» с целью первичного тестирования и возможной доработки или получения первых лидов и заявок, которые будут сразу отображаться в системе.

Согласитесь, что это вполне удобно.

Создание своей странички в «Битрикс24»

Заходим на ресурс (ссылка на ресурс: https://www.bitrix24.ru), авторизовываемся (если еще нет аккаунта, соответственно, проходим быструю и легкую регистрацию), попадаем в личный кабинет. Далее жмем на вкладку «сайты» или же выбираем данный раздел во всплывающем окне с подсказками, где будет блок по принципу «С чего Вы хотите начать?» (если заходим в первый раз).

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

Возьмем, к примеру, шаблон на тему «Спорт».

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

Попадаем в интерфейс редактирования.

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

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

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

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

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

Функция добавления новых позиций представлена в виде заметной кнопки «+ добавить блок».

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

Добавляется блок путем обычного нажатия левой кнопкой мыши (ЛКМ) на выбранном элементе.

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

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

Кнопка, ведущая на другую страницу. Ее редактирование происходит достаточно легко. Следует на нее нажать, откроется меню со свойствами (справа), где останется ее отредактировать и прописать путь-ссылку.

Редактирование CRM-формы позволяет сразу подобрать то действие и отображение, которое будет наиболее выгодным с точки зрения вашей CRM-системы. Выбираем блок, жмем редактировать, видим поле «СRM-форма» и выбираем необходимое.

Этот раздел позволяет производить следующие изменения:

прописать адрес страницы и изменить отображение в социальных сетях;

добавить мета-теги, помогающие продвинуть сайт в органической выдаче, изменить фон страницы, настроить отображение страницы (при поставленной галочке, редактируемый сайт будет восприниматься, как отдельная страничка (лендинг)), подключение аналитики «Яндекс.Метрика» и «Google Analytics» (достаточно сделать активным и в появившемся поле ввести ID счетчика), индексация в поисковых системах (после того, как сайт готов, не забудьте напротив поставить галочку!);

пользовательский html-код и css позволяет добавить свой код (например, инструмент пиксель, «Google Tag Manager» и т. д.), а также настроить общий стиль всем страницам сайта.

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

Как сделать несколько страниц сайта и связать их между собой

Процедура так же, как и редактирование или изменение содержимых блоков, легкая и интуитивно понятная. Находим страницу, ждем кнопку «действия» и в выпадающем списке выбираем «создать копию страницу». Также можно создать новую страницу. Связь между ними, можно осуществить следующим образом – в тех местах, где должен произойти переход на новую страницу (например, в меню главной страницы) прописать путь, ведущий именно на нее.

Как произвести настройку сайта

Заходим в главное меню, где расположен наш веб-ресурс (вкладка «сайты»).

Нажимаем уже привычную кнопку «действия», затем «настроить сайт».

Отдельного внимания заслуживают следующие пункты, которые мы еще не встречали:

ключи карт, которые позволяют подгрузить «Google maps»;
настройки robots.txt, позволяющие загрузить собственный, сформированный по вашему усмотрению, данный тип файла, активно использующийся поисковыми системами;
виджет на сайт, позволяющий добавить тот инструмент коммуникации с пользователем сайта и CRM-системой, который вам необходим в дальнейшем. Чтобы его использовать или добавить необходимый, (например, онлайн-чат), следует зайти во вкладку «настроить»

Далее можно ознакомиться со списком виджетов или перейти к созданию, нажав соответствующую кнопку.

Выбираем необходимые каналы, редактируем, создаем, сохраняем/добавляем.

Подводя итог всему вышеописанному, новый раздел «Сайты» (пока что находящийся на бета-тестировании), реализованный разработчиками «Битрикс24», можно смело назвать удачным нововведением, потому что:

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

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

Создание сайта в Битрикс24

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

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

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

Зачем нужен сайт на Битрикс24?

В наше время выход бизнеса в онлайн-среду — обязательный шаг для его развития и масштабирования. Сайт для бизнеса — это:

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

Если Вам нужна интеграция Битрикс24 с сайтом, то вариант, собранный на конструкторе Б24, – оптимальное решение. Сайт на Битрикс уже содержит формы CRM: все обращения клиента сразу попадают в систему, а данные вносятся в карточку. Кроме того, с помощью Rest API можно провести более сложную интеграцию или реализовать любые бизнес-процессы.

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

Как создать сайт?

Запустить новый сайт можно прямо из меню корпоративного портала. Для создания переходим в раздел «Сайты» и нажимаем «Создать» на главном блоке или правом верхнем углу. В дальнейшем в данном разделе будут отображаться все созданные проекты.

Создание нового сайта в Битрикс24

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

Выбираем наиболее подходящий шаблон для сайта

Долго выбирать между шаблонами не стоит — в дальнейшем любой элемент можно будет редактировать под любые цели. Также можно выбрать пустой шаблон, однако проектировать страницы придется с нуля.

Настройки сайта

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

Настройка пустого шаблона сайта в Битрикс24

Выбираем подходящий цвет фона и нажимаем «Создать». В нижнем правом углу также находится форма для связи с техподдержкой.

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

Добавление блоков на страницу сайта

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

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

Конструктор сайтов Битрикс24 содержит большое количество различных блоков

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

Отдельное внимание требуется уделить настройкам самого сайта. Для этого открываем раздел «Настройки» на главном меню конструктора. Выбираем «Настройки страницы».

Раздел настройки страницы в главном меню

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

Меню редактирования страницы

После раскрытия меню под кнопкой «Дополнительно», открывается возможность более гибкой настройки.

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

В разделе можно:

Настроить мета-теги.
Изменить общий фон.
Поменять шаблон страницы.
Подключить модули аналитики.
Добавить пользовательский код HTML или CSS.
Разрешить или запретить индексирование страницы в поисковиках.
Добавить страницу в карту сайта.

Для настройки параметров сначала необходимо мышкой отметить их активность. После этого конструктор откроет окно для редактирования.

Настройка мета тегов и индивидуального фона страницы

После изменения параметров обязательно нажимаем «Сохранить».

Далее переходим к настройкам.

Настройки URL адреса сайта и указание главной страницы

В этом разделе Битрикс24 сайты можно указать адрес, выбрать главную страницу, настроить навигацию.

В выделенных полях указываем адрес сайта и главную страницу

Более глубокая настройка доступна при открытии подменю «Дополнительно». Данный раздел позволяет:

Загрузить Favicon.
Подтвердить права через вебмастера Яндекс или Google.
Подключить модуль аналитики.
Добавить ключи для размещения Google.Карты.
Выбрать шаблон для интерфейса.
Настроить страницу «Ошибка 404».
Настроить robots.txt.
Временно остановить работу сайта для редактирования.
Провести ускорение и техническую оптимизацию.

Чтобы начать работу с любым элементом из меню, требуется сначала отметить его активность.

Дополнительные настройки 1 Дополнительные настройки 2

После полной настройки нажимаем «Сохранить». При выходе из меню также требуется нажимать «Опубликовать» — это полностью сохранит все измененные параметры.

Редактирование страниц

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

Визуальная настройка страниц

Чтобы перейти непосредственно к редактированию функциональной составляющей блока, наводим мышью на элемент и нажимаем «Редактировать».

Настройка функциональной составляющей блоков

Для каждого блока список доступных опций отличается. Среди общих настроек требуется выделить:

Изменение минимального разрешения блока.
Редактирование заголовка, отображаемого текста или всплывающих подсказок.
Изменение фонового изображения.
Привязка ссылки или якоря для навигации.

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

Обратите внимание! Для любой страницы возможно добавление персонального кода HTML или CSS. Это обеспечивает более индивидуальные настройки визуальной составляющей: разметки, структуры и дизайна. Редактирование создаваемого сайта через код проводится по пути «Настройки» — «Настройки страницы» — «Добавить пользовательский HTML или CSS».

Создание новой страницы

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

Создание новой страницы

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

Выбор шаблона для новой страницы

Далее потребуется выбрать палитру страницы. Затем открывается конструктор Битрикс24 сайта для создания или редактирования страницы.

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

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

Заполняем ссылку, по которой будет доступна страница

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

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

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

Встроенная интеграция с CRM

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