Установка чат-виджета на сайт

Чат-виджет это окно чата на вашем сайте, через которое клиенты вам пишут. Создайте его в разделе «Настройки», «Чат-виджеты» кнопкой «Новый чат-виджет».

Введите адрес сайта

Введите адрес, например 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.