Чат поддержки для OpenCart и MODX: установка и сценарии

Нотифлоу ставится на OpenCart 3.x и OCStore через шаблон в 5 минут, на MODX Revo — через chunk шаблона за 7 минут. Скрипт весит 35 КБ gzipped и грузится async, на скорость каталога не влияет. Кроме базовой установки — два сценария именно для интернет-магазинов: проактивное сообщение в карточке товара (триггер «посетитель смотрит товар > 30 секунд») и уведомление о брошенной корзине через 5 минут после добавления товара. Оба настраиваются в кабинете без кода.

Зачем интернет-магазину чат?

Большая часть посетителей карточки товара уходит без покупки — это типичная история для e-commerce. Часть из них уходит с конкретным вопросом: «есть ли в моем размере», «когда привезете», «можно ли в рассрочку», «работает ли в моей машине». На большинстве магазинов на эти вопросы отвечает FAQ или вообще никто.

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

Установка Нотифлоу на OpenCart 3.x: правильный способ через шаблон

Старый workaround — вставка кода в поле «Google Analytics Code» в настройках магазина. Работает, но грязно: чат маркируется как Google-скрипт, при удалении GA снесете и его.

Чистый способ — правка шаблона.

1. По FTP откройте файл catalog/view/theme/<имя_шаблона>/template/common/header.twig (для OpenCart 3.x на Twig). Для шаблонов на старом синтаксисе путь — catalog/view/theme/<имя_шаблона>/template/common/header.tpl
2. Найдите закрывающий тег </head>
3. Прямо перед ним вставьте <script> от Нотифлоу:

<!-- catalog/view/theme/default/template/common/header.twig -->
<script>
    (function(w,d,s,o,f,js,fjs){
        w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
        js=d.createElement(s),fjs=d.getElementsByTagName(s)[0];
        js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
    }(window,document,'script','nw','https://cp.notiflow.ru/js/widget.js'));
    nw('init', {apiKey:'YOUR_API_KEY_UUID'});
</script>
</head>

4. Сохраните файл, в админке OpenCart очистите кэш Twig: «Дашборд → Расширения → Дополнения → Twig Compiler → Очистить»

Для авторизованного покупателя сразу пробросьте идентификацию:

{% if logged %}
<script>
  nw('identify', '{{ customer_id }}', {
    email: '{{ customer_email }}',
    name: '{{ customer_firstname }} {{ customer_lastname }}'
  });
</script>
{% endif %}

Переменные customer_id и customer_email нужно прокинуть в массив $data контроллера catalog/controller/common/header.php — без этого Twig их не увидит.

Установка Нотифлоу на OCStore

OCStore — форк OpenCart с локализацией под РФ. Структура файлов та же. Путь к header-шаблону: catalog/view/theme/<имя_шаблона>/template/common/header.tpl (OCStore 2.x) или header.twig (3.x на форке).

Способ установки идентичен OpenCart — вставка <script> перед </head>. Единственное отличие — OCStore часто использует переопределенные шаблоны через папку template_default, проверьте, какой шаблон активен в «Система → Настройки → Магазин → Тема».

После правки сбросьте кэш в «Система → Обслуживание → Очистить кэш» (все галочки).

Установка Нотифлоу на MODX Revo (через chunk шаблона)

MODX Revo разделяет шаблоны и chunks (переиспользуемые блоки). Правильный способ — отдельный chunk для чата, подключенный в основном шаблоне.

1. В админке MODX откройте «Элементы → Чанки → Создать чанк»
2. Имя: НотифлоуWidget. Содержимое:

<script>
    (function(w,d,s,o,f,js,fjs){
        w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
        js=d.createElement(s),fjs=d.getElementsByTagName(s)[0];
        js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
    }(window,document,'script','nw','https://cp.notiflow.ru/js/widget.js'));
    nw('init', {apiKey:'YOUR_API_KEY_UUID'});
