Чат-виджет: установка в 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_файла>)