Содержание
Установить онлайн-чат на сайт проще, чем кажется: не нужен программист, не нужно ничего переделывать в дизайне. Достаточно один раз вставить короткий фрагмент кода — и на всех страницах сайта появится кнопка чата. В этой инструкции разберём, где взять код, куда его вставить на популярных платформах и как проверить, что всё работает.
Шаг 1. Получите код виджета
После регистрации в Simon мастер настройки попросит указать имя и аватар помощника, адрес вашего сайта и цвет виджета. На последнем шаге он сгенерирует код.
Код всегда можно найти снова: откройте личный кабинет — на главной странице есть блок «Код для вставки на сайт» с кнопкой «Копировать». Код выглядит примерно так:
<script>
(function() {
const s = document.createElement('script');
s.async = true;
s.src = 'https://simon.by/js/widget-loader.js';
...
})();
</script>В нём уже прописан уникальный ключ вашей компании — ничего менять не нужно, копируйте целиком.
Шаг 2. Вставьте код перед закрывающим тегом body
Главное правило: код нужно вставить в конец страницы, перед закрывающим тегом </body>. Так он загрузится после основного содержимого и не замедлит открытие сайта.
Не вставляйте код в раздел <head>: в этот момент страница ещё не загружена, и кнопка чата не появится.
Удобнее всего вставлять код в общий «подвал» (футер) сайта — тогда чат окажется на всех страницах сразу.
Шаг 3. Установка на популярных платформах
Сайт на HTML или своей CMS
Найдите файл шаблона, который подключается на всех страницах — обычно это подвал сайта (footer). Вставьте код прямо перед строкой </body> и сохраните файл. Если сайт состоит из отдельных HTML-страниц без общего шаблона, код нужно добавить на каждую страницу, где должен работать чат.
WordPress
Есть два способа:
- Через плагин. Установите любой плагин для вставки кода в подвал сайта (их легко найти в каталоге плагинов по запросу «header footer code»). В его настройках вставьте код в поле для подвала (footer / «перед </body>») и сохраните. Этот способ надёжнее: код не пропадёт при обновлении темы.
- Через файл темы. В разделе «Внешний вид» откройте редактор файлов темы, найдите файл подвала (обычно
footer.php) и вставьте код перед</body>. Учтите: при обновлении темы изменения могут стереться — лучше делать это в дочерней теме.
Tilda и другие конструкторы сайтов
В конструкторах обычно есть специальный блок для HTML-кода. В Tilda это блок «HTML-код» (T123) из раздела «Другое»: добавьте его на страницу — удобнее всего в общий подвал, чтобы чат был на всех страницах, — вставьте код и опубликуйте страницу.
В других конструкторах ищите в настройках сайта поле вроде «Код в конце страницы», «Код перед </body>» или «Счётчики и скрипты». Если такое поле есть только для <head>, используйте блок HTML-кода на странице.
1С-Битрикс и другие CMS
Код добавляется в шаблон сайта — в файл подвала перед </body>. Если у вас нет доступа к шаблону, попросите разработчика или администратора сайта: для него это пара минут.
Шаг 4. Проверьте установку
- Откройте свой сайт в браузере и обновите страницу. В правом нижнем углу должна появиться круглая кнопка чата в цвете вашего бренда.
- Нажмите на неё и отправьте тестовое сообщение.
- Откройте рабочий чат Simon — сообщение должно появиться во вкладке «Новые».
Ещё можно нажать кнопку «Проверить установку кода» в личном кабинете: Simon откроет главную страницу вашего сайта и проверит, есть ли на ней код виджета.
Если кнопка чата не появилась
- Очистите кэш. Многие сайты и плагины кэшируют страницы. Сбросьте кэш сайта и обновите страницу с очисткой кэша браузера.
- Проверьте, куда вставлен код. Он должен быть внутри <body>, а не в <head>, и скопирован целиком — от <script> до </script>.
- Проверьте, опубликованы ли изменения. В конструкторах сайтов после вставки кода страницу нужно опубликовать заново.
- Проверьте адрес сайта в кабинете. Для кнопки «Проверить установку кода» Simon открывает именно тот адрес, который указан в настройках компании.
Если ничего не помогло — напишите нам в чат на этом сайте, разберёмся вместе.
Кнопка появилась? Следующий шаг — настроить приветствие. Как это сделать и 12 готовых примеров — в статье «Приветствие в чате на сайте».