</script>

3. Сохраните чанк
4. Откройте основной шаблон сайта («Элементы → Шаблоны → ваш шаблон»). Перед </head> вставьте вызов чанка: [[$НотифлоуWidget]]
5. Очистите кэш: «Управление → Очистить кэш сайта»

Для идентификации авторизованного пользователя через MODX Login используйте отдельный чанк НотифлоуIdentify:

<script>
  nw('identify', '[[+id]]', {
    email: '[[+email]]',
    name: '[[+fullname]]'
  });
</script>

И вызывайте его внутри сниппета [[!Login]] после успешной авторизации. Сам API-ключ удобно вынести в системную настройку MODX и подставлять в чанк через placeholder — тогда ротация ключа не требует правки шаблона.

Сценарий: брошенная корзина → проактивное сообщение

Цель: показать сообщение посетителю, который добавил товар в корзину, но не оформил заказ за 5 минут.

В шаблоне OpenCart или MODX триггерите событие при добавлении товара в корзину. Для OpenCart правьте catalog/controller/checkout/cart.php, добавьте JS-возврат после AJAX-ответа:

// в скрипте каталога после успешного add-to-cart
nw('track', 'cart_add', {
  product_id: productId,
  product_name: productName,
  price: productPrice,
  cart_total: cartTotal
});

В кабинете Нотифлоу создайте попап «Брошенная корзина»:

1. «Виджеты → Создать → Попап»
2. Триггер запуска: событие cart_add совершено + не было события purchase за 5 минут
3. Текст: «Завершите заказ — товар на сумму {{ cart_total }} ₽ ждет вас в корзине. Промокод BACK5 даст скидку 5%»
4. CTA: ссылка на страницу корзины с промокодом

Подробнее — в статье проактивные попапы для e-commerce.

Сценарий: триггер в карточке товара

Если посетитель смотрит карточку товара дольше 30 секунд — это сильный сигнал колебания. Покажите всплывающее сообщение от менеджера: «Помочь подобрать размер?» / «Уточнить срок доставки в ваш город?»

В Нотифлоу:

1. «Виджеты → Создать → Попап»
2. Условие показа: URL содержит /product/, время на странице > 30 секунд
3. Триггер показа — один раз за сессию
4. Текст и CTA — кнопка «Спросить менеджера», по клику открывается чат

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

Сценарий: статус заказа в чате через события

Покупатели часто пишут в чат «где мой заказ?». Можно автоматизировать ответ — при изменении статуса заказа в OpenCart фиксируйте событие в Нотифлоу через REST API. На это событие настраивается триггер: вернувшемуся клиенту покажется сообщение в чате с актуальным статусом.

В OpenCart повесьте хук на model/checkout/order/addOrderHistory и из него отправляйте POST /api/v1/events с X-Api-Key, external_id (email клиента), полем event: order_status_changed и атрибутами order_id и status. Подробнее про эндпоинт — в статье API-ключи.

Что делать, если виджет не появляется

Чек-лист:

1. Сбросьте кэш — Twig в OpenCart, основной кэш в MODX. Без сброса видна старая версия шаблона
2. Проверьте, что домен в Нотифлоу совпадает с реальным URL (включая www и https)
3. Откройте DevTools Console — нет ли Failed to load cp.notiflow.ru/js/widget.js. Если есть — проблема с сетью или AdBlock
4. На страницах админки виджет не нужен и не появится — это норма. Тестируйте на витрине магазина
5. Если используете несколько шаблонов под разные категории — проверьте, что код добавлен во все

Часто задаваемые вопросы

Поставьте чат для интернет-магазина за 10 минут — зарегистрируйтесь в Нотифлоу, скопируйте код установки и вставьте в шаблон OpenCart или чанк MODX. Подробнее про сценарии — в проактивных попапах для e-commerce и чат для Telegram интернет-магазина. Сравнение виджетов — на странице платформы.