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

Чат-виджет: установка в iframe

Вам может потребоваться установить чат-виджет в iframe. В Aimylogic это можно сделать двумя способами:

С использованием внешнего скрипта

Для встраивания на сайт чат виджета в iframe необходимо:

Добавить на страницу иконку чат виджета, на момент загрузки страницы должна быть скрыта.

Элемент:

  • должен иметь id="justwidget--asst-button"
  • по клику на кнопку должен вызыватьjustWidgetApi.open()

Добавить на страницу кнопку закрытия, на момент загрузки страницы должна быть скрыта. Элемент:

  • должен иметь id="justwidget--asst-close";
  • по клику на кнопку должен вызывать justWidgetApi.close()

Добавить на страницу iframe, который должен быть скрыт на момент загрузки страницы. Элемент:

  • должен иметь id="justwidget--iframe"
  • пустой атрибут src (src="")

Добавить на страницу скрипт:

https://bot.aimylogic.com/s/iframe/justwidget-iframe.js

Имплементировать обработчики событий:

JustWidgetHandlers = {
onWidgetReady: function () {
//Произошла загрузка виджета
//Показать кнопку-иконку виджета, добавить вызовы `justWidgetApi.open()` и `justWidgetApi.close()` в обработчики кликов по кнопкам открытия и закрытия виджета
},
onWidgetToggle: function (isOpen) {
//Виджет изменил статус закрыт/открыт
//boolean isOpen — статус
//В зависимости от статуса скрывать иконку и показывать `iframe` и кнопку закрытия или наоборот
},
startBlink: function(title){
//Оповещение о новом сообщении от бота или оператора
//Отображается текст «Новое сообщение» на вкладке браузера с виджетом, когда вкладка не активна
}
}

Например:

Развернуть
var JustWidget_isPageBlured = false;
var JustWidget_pageTitle = document.title;
var JustWidget_blinkInterval = 0;

JustWidgetHandlers = {
onWidgetReady: function () {
showElementById("justwidget--asst-button");
document.getElementById("justwidget--asst-button").addEventListener('click', function () {
justWidgetApi.open();
});
document.getElementById("justwidget--asst-close").addEventListener('click', function () {
justWidgetApi.close();
});
},
onWidgetToggle: function (isOpen) {
if (isOpen) {
hideElementById("justwidget--asst-button");
showElementById("justwidget--asst-close");
showElementById("justwidget--iframe");
} else {
showElementById("justwidget--asst-button");
hideElementById("justwidget--asst-close");
hideElementById("justwidget--iframe");
}
},
startBlink: function(title){
clearInterval(JustWidget_blinkInterval);
if(JustWidget_isPageBlured){
JustWidget_blinkInterval = setInterval(function(){
if(document.title !== title) {
JustWidget_pageTitle = document.title
}
document.title = document.title === title ? JustWidget_pageTitle : title;
}, 750)
}
}
}

После инициализации виджета вы можете подключить к нему стили. Для этого вызовите:

justWidgetApi.addCustomStyles(<url_внешнего_css_файла>)

После полной загрузки страницы вызовите

justWidgetApi.init("<токен_виджета>")

С использованием кастомных обработчиков

Для встраивания на сайт чат-виджета в iframe необходимо:

Добавить на страницу иконку чат-виджета, на момент загрузки страницы должна быть скрыта.

Элемент:

  • должен иметь id="justwidget--asst-button";
  • по клику на кнопку должен вызывать justWidgetApi.open()

Добавить на страницу кнопку закрытия, на момент загрузки страницы должна быть скрыта.

Элемент:

  • должен иметь id="justwidget--asst-close"
  • по клику на кнопку должен вызывать justWidgetApi.close()

Добавить на страницу iframe, на момент загрузки страницы должен быть скрыт. Элемент:

  • должен иметь id="justwidget--iframe"
  • и заполненный атрибут src, например
src="https://<имя_сервера>/chatadapter/chatwidget/<токен_чат-виджета>/justwidget-iframe.html"

Добавить на страницу скрипт:

Развернуть
(function () {
window.justWidgetApi = {
getTargetOrigin: function () {
var justWidgetIframeSrc = document.getElementById('justwidget--iframe').src;
var srcParts = justWidgetIframeSrc.split('/');
return srcParts.splice(0, 3).join('/');
},
postMessage: function (message) {
var justWidgetIframe = document.getElementById('justwidget--iframe').contentWindow;
justWidgetIframe.postMessage(message, this.getTargetOrigin());
},
open: function () {
var message = {
type: 'justWidget.open'
};

this.postMessage(JSON.stringify(message));
},
close: function () {
var message = {
type: 'justWidget.close'
};

this.postMessage(JSON.stringify(message));
},
addCustomStyles: function (stylesheetURL) {
var message = {
type: 'justWidget.styles',
data: {
URL: stylesheetURL
}
};

this.postMessage(JSON.stringify(message));
},
};

window.addEventListener("message", function (event) {
var type, message;

try {
message = JSON.parse(event.data);
type = message.type;
} catch (e) {
console.error("JustWidget invalid Event.data event.data: " + event.data);
}

switch (type) {
case "justWidget.ready": {
// Виджет готов к работе, показать иконку виджета
JustWidgetHandlers.onWidgetReady();
return;
}
case "justWidget.toggle": {
// Изменение состояния виджета (открыт/закрыт)
// message.data.isOpen - новое состояние виджета
// При открытии (message.data.isOpen = true) скрыть иконку, показать iframe и кнопку закрытия
// При закрытии (message.data.isOpen = false) показать иконку, скрыть iframe и кнопку закрытия
JustWidgetHandlers.onWidgetToggle(message.data.isOpen);
return;
}
case "justWidget.newMessage": {
//Оповещение о новом сообщении от бота или оператора
//Отображается текст «Новое сообщение» на вкладке браузера с виджетом, когда вкладка не активна
JustWidgetHandlers.startBlink(message.title || 'Новое сообщение');
return;
}
default: {
return;
}
}
});
})();

switch (type) можно, например, задать так:

Развернуть
switch (type) {
case "justWidget.ready": {
showElementById("justwidget--asst-button");
document.getElementById("justwidget--asst-button").addEventListener('click', function () {
justWidgetApi.open();
});
document.getElementById("justwidget--asst-close").addEventListener('click', function () {
justWidgetApi.close();
});
return;
}
case "justWidget.toggle": {
if (message.data.isOpen) {
hideElementById("justwidget--asst-button");
showElementById("justwidget--asst-close");
showElementById("justwidget--iframe");
} else {
showElementById("justwidget--asst-button");
hideElementById("justwidget--asst-close");
hideElementById("justwidget--iframe");
}
return;
}
case "justWidget.newMessage": {
JustWidgetHandlers.startBlink(message.title || 'Новое сообщение');
return;
}
}

После инициализации виджета вы можете подключить к нему стили. Для этого вызовите:

justWidgetApi.addCustomStyles(<url_внешнего_css_файла>)