Установка виджетов чатов и других виджетов на примере Jivosite

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

В этой статье на примере сервиса Jivo мы разберем, как установить онлайн чат на сайт вручную. Мы не будем подробно останавливаться на готовых плагинах для каждой CMS (они есть для WordPress, Joomla, MODX, OpenCart, Битрикс и других), а сосредоточимся на универсальных методах, которые работают на любой платформе.

Это полезно, если вы используете редкую CMS, самописный сайт или просто хотите полностью контролировать процесс. А если у вас сайт на конструкторе Tilda — для вас тоже есть простое решение.

Так где же взять код?

Прежде чем что-то устанавливать, нужно получить сам код чата.

1. Зарегистрируйтесь в сервисе Jivo и войдите в свой аккаунт.
2. В панели управления перейдите в раздел «Управление» → «Каналы связи».
3. Напротив названия вашего сайта нажмите «Настроить», а затем выберите вкладку «Установка».
4. Вы увидите окно с кодом — просто скопируйте его в буфер обмена. Этот код представляет собой небольшой скрипт, который и «оживит» виджет на ваших страницах.

Теперь, когда код у нас в руках, рассмотрим основные способы его размещения.

Способ 1. Универсальный: вставляем код в шаблон сайта

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

В чем суть: нужно найти файл, который отвечает за верхнюю часть сайта (шапку), и вставить скопированный код прямо перед закрывающим тегом `</head>`.

Как это сделать на практике:

1. Через админку: Во многих CMS (например, WordPress или Joomla) есть встроенный редактор кода. Зайдите в раздел управления внешним видом (темами), найдите файл шаблона (`header.php` для WordPress, `/templates/ваш_шаблон/index.php` для Joomla) и вставьте код перед `</head>`.
2. Через FTP (Файловый менеджер): если доступа к редактору в админке нет, подключитесь к серверу через FTP-клиент (например, FileZilla). Перейдите в папку с вашим шаблоном (`/wp-content/themes/ваш_шаблон/` для WordPress или `/templates/ваш_шаблон/` для Joomla), найдите файл `index.php` или `header.php`, скачайте его, отредактируйте в обычном блокноте (вставьте код перед `</head>`), сохраните и загрузите обратно на сервер, заменив старый файл.

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

Способ 2. Используем встроенные возможности CMS: виджеты и модули

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

Для WordPress: Зайдите в «Внешний вид» → «Виджеты». Перетащите блок «Произвольный HTML» в нужную область (например, «Подвал» или «Колонтитул»). Вставьте скопированный код Jivo в открывшееся поле и сохраните изменения.

Для Joomla: Перейдите в «Система» → «Модули сайта» и создайте новый модуль типа «HTML-код» или «Custom». Вставьте код в поле содержимого, в параметрах укажите «Статус: Опубликован», а в «Позиции» выберите, например, `footer` (подвал). Важно также скрыть заголовок модуля, чтобы на сайте не появлялась лишняя надпись.

Этот метод удобен тем, что виджет можно легко отключить или переместить, не трогая код шаблона.

Способ 3. Конструкторы сайтов (на примере Tilda)

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

Чтобы установить чат на все страницы сразу:

1. Зайдите в «Настройки сайта».
2. Найдите раздел «Еще» → «HTML-Код для вставки внутрь HEAD».
3. Вставьте туда код Jivo, сохраните и обязательно опубликуйте все страницы заново.

Если чат нужен вам только на одной странице:

1. В редакторе страницы откройте библиотеку блоков.
2. В разделе «Виджет» найдите и добавьте блок «Jivo Chat Виджет».
3. Нажмите на блок, откройте вкладку «Контент» и вставьте код Jivo в специальное поле.
4. Сохраните и опубликуйте страницу.

Осталось проверить результат вашей работы.

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

*   Зайдите на сайт с компьютера и с телефона.

*   Используйте режим «Инкогнито» в браузере, чтобы исключить влияние кэша.

*   Убедитесь, что виджет не перекрывает важные кнопки или меню.

Теперь разберем пошаговые инструкции для четырех популярных платформ: WordPress, Joomla, 1С-Битрикс и Tilda. Вы узнаете, как онлайн чат на сайт битрикс добавить через админку, и как не запутаться в настройках других систем.

Главное правило для всех CMS: перед началом работ скопируйте код виджета в личном кабинете Jivo (раздел «Управление» → «Каналы связи» → «Настроить» → «Установка»).

1. WordPress — установка через виджеты и редактор тем

Способ А. Через виджеты (самый простой и безопасный)
Этот метод подходит для тем, которые поддерживают виджеты (сайдбары, подвал).

