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

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

Установить чат-виджет в iframe можно с использованием:

  1. внешнего скрипта;
  2. кастомных обработчиков.

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

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

  1. Добавить на страницу иконку чат-виджета, на момент загрузки страницы должна быть скрыта. Элемент:
    • должен иметь id="justwidget--asst-button";
    • по клику на кнопку должен вызывать justWidgetApi.open().
  2. Добавить на страницу кнопку закрытия, на момент загрузки страницы должна быть скрыта. Элемент:
    • должен иметь id="justwidget--asst-close";
    • по клику на кнопку должен вызывать justWidgetApi.close().
  3. Добавить на страницу <iframe>, на момент загрузки страницы должен быть скрыт. Элемент:
    • должен иметь id="justwidget--iframe";
    • пустой атрибут src (src="").
  4. Добавить на страницу скрипт:
https://bot.jaicp.com/s/iframe/justwidget-iframe.js
  1. Имплементировать обработчики событий:
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)
        }
    }
}

  1. После инициализации виджета вы можете подключить к нему стили. Для этого вызовите: justWidgetApi.addCustomStyles(<url_внешнего_css_файла>).

  2. После полной загрузки страницы вызывать justWidgetApi.init("<токен_виджета>").

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

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

  1. Добавить на страницу иконку чат-виджета, на момент загрузки страницы должна быть скрыта. Элемент:
    • должен иметь id="justwidget--asst-button";
    • по клику на кнопку должен вызывать justWidgetApi.open().
  2. Добавить на страницу кнопку закрытия, на момент загрузки страницы должна быть скрыта. Элемент:
    • должен иметь id="justwidget--asst-close";
    • по клику на кнопку должен вызывать justWidgetApi.close().
  3. Добавить на страницу <iframe>, на момент загрузки страницы должен быть скрыт. Элемент:
    • должен иметь id="justwidget--iframe";
    • заполненный атрибут src, например src="https://<имя_сервера>/chatadapter/chatwidget/<токен_чат-виджета>/justwidget-iframe.html".
  4. Добавить на страницу скрипт:
(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;
    }
}
  1. После инициализации виджета вы можете подключить к нему стили. Для этого вызовите: justWidgetApi.addCustomStyles(<url_внешнего_css_файла>).

Настройка параметров чат-виджета при установке в iframe​

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

  1. При установке в iframe с использованием внешнего скрипта: в обработчике событий onWidgetReady вызовите метод addJuswidgetVariables(), например:
justWidgetApi.addJuswidgetVariables({start: {
    id: "1ZuvLClIKGSzqH4RkXWpCYpgOTOZzTAAS46DHrlr8d0yV5pg2lGEk5V9ZK8yDI9v"
}});
  1. При установке в iframe с использованием кастомных обработчиков: измените добавляемый на страницу скрипт на скрипт с методом addJuswidgetVariables:
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));
        },
        addJuswidgetVariables: function (juswidgetVariablesObj) {
            var message = {
                type: 'justWidget.variables',
                data: {
                    juswidgetVariables: juswidgetVariablesObj
                }
            };

            this.postMessage(JSON.stringify(message));
        },
    };
})();
  1. Для настройки параметров чат-виджета после инициализации вызовите метод justWidgetApi.addJuswidgetVariables, например:
switch (type) {
    case "justWidget.ready": {
        justWidgetApi.addJuswidgetVariables({start: {
            id: "1ZuvLClIKGSzqH4RkXWpCYpgOTOZzTAAS46DHrlr8d0yV5pg2lGEk5V9ZK8yDI9v"
        }});

        justWidgetApi.addCustomStyles('https://use.fontawesome.com/releases/v5.7.1/css/all.css');

        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;
    }
}