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

> Додайте чат-віджет на сайт за кілька хвилин: адреса, вигляд, короткий код або інструкції для WordPress, Shopify, Wix і Google Tag Manager.

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

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

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

![Майстер нового чат-віджета зі знайденим сайтом](https://hrc.lt/screens/uk/widget-setup-site.desktop.1600.ace437f2.webp)

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

У перегляді видно, як виглядатиме віджет. Кольори, тексти й мови можна змінити зараз або пізніше в розділі [Налаштування віджета](https://hrc.lt/uk/docs/widget/settings).

## Вставте код

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

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

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

```html
<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>
```

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

![Крок встановлення з кодом і перевіркою](https://hrc.lt/screens/uk/widget-setup-install.desktop.1600.62be0ecb.webp)

## 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.

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

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

![Чат-віджет на сайті](https://hrc.lt/screens/uk/widget-home.desktop.2400.9ad52cde.webp)

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

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