1. В админке WordPress зайдите в «Внешний вид» → «Виджеты».
2. Найдите блок «Произвольный HTML» (Custom HTML).
3. Перетащите его в область, где должен отображаться чат. Обычно выбирают «Подвал» (Footer) или «Колонтитул» (Header) , чтобы виджет был на всех страницах.
4. В открывшемся поле вставьте скопированный код Jivo.
5. Нажмите «Обновить» или «Готово». Виджет появится на сайте после обновления страницы.

Способ Б. Вставка в файл header.php (для любых тем)
Если ваша тема не поддерживает виджеты в подвале или вы хотите 100% гарантию появления кода на всех страницах, можно добавить его напрямую в шаблон.

1. Перейдите в «Внешний вид» → «Редактор тем».
2. Справа найдите и выберите файл «Заголовок» (header.php).
3. Найдите в коде строку </head> (закрывающий тег "головы" документа).
4. Вставьте код чата непосредственно перед этой строкой.
5. Нажмите «Обновить файл».

2. Joomla — создание HTML-модуля

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

1. Подготовка редактора. Зайдите в «Система» → «Общие настройки». В поле «Редактор по умолчанию» временно выберите вариант «Editor - None» (Без редактора). Это нужно, чтобы Joomla не "чистила" наш код. Сохраните изменения.
2. Создание модуля. Перейдите в «Контент» → «Модули сайта» и нажмите кнопку «Создать» (или "+").
3. В списке типов модулей выберите «HTML-код» (Custom HTML).
4. Настройка модуля:

• Заголовок: Укажите, например, "Jivo Chat" (это служебное название).
• Поле для HTML-кода: Вставьте скопированный код Jivo.
• Статус: Выберите «Опубликован».
• Позиция: Выберите место отображения. Чтобы виджет был на всех страницах, лучше всего подойдет позиция «footer» (подвал) или любая другая, которая есть в вашем шаблоне.
• Показывать заголовок: Выберите «Скрыть», чтобы на сайте не появлялась лишняя надпись "Jivo Chat".

1. Нажмите «Сохранить» и проверьте сайт.

3. 1С-Битрикс — добавляем код в настройки шаблона

В Битриксе код чаще всего добавляют в шаблон сайта. Это надежный способ, чтобы онлайн чат на сайт битрикс был виден на всех страницах.

1. В административной панели перейдите в «Настройки» → «Настройки продукта» → «Сайты» → «Шаблоны сайтов».
2. Найдите в списке шаблон, который используется для вашего сайта (обычно он помечен как "По умолчанию"), и нажмите «Изменить».
3. В открывшемся редакторе найдите файл header.php (или template.php — зависит от версии шаблона, но чаще всего это header.php). Он отвечает за верхнюю часть сайта.
4. Найдите в коде строку </head> (закрывающий тег HEAD). Вставьте скопированный код Jivo прямо перед ней.
5. Нажмите кнопку «Сохранить изменения».

Важно: Если вы не уверены, какой шаблон используется, или боитесь что-то сломать в коде — попросите помощи у разработчика или воспользуйтесь готовым модулем Jivo из Маркетплейса Битрикс, который устанавливается автоматически.

4. Tilda — блоки и настройки сайта

Конструктор Tilda предлагает два удобных способа.

Если чат должен быть на всех страницах сайта:

1. Зайдите в раздел «Мои сайты» и откройте «Настройки» нужного сайта.
2. Прокрутите вниз до раздела «Еще» и нажмите «HTML-Код для вставки внутрь HEAD» .
3. Вставьте скопированный код Jivo в открывшееся поле и нажмите «Сохранить».
4. Обязательно опубликуйте все страницы сайта заново, чтобы изменения применились.

Если чат нужен только на одной конкретной странице:

1. Откройте нужную страницу в редакторе Tilda.
2. Нажмите «Добавить блок» и перейдите в раздел «Виджет» .
3. Найдите блок «Jivo Chat Виджет» (T133). Если не можете найти, воспользуйтесь поиском по блокам.
4. Добавьте этот блок на страницу (обычно его размещают в самом низу, перед подвалом).
5. Нажмите на добавленный блок, затем на кнопку «Контент». В открывшемся окне будет поле для вставки кода. Вставьте его туда.
6. Нажмите «Сохранить и закрыть», а затем «Опубликовать» страницу.

Заключение

Как видите, онлайн чат на сайт создать и установить совсем несложно. И не важно: будет это онлайн чат на сайт Битрикс, Joomla или Tilda.

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

Выберите подходящий способ: универсальная вставка в шаблон подходит для любых сайтов, встроенные виджеты удобны в популярных CMS, а для конструкторов вроде Tilda и вовсе есть готовые блоки.

Установите чат сегодня, и уже завтра вы сможете лично помогать своим клиентам, подталкивая их к заказу. А если возникнут вопросы, поддержка Jivo работает 24/7 и всегда готова прийти на помощь.