Виджет на сайт: установка и аналитика

1. Соберите виджет

1. Откройте Виджет на сайт в личном кабинете и нажмите «Добавить сайт».
2. Укажите домен сайта и выберите каналы, которые увидит посетитель.
3. Для личного Telegram можно настроить шаблон первого сообщения — плейсхолдер {code} в нём превращается в номер обращения, по которому мы определяем UTM-метки. Если удалить {code}, метки по этому каналу передаваться не будут.

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

Нажмите «Скопировать код» и вставьте строку перед закрывающим тегом </body> на всех страницах сайта (в большинстве систем управления сайтом — один раз в шаблоне сайта).

После установки кнопка появится в правом нижнем углу. В карточке виджета вы увидите, на каких доменах он реально загружается: вкладка «Мои сайты» — ваш домен, «Неизвестные» — все остальные. Показ на неизвестных доменах можно заблокировать одним переключателем.

3. Откуда в CRM берутся UTM-метки

Когда посетитель открывает виджет, мы запоминаем его UTM-метки, страницу и источник перехода и выдаём короткий номер обращения. Он уезжает вместе с первым сообщением: у ботов — незаметно, у личного Telegram — в тексте вида #w3fA9kQ2x (просьба к клиенту его не удалять — она уже в шаблоне). Как только сообщение доходит до вашей Открытой линии, под текстом клиента появляется блок «Источник»: сайт, метки, страница. Метки первого визита хранятся 30 дней — если посетитель вернётся напрямую и напишет, реклама всё равно будет засчитана.

4. Оформление и параметры показа

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

• Текст — заголовок окна (до 60 символов) и текст под ним.
• Оформление — цвет фона и цвет текста (или «Авто» — читаемый цвет подберётся сам), положение кнопки слева/справа, ваш логотип в шапке окна и подпись «Работает на MyConnecto», которую можно отключить.
• Параметры показа — на каких устройствах показывать (телефон/компьютер) и когда открывать окно самому: через N секунд на сайте, после прокрутки на X% или когда посетитель уводит курсор с вкладки. Автооткрытие срабатывает не чаще одного раза за визит, закрытое посетителем окно повторно не открывается.

5. Яндекс.Метрика и Google Analytics

Счётчики подключаются в настройках виджета — вкладка «Аналитика» в окне «Вид окна». Укажите номер счётчика Метрики (только цифры, найдёте его в списке счётчиков на metrika.yandex.ru) и/или идентификатор потока GA4 (формат G-XXXXXXX). События уходят только в подключённые счётчики:

1. Метрика без токена: цели создайте вручную — Настройки счётчика → Цели → «Добавить цель» → тип «JavaScript-событие», идентификатор из таблицы (например mcw_open).
2. Google Analytics 4: события приходят с теми же именами — в разделе Администратор → События отметьте нужные как ключевые (конверсии).

Для собственных скриптов виджет дополнительно генерирует браузерное событие myconnecto:widget на window с именем цели в event.detail.goal.

6. Для разработчиков: события и API виджета

Скрипты вашего сайта могут слушать виджет и управлять им. Каждое действие виджета сопровождается браузерным событием myconnecto:widget на window; имя действия — в event.detail.goal:

Управление — методы глобального объекта window.MyConnectoWidget: open(), close(), toggle(). До события mcw_ready вызовы безопасны и просто ничего не делают. Пример — открыть виджет своей кнопкой:

window.addEventListener('myconnecto:widget', (e) => {
  if (e.detail.goal === 'mcw_ready') {
    document.querySelector('#my-contact-btn')
      .addEventListener('click', () => window.MyConnectoWidget.open())
  }
})

7. Оптимизация под поисковую выдачу (SEO)

С включённой настройкой «Оптимизация под поисковую выдачу (SEO)» скрипт виджета срабатывает не сразу, а через 3 секунды после полной загрузки страницы — так виджет не влияет на скорость сайта в Google PageSpeed и не портит позиции в поиске. Посетитель разницы почти не замечает: кнопка появляется, когда страница уже прочитана.