Онлайн-чат для InSales: как установить виджет в магазин

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

Что подготовить перед установкой

Установка занимает несколько минут, но лучше заранее собрать всё необходимое, чтобы не возвращаться к ней.

• Доступ к админке InSales с правами на изменение настроек сайта. Если магазин ведёт подрядчик, попросите его выдать доступ или выполнить шаги по инструкции ниже.
• Код виджета. В сервисе онлайн-чата он выглядит как одна строка. В ChatDeck его можно скопировать в разделе «Настройки» после регистрации:

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

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

Куда вставить код в InSales

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

1. Откройте админку и перейдите в «Настройки» → «Настройки сайта» → «Счётчики и коды».
2. Добавьте новый код. Укажите понятное название, например «ChatDeck», чтобы через полгода было ясно, что это за скрипт. Если платформа предлагает выбрать место размещения, выберите конец страницы.
3. Вставьте код виджета и сохраните.

Скрипт загружается асинхронно (атрибут async), поэтому неважно, окажется он в начале или в конце страницы: виджет сам дождётся загрузки документа. Пошаговая инструкция с актуальными названиями пунктов меню есть на странице установки чата в InSales.

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

Если нужно вставить код в шаблон

Иногда удобнее разместить код прямо в теме — например, если вы хотите передавать в чат данные авторизованного покупателя (об этом ниже) или выводить виджет только на части страниц. Для этого используется редактор шаблона в разделе оформления. Работайте с копией темы и проверяйте изменения до публикации: ошибка в общем макете может сломать отображение всего магазина.

Проверка на витрине, в корзине и мобильной версии

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

1. Главная и каталог. Кнопка чата появилась в углу экрана и не перекрывает важные элементы — фильтры, кнопку «Наверх», баннеры согласия на cookie.
2. Карточка товара. Именно здесь задают больше всего вопросов. Убедитесь, что кнопка не закрывает «В корзину» и цену.
3. Корзина. Напишите тестовое сообщение и проверьте, что оно дошло до оператора.
4. Оформление заказа. Проверьте отдельно, выводится ли чат на этом шаге. Страница чекаута на платформах интернет-магазинов часто устроена иначе, чем витрина, и сторонние коды там могут не подключаться. Если чата нет, это особенность платформы, а не ошибка установки.
5. Мобильная версия. Откройте магазин с телефона. Большая часть трафика интернет-магазинов мобильная, и именно там кнопка чата чаще всего мешает: перекрывает плавающую корзину или кнопку покупки.

Если кнопка мешает, поменяйте её положение (левый или правый угол) и размер в настройках виджета. В ChatDeck виджет работает в изолированном Shadow DOM, поэтому не ломает стили темы и сам не наследует их.

Передача данных авторизованного покупателя

Когда покупатель вошёл в личный кабинет магазина, оператору полезно сразу видеть его имя и email, а не спрашивать «как к вам обращаться?». Для этого у виджета есть вызов identify:

chatdeck('identify', {
  userId: 'идентификатор покупателя',
  name: 'Имя покупателя',
  email: 'почта@покупателя.ru',
})

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

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

Настройки чата для магазина

Сам факт установки виджета мало что меняет. Работать на продажи он начинает после нескольких простых настроек.

• Приветствие. Вместо безликого «Здравствуйте!» напишите то, что снимает типичное сомнение: «Подскажем по размеру и доставке — спрашивайте».
• Вложения. Покупатели присылают скриншоты ошибок оплаты, фото полученного товара, номера заказов на скриншоте. В ChatDeck в чат можно отправлять изображения, видео, PDF и текстовые файлы до 10 МБ.
• Рабочие часы. Укажите, когда отвечают операторы. Вне этого времени ИИ-ассистент сообщит, когда команда вернётся, и при необходимости ответит на простые вопросы сам.
• ИИ-помощник. Опишите в инструкции условия доставки, оплаты и возврата. Бот закроет повторяющиеся вопросы, переведёт посетителя на нужную страницу сайта, а всё, что касается конкретного заказа, передаст оператору.
• Оценка после диалога. Запрос оценки от 1 до 5 после завершения разговора даёт простую обратную связь о качестве ответов.

Больше идей о том, как чат помогает продавать в e-commerce, — в статье про онлайн-чат для интернет-магазина.

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

• Кнопка не появилась. Проверьте, что код сохранён и вставлен целиком, без обрезанных кавычек. Обновите страницу без кэша.
• Две кнопки чата. Код подключён дважды или на сайте остался виджет предыдущего сервиса. Удалите лишнее.
• Кнопка перекрывает элементы темы. Смените угол или уменьшите размер кнопки в настройках виджета.
• Сообщения не доходят. Убедитесь, что в коде указан ключ именно вашего рабочего пространства и что вы открыли входящие под тем же аккаунтом.

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

Можно ли установить чат без доступа к шаблону?

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

Будет ли чат на странице оформления заказа?

Зависит от того, подключает ли платформа пользовательские коды на шаге чекаута. Проверьте это сами после установки: пройдите тестовое оформление заказа. На витрине, в каталоге, карточках товаров и корзине чат будет работать.

Как передать имя покупателя в чат?

Через вызов chatdeck('identify', { userId, name, email }) в шаблоне темы, где доступны данные вошедшего клиента. Передавайте данные только для авторизованных покупателей и не добавляйте в вызов ничего секретного.

Замедлит ли чат магазин?

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

Итог

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