Большинство руководств по виджетам чата предполагают, что вы используете определенную платформу. Но фактический шаблон почти каждого виджета — это несколько строк простого JavaScript, помещенных прямо перед: HTML (функция(w,d){ https://widget.example.com/embed.js"; (Ил...
Большинство руководств по виджетам чата предполагают, что вы используете определенную платформу. Но фактический шаблон почти каждого виджета — это несколько строк простого JavaScript, помещенных прямо перед:
HTML
(функция(w,d){
var s = d.createElement('script');
s.src = "https://widget.example.com/embed.js";
с.асинк = правда;
с.дефер = правда;
d.body.appendChild(s);
})(окно, документ);
(Иллюстративный шаблон — замените фактический фрагмент вашего провайдера.)
Два атрибута, которые имеют значение: async и defer. Пропустите их, и скрипт может заблокировать рендеринг вашей страницы — причина №1 жалоб «этот виджет замедлил мой сайт».
Три вещи, которые сбивают людей с толку:
Маршрутизация SPA — скрипт запускается только один раз при начальной загрузке. Перемещайтесь между маршрутами в React/Vue, и виджет может исчезнуть, если вы не запустите его повторно при изменении маршрута.
Заголовки CSP — строгая политика безопасности контента автоматически блокирует скрипт, если домен виджета не внесен в список разрешенных. Никакой ошибки, просто отсутствует пузырь.
Особенности платформы — WordPress хочет плагин верхнего/нижнего колонтитула, Shopify хочет вставить его в theme.liquid, Wix нужна панель «Пользовательский код» (только для Премиум-плана).
Чтобы проверить его правильно: откройте вкладку «Сеть» и убедитесь, что скрипт загружается после вашей страницы.