Як встановити онлайн-чат на сайт: Хорошоп, Prom, OpenCart, WordPress, Tilda, Shopify

Встановлення онлайн-чату лякає тільки до першого разу. Насправді це копіювання одного рядка в потрібне поле. Нижче — інструкції для платформ, на яких працює більшість українських магазинів. Приклади з Talkoly, але логіка така сама для більшості сервісів.

Що потрібно перед початком

1. Акаунт у сервісі чату. У Talkoly це безкоштовна реєстрація, картка не потрібна.
2. Доступ до адмінки сайту з правами на зміну налаштувань або шаблону.
3. Код віджета. Він виглядає приблизно так:

<script src="https://talkoly.com/w.js" data-site="ID" async></script>

Замість ID у вашому кабінеті вже буде підставлений ідентифікатор сайту. Копіюйте код цілком, не змінюючи лапки. Атрибут async означає, що віджет вантажиться після основного вмісту і не гальмує сторінку.

Порада: перед змінами в шаблоні зробіть копію файлу або запишіть, що саме змінюєте. Так відкат займе хвилину.

Хорошоп і Prom.ua

Хорошоп

1. Відкрийте адмінку магазину.
2. Перейдіть у Налаштування → Інтеграції.
3. Знайдіть поле «Додатковий код у <body>» (у деяких версіях — «Сторонні скрипти»).
4. Вставте код віджета і збережіть.

Код автоматично з’явиться на всіх сторінках магазину. Окремо про можливості для цієї платформи — на сторінці чат для Хорошопу.

Prom.ua

Мова про власний сайт компанії, створений на Prom, а не про картку на маркетплейсі — туди сторонній чат поставити не можна.

1. Зайдіть у кабінет компанії на Prom.
2. Відкрийте Налаштування → Налаштування сайту.
3. Знайдіть поле «Код для вставки».
4. Вставте рядок коду і збережіть зміни.

Нюанси Prom і роботу з товарами з фіду описано на сторінці чат для Prom.

OpenCart

OpenCart 3: плагін

Для OpenCart 3 є готовий модуль у форматі OCMOD. Завантажте його на сторінці плагінів, встановіть через Розширення → Встановлення розширень, потім оновіть модифікації (Розширення → Модифікації, кнопка оновлення) і введіть ID сайту в налаштуваннях модуля.

OpenCart 4 і 2: через шаблон

1. Відкрийте Дизайн → Редактор шаблонів.
2. Оберіть вашу тему і файл common/footer.
3. Знайдіть закривний тег </body> і вставте код безпосередньо перед ним.
4. Збережіть і очистіть кеш у панелі керування.

Більше про OpenCart — на сторінці чат для OpenCart.

WordPress і WooCommerce

Найпростіше — плагін. Він не лише вставляє віджет, а й передає в чат ім’я, email і телефон покупця, який увійшов у свій акаунт. Менеджеру не доведеться перепитувати контакти.

1. Завантажте плагін зі сторінки плагінів.
2. У WordPress відкрийте Плагіни → Додати новий → Завантажити плагін, оберіть архів і активуйте.
3. У налаштуваннях плагіна вставте ID сайту з кабінету.

Якщо плагіни ставити не хочете, код можна додати в footer.php вашої теми перед </body>. Але при оновленні теми зміни можуть злетіти, тому краще дочірня тема або плагін. Деталі для магазинів — на сторінці чат для WooCommerce.

Tilda і Shopify

Tilda

1. Відкрийте проєкт і перейдіть у Налаштування сайту → Ще.
2. Знайдіть HTML-код для вставки у HEAD і додайте рядок коду.
3. Збережіть і переопублікуйте всі сторінки — без цього зміни на сайті не з’являться.

Shopify

1. В адмінці відкрийте Online Store → Themes, біля активної теми — Edit code.
2. Відкрийте файл theme.liquid.
3. Вставте код перед </body> і збережіть.

Для інших платформ і самописних сайтів правило те саме: код перед </body> на всіх сторінках. Інструкції для решти CMS є на сторінці плагінів.

Як перевірити, що чат працює

1. Відкрийте сайт у вікні інкогніто — так ви побачите його без власного кешу браузера.
2. Переконайтеся, що кнопка чату з’явилася в куті сторінки.
3. Напишіть тестове повідомлення від імені клієнта.
4. Перевірте, що воно прийшло в панель оператора, на телефон або в Telegram, і відповідайте.
5. Перегляньте кілька різних сторінок: головну, категорію, картку товару, кошик.

У Talkoly в кабінеті є кнопка «Перевірити встановлення»: вона сама скаже, чи бачить код на вашому сайті.

Чому чат не з’являється: типові проблеми

• Код не в тому місці. Його вставили в поле для мета-тегів, у текст сторінки або в шаблон, який використовується лише на одній сторінці. Перевірте, що код є на всіх сторінках, — відкрийте вихідний код сторінки (Ctrl+U) і пошукайте w.js.
• Кеш. Плагіни кешування в WordPress (і кеш OpenCart) можуть віддавати стару версію сторінки. Очистіть кеш плагіна, а якщо є CDN — і його теж.
• Оптимізатори скриптів. Деякі плагіни «склеюють» або відкладають JavaScript і ламають сторонні віджети. Додайте скрипт чату у виключення.
• Не той домен. У кабінеті вказано shop.ua, а сайт відкривається з www.shop.ua або з тестового піддомену. Перевірте адресу сайту в налаштуваннях чату.
• Код скопійовано не повністю або лапки замінилися на «типографські» після вставки через текстовий редактор. Скопіюйте ще раз прямо з кабінету.
• Блокувальники реклами. Трапляється рідко, але якщо чат не видно лише у вас, вимкніть розширення й перевірте ще раз.

Що налаштувати одразу після встановлення

Чат, що просто висить у куті, працює гірше, ніж міг би. Витратьте ще 15 хвилин на базові речі.

1. Привітання. Коротко і по-людськи: «Вітаємо! Підкажемо з розміром, наявністю чи доставкою. Пишіть». Без «Чим можу допомогти?», на яке ніхто не відповідає.
2. Кнопки тем. «Наявність», «Доставка й оплата», «Обмін і повернення», «Статус замовлення». Клієнту легше натиснути, ніж формулювати.
3. Графік роботи й автовідповідь. Вкажіть години, коли відповідаєте. Поза ними нехай працює офлайн-форма, яка збирає телефон, Telegram або email.
4. Telegram. Підключіть бот, щоб відповідати з телефона реплаєм, навіть коли ви не за комп’ютером. Як це працює — у статті як відповідати клієнтам з Telegram.
5. Швидкі відповіді. Збережіть кілька готових фраз про доставку й оплату. Готові формулювання беріть із нашої добірки скриптів продажів для чату.

Якщо обираєте, який сервіс ставити, подивіться порівняння онлайн-чатів для сайту. А переходите з іншого чату — спершу приберіть старий код, щоб на сайті не було двох кнопок одночасно.

Часті питання