Встановлення чат-віджета на сайт

Чат-віджет це вікно чату на вашому сайті, через яке клієнти вам пишуть. Створіть його в розділі «Налаштування», «Чат-віджети» кнопкою «Новий чат-віджет».

Введіть адресу сайту

Введіть адресу, наприклад shop.example.com. Ми переглянемо сайт і запропонуємо кольори, логотип і мови. Адреса також стає першою дозволеною адресою: віджет працює лише на дозволених адресах.

app.hrc.lt

Перевірте вигляд і мови

У перегляді видно, як виглядатиме віджет. Кольори, тексти й мови можна змінити зараз або пізніше в розділі Налаштування віджета.

Вставте код

Найпростіше один тег <script> перед тегом </body>:

<script
  src="https://widget.hrc.lt/v1/loader.js"
  data-widget-key="wk_xxxxxxxxxxxxxxxxxxxx"
  async
></script>

Якщо ви хочете передавати дані про користувача або викликати віджет зі свого коду, використовуйте повний код із чергою команд:

<script>
  (function (w, d) {
    w.HrcWidget = w.HrcWidget || function () {
      (w.HrcWidget.q = w.HrcWidget.q || []).push(arguments);
    };
    var s = d.createElement('script');
    s.async = true;
    s.src = 'https://widget.hrc.lt/v1/loader.js';
    d.head.appendChild(s);
  })(window, document);
  HrcWidget('init', {
    widgetKey: 'wk_xxxxxxxxxxxxxxxxxxxx',
    locale: 'auto',
  });
</script>

Майстер показує код уже з ключем вашого віджета.

app.hrc.lt

WordPress, Shopify, Wix і Google Tag Manager

• WordPress: встановіть безкоштовний плагін WPCode, відкрийте Code Snippets, Header & Footer і вставте код у поле Footer.
• Shopify: Online Store, Themes, «…» біля теми, Edit code, файл theme.liquid: вставте код перед </body>.
• Wix: Settings, Custom Code, Add Custom Code, місце Body - end, усі сторінки. Потрібен платний тариф Wix і підключений домен.
• Google Tag Manager: Tags, New, Custom HTML, вставте код, Triggering All Pages, потім Submit.

Перевірте, що все працює

Майстер кожні кілька секунд перевіряє, чи завантажився віджет на вашому сайті. Відкрийте сайт і надішліть тестове повідомлення: воно з'явиться у вхідних.

kopa.example

Дозволені адреси й localhost

Віджет працює лише на дозволених адресах. Додайте кожну як https://shop.example.com; https://*.example.com охоплює всі піддомени вашого домену. Для розробки увімкніть «Дозволити localhost». Докладніше: Код для вставлення, React і CSP.