Как подключить на сайте онлайн-чат Битрикс 24?


Для размещения онлайн чата на вашем сайте нужно перейти по ссылке https://simai.ru/~bitrix24 или https://simai.ru/bitrix24 и бесплатно создать портал на Битрикс-24.

После этого разместить виджет на ваш сайт согласно инструкции.


Об открытых линиях: Онлайн-чате

Отдельная страница с Онлайн-чатом

Виджет на собственный сайт

Как переместить кнопку "наверх" выше виджета открытых линий?

Виджет на Битрикс24.Сайты


Об открытых линиях: Онлайн-чате

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

Все вопросы будут поступать в чат Битрикс24 сотрудникам, которые указаны в настройках очереди Открытой линии.

Есть несколько вариантов размещения Онлайн-чата для общения с клиентами:

  1. Отдельная страница с Онлайн-чатом (сайт не нужен).
  2. Виджет на ваш собственный сайт.
  3. Виджет на Битрикс24.Сайты.

1. Отдельная страница с Онлайн-чатом

  1. Перейти в раздел Контакт-центр и выбрать канал Онлайн-чат.


    Настройки публичной страницы

    Вид чата – загрузка своей фоновой картинки для публичной страницы с чатом.

    Свой CSS – можно использовать свои стили CSS как с помощью ссылки, так и вписать пользовательский CSS в специальное поле.

    Подпись – также можно убрать подпись Работает с Битрикс24 (только на коммерческих тарифных планах). 

  2. Настройки фраз

    Можно выбрать свои фразы для:

    • Текста приветствия (верхний).
    • Текста приветствия (нижний).
    • Текста при недоступности операторов.
    • Заголовка онлайн-чата.

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

    Остальные фразы интерфейса Онлайн-чата можно также изменить. Как это сделать можно прочитать в отдельной статье.

  3. Создать или настроить действующую Открытую линию.

  4. Не забыть Сохранить настройки канала и открытой линии.

  5. Ваши клиенты, перейдя по адресу публичной ссылки, увидят такую страницу:



2. Виджет на собственный сайт

Для того чтобы использовать виджет с Онлайн-чатом на любом сайте, нужно скопировать специальный код и поместить его в шаблон вашего сайта перед закрывающим тегом </body>.

Для получения кода для вставки на сайт нужно перейти в раздел Контакт-центр > Виджет на сайт и выбрать Виджет для сайта или создать новый:


Затем выбрать в этом виджете ранее созданную Открытую линию с онлайн-чатом или создать новую, и скопировать специальный код на сайт:


Также на странице редактирования Виджета можно настроить дизайн виджета (кнопки), расположение кнопки, приветствие и его поведение и т.д.

Подробнее о настройке виджета в Битрикс24 можно прочитать в статье Виджет на сайт.

Не забудьте сохранить виджет.

3. Виджет на Битрикс24.Сайты

По умолчанию на созданном сайте уже включен один из виджетов вашего Битрикс24. Но если таковых нет или вы хотите подключить другой, то все можно настроить, буквально, за 5 минут :)

Перейдите в раздел Настройки сайта:

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

Подробнее о подключении виджета на Битрикс24.Сайты можно прочитать в статье Виджет открытых линий на сайте.

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

Как переместить кнопку "наверх" выше виджета открытых линий?

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


Шаг 1. Во включенном режиме правки навести курсор мыши в нижней части сайта на размещенный компонент. Нажать на шестерёнку.


Шаг 2. В открывшемся окне настройки параметров компонента simai:sf.up изменить модификатор положения.

Модификатор отступа снизу ab-5, изменить, например, на ab-6.


В результате кнопка переместится выше.


Документация SIMAI FRAMEWORK. Абсолютное позиционирование