Перейти к основному содержимому

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

Цель​

Добавить чат-виджет SMAIWER на ваш сайт для общения с посетителями в реальном времени.

Предусловия​

Пошаговая инструкция​

Шаг 1: Получите код виджета​

  1. Войдите в панель управления
  2. Нажмите «Настройки виджета» (иконка 💬)
  3. Скопируйте код для установки

Код выглядит примерно так:

<script>
  (function(w,d,s,o,f,js,fjs){
    w['SmaiwerWidget']=o;w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
    js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
    js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
  }(window,document,'script','smaiwer','https://api.smaiwer.ru/widget_loader.js'));
  smaiwer('init', 'ВАШ_ORGANIZATION_ID');
</script>

Шаг 2: Добавьте код на сайт​

Вставьте код перед закрывающим тегом </body> на всех страницах сайта.

Для обычного HTML сайта:​

<!DOCTYPE html>
<html>
<head>...</head>
<body>
  <!-- Контент сайта -->
  
  <!-- SMAIWER Widget -->
  <script>
    (function(w,d,s,o,f,js,fjs){
      w['SmaiwerWidget']=o;w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
      js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
      js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
    }(window,document,'script','smaiwer','https://api.smaiwer.ru/widget_loader.js'));
    smaiwer('init', 'ваш-organization-id');
  </script>
&lt;/body&gt;
&lt;/html&gt;

Для WordPress:​

  1. Установите плагин Insert Headers and Footers
  2. Перейдите в Настройки → Insert Headers and Footers
  3. Вставьте код в секцию Scripts in Footer
  4. Сохраните изменения

Для Tilda:​

  1. Откройте Настройки сайта → Ещё → HTML-код
  2. Вставьте код в поле Перед закрывающим body
  3. Опубликуйте изменения

Шаг 3: Настройте внешний вид​

В панели «Настройки виджета» вы можете настроить:

ПараметрОписание
Цвет кнопкиОсновной цвет виджета (HEX)
ПриветствиеТекст при открытии чата
ПоложениеЛевый или правый нижний угол
Быстрые кнопкиГотовые варианты ответов
Форма сбора контактовПоля для сбора email/телефона

Шаг 4: Проверьте работу​

  1. Откройте ваш сайт в браузере
  2. В правом нижнем углу должна появиться кнопка чата
  3. Нажмите на неё и отправьте тестовое сообщение
  4. Проверьте, что сообщение появилось в панели SMAIWER

Ожидаемый результат​

  • Виджет отображается на сайте
  • Посетители могут писать сообщения
  • Сообщения приходят в панель оператора
  • Ответы оператора отображаются в виджете

Возможные ошибки​

Виджет не появляется​

Причина: Код не загружается или блокируется.

Решение:

  1. Проверьте, что код добавлен перед </body>
  2. Откройте консоль браузера (F12) и проверьте ошибки
  3. Убедитесь, что widget_loader.js загружается
  4. Проверьте, не блокирует ли его AdBlock

Ошибка CORS​

Причина: Сайт не добавлен в разрешённые домены.

Решение: Добавьте домен сайта в настройках организации (поле CLIENT_ORIGIN_URL).

Сообщения не отправляются​

Причина: Неверный organization_id или проблема с API.

Решение:

  1. Проверьте organization_id в коде виджета
  2. Убедитесь, что API сервер доступен
  3. Проверьте консоль браузера на ошибки

Дополнительная настройка​

Форма сбора контактов (Lead Generation)​

Настройте форму для сбора контактов перед началом чата:

  1. Включите «Форма сбора контактов»
  2. Настройте заголовок формы
  3. Выберите обязательные поля (имя, email, телефон)
  4. Сохраните изменения

Быстрые кнопки​

Добавьте кнопки с готовыми вопросами:

[
  {"text": "Узнать цены", "value": "Хочу узнать цены на услуги"},
  {"text": "Связаться с менеджером", "value": "Хочу связаться с менеджером"},
  {"text": "Техподдержка", "value": "У меня вопрос по технической поддержке"}
]

Политика конфиденциальности​

Добавьте ссылку на политику конфиденциальности:

  1. Включите «Показывать политику»
  2. Укажите URL политики конфиденциальности
  3. Посетители увидят ссылку в форме

Связанные руководства​