Кейсы
Встраиваем виджет
Добавьте AIVA на сайт через loader.js и API AivaWidget
Виджет сайта подключается через публичный loader https://widget.aiva.chat/loader.js. После загрузки он создаёт глобальный объект AivaWidget с двумя режимами:
AivaWidget.render(widgetId, options?)для готового UIAivaWidget.connect(widgetId, options?)для headless-интеграции
widgetId берётся из карточки канала типа “Website widget” в консоли.
Минимальный пример
<script>
(function(w,d,s,u,i){var o=w[i]||{},q=o._q||[];o._q=q;o.l=+new Date();function stub(m){return function(){var a=arguments;return new Promise(function(r,j){q.push({method:m,args:[].slice.call(a),resolve:r,reject:j})})}}o.connect=o.connect||stub("connect");o.render=o.render||stub("render");w[i]=o;var e=d.createElement(s),a=d.getElementsByTagName(s)[0];e.async=1;e.src=u;if(a)a.parentNode.insertBefore(e,a);else d.head.appendChild(e)})(window,document,"script","https://widget.aiva.chat/loader.js","AivaWidget");
</script>
<script>
AivaWidget.render("<UUID_WIDGET>");
</script>
Такой сниппет подключает готовый плавающий чат в правом нижнем углу сайта.
Inline-режим
Если виджет нужно встроить в конкретный контейнер на странице, передайте containerId:
<div id="support-chat" style="height: 520px;"></div>
<script>
(function(w,d,s,u,i){var o=w[i]||{},q=o._q||[];o._q=q;o.l=+new Date();function stub(m){return function(){var a=arguments;return new Promise(function(r,j){q.push({method:m,args:[].slice.call(a),resolve:r,reject:j})})}}o.connect=o.connect||stub("connect");o.render=o.render||stub("render");w[i]=o;var e=d.createElement(s),a=d.getElementsByTagName(s)[0];e.async=1;e.src=u;if(a)a.parentNode.insertBefore(e,a);else d.head.appendChild(e)})(window,document,"script","https://widget.aiva.chat/loader.js","AivaWidget");
</script>
<script>
AivaWidget.render("<UUID_WIDGET>", { containerId: "support-chat" });
</script>
Headless-режим
Если нужен полностью кастомный интерфейс, используйте connect() и рисуйте сообщения сами:
<script>
(function(w,d,s,u,i){var o=w[i]||{},q=o._q||[];o._q=q;o.l=+new Date();function stub(m){return function(){var a=arguments;return new Promise(function(r,j){q.push({method:m,args:[].slice.call(a),resolve:r,reject:j})})}}o.connect=o.connect||stub("connect");o.render=o.render||stub("render");w[i]=o;var e=d.createElement(s),a=d.getElementsByTagName(s)[0];e.async=1;e.src=u;if(a)a.parentNode.insertBefore(e,a);else d.head.appendChild(e)})(window,document,"script","https://widget.aiva.chat/loader.js","AivaWidget");
</script>
<script>
async function main() {
const client = await AivaWidget.connect("<UUID_WIDGET>");
client.onMessages((messages) => {
console.log(messages);
});
client.onStatus((status) => {
console.log(status.phase, status.error);
});
}
main();
</script>
Статус содержит прежние флаги isSending и isWaiting, а также поле phase для более точного управления состоянием.
Что важно проверить перед публикацией
- В консоли для виджета должен быть настроен правильный
widgetId. - В allowlist должны быть добавлены домены, на которых виджет разрешён.
- На сайт нужно вставлять именно
https://widget.aiva.chat/loader.js, а не старыеembed.jsили версионированные iframe-сниппеты.