Как добавить онлайн-чат на сайт Wix: пошаговая инструкция

Wix позволяет собрать аккуратный сайт без разработчика, но рано или поздно владелец упирается в вопрос: как разговаривать с посетителями прямо на странице, а не ждать письма на почту. Поставить онлайн-чат на сайт Wix можно за несколько минут — через встроенный раздел «Пользовательский код». В этой инструкции разберём, что подготовить заранее, куда именно вставить скрипт, как выбрать страницы и почему чат иногда «не появляется», хотя всё сделано правильно.

Инструкция подходит для любого стороннего виджета, который подключается одной строкой JavaScript. Примеры ниже — на коде ChatDeck.

Что нужно для установки чата на Wix

Перед началом проверьте три вещи.

• Опубликованный сайт с подключённым доменом. Раздел пользовательского кода в Wix доступен для сайтов на премиум-тарифе с собственным доменом. На бесплатном адресе вида username.wixsite.com вставка кода обычно недоступна. Актуальные условия лучше уточнить в справке Wix — они периодически меняются.
• Права на редактирование настроек сайта. Если сайт ведёт подрядчик, попросите у него роль с доступом к настройкам или передайте ему код.
• Код виджета. Его выдаёт сервис чата после регистрации. В ChatDeck код выглядит так:

<script src="https://chatdeck.ru/widget.js" data-chatdeck-key="pk_…" async></script>

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

Где в Wix добавить пользовательский код

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

1. Откройте панель управления сайтом (Dashboard), а не редактор.
2. Перейдите в «Настройки» → «Разработка и интеграции» → «Пользовательский код».
3. Нажмите «+ Добавить код».
4. Вставьте код виджета в поле для кода и дайте фрагменту понятное имя, например «Онлайн-чат». Имя пригодится, когда через год вы будете искать, что за скрипты подключены к сайту.

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

Выбор страниц и места загрузки кода

В том же окне Wix предлагает выбрать, где и как будет работать код.

Какие страницы

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

Ниже выберите «Загружать код один раз». Wix-сайты работают как одностраничное приложение: при переходе между страницами браузер не перезагружает всё целиком. Если поставить загрузку на каждой странице, скрипт может инициализироваться повторно.

Место размещения

В блоке «Разместить код» выберите «Body — конец» и нажмите «Применить». Так скрипт загрузится после основного содержимого и не задержит отрисовку страницы. Сам код ChatDeck работает и в <head>, но для Wix конец body — самый спокойный вариант.

Если вы всё же хотите показывать чат только на одной странице — например, на лендинге акции, — выберите в настройках «Выбранные страницы» и отметьте нужные. Это рабочий сценарий, просто помните про потерю диалога при переходах.

Публикация и проверка

После сохранения кода нужно убедиться, что всё работает.

1. Нажмите «Опубликовать» в редакторе, если вносили другие изменения. Сам пользовательский код применяется к опубликованной версии.
2. Откройте сайт по основному домену в обычной вкладке браузера.
3. Найдите кнопку чата в углу экрана. Если её нет, обновите страницу с очисткой кэша.
4. Напишите тестовое сообщение и проверьте, что оно появилось во входящих у оператора.
5. Ответьте из рабочего места оператора и убедитесь, что ответ пришёл в виджет.
6. Повторите проверку с телефона — по мобильной сети, а не через Wi-Fi офиса.

Важный момент: в редакторе Wix и в режиме предпросмотра пользовательский код не выполняется. Отсутствие чата в редакторе — нормальное поведение, а не ошибка. Проверять нужно только живой сайт.

Настройка внешнего вида под дизайн сайта

Когда виджет заработал, подгоните его под стиль сайта. Делается это в настройках сервиса чата, а не в Wix: код на сайте трогать не придётся.

На что обратить внимание:

• Цвет. Возьмите основной цвет кнопок сайта — так чат будет выглядеть частью страницы, а не чужеродной вставкой.
• Тема. Светлая, тёмная или автоматическая, по настройкам устройства посетителя.
• Положение. Правый нижний угол привычен, но если там уже стоит кнопка «Наверх» или баннер cookies, перенесите чат влево.
• Размер кнопки и форма углов. На минималистичных сайтах лучше смотрится компактная кнопка.
• Приветствие. Одна короткая фраза о том, чем вы можете помочь.

В ChatDeck виджет встраивается через Shadow DOM, поэтому стили Wix не ломают чат, а чат не ломает вёрстку сайта. Язык интерфейса — русский или английский — подбирается автоматически.

Частые проблемы

Чат не появился после установки

Проверьте по порядку: сайт опубликован; вы открываете основной домен, а не предпросмотр; фрагмент кода сохранён и не отключён в списке пользовательского кода; в коде нет лишних символов после копирования. Иногда мешает блокировщик рекламы в браузере — проверьте в режиме инкогнито.

Код пропал после смены домена

Это известное поведение Wix: при смене домена сайта пользовательский код удаляется. После переезда на новый домен зайдите в «Пользовательский код» и добавьте фрагмент заново.

Чат перекрывает другие элементы

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

Чат загружается дважды

Проверьте, что код добавлен один раз и стоит опция «Загружать код один раз». Ещё одна частая причина — тот же скрипт, добавленный через приложение или менеджер тегов параллельно.

Частые вопросы

Нужен ли платный тариф Wix для установки кода?

Как правило, да: пользовательский код доступен для опубликованных сайтов с подключённым доменом на премиум-тарифе. Условия Wix могут меняться, поэтому перед покупкой тарифа сверьтесь с официальной справкой.

Почему чат не виден в редакторе?

Потому что Wix не выполняет пользовательский код в редакторе и в предпросмотре. Откройте опубликованный сайт по его домену — там виджет появится.

Можно ли поставить чат только на одну страницу?

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

Будет ли чат работать в мобильной версии?

Да. Мобильная версия Wix использует тот же код, а виджет сам подстраивается под ширину экрана. Проверьте только, не закрывает ли кнопка чата важные элементы мобильного макета.

Установите чат на свой сайт Wix

Если хотите проверить всё на практике, зарегистрируйтесь в ChatDeck: это бесплатно, без платы за операторов. Код появится в настройках сразу после регистрации, а краткая памятка по шагам есть на странице установки на Wix. Скриншоты каждого шага в кабинете — в уроке «Установка чата на сайт». Если у вас несколько сайтов на разных платформах, пригодится общая инструкция как установить онлайн-чат на сайт.