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

> Добавьте чат-виджет на сайт за несколько минут: адрес, внешний вид, короткий код или инструкции для WordPress, Shopify, Wix и GTM.

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

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

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

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

## Проверьте внешний вид и языки

В просмотре видно, как будет выглядеть виджет. Цвета, тексты и языки можно изменить сейчас или позже в разделе [Настройки виджета](https://hrc.lt/ru/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/ru/widget-setup-install.desktop.1600.2c33f50a.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/ru/widget-home.desktop.2400.9a99b3e1.webp)

## Разрешённые адреса и localhost

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