Skip to main content

Chat widget: installation inside iframe

You can install a chat widget inside iframe using:

Installing inside iframe using an external script​

To embed a chat widget in a website inside iframe you need to:

  1. Add a chat widget icon to the page. At the time of page loading the icon should be hidden. The element:
    • must have id="justwidget--asst-button";
    • by clicking on the button should call justWidgetApi.open().
  2. Add a close button to the page. The button should be hidden at the time of page loading. Element:
    • must have id="justwidget--asst-close";
    • by clicking on the button should call justWidgetApi.close().
  3. Add to page <iframe>. At the time of page loading it should be hidden. Element:
    • must have id="justwidget--iframe";
    • empty attribute src (src="").
  4. Add script to the page:
https://platform.tovie.ai/chatadapter/s/iframe/justwidget-iframe.js
  1. Implement event handlers:
JustWidgetHandlers = {
    onWidgetReady: function () {
        //Widget loading occurred
        //Show the icon of the widget, add calls of `justWidgetApi.open()` and `justWidgetApi.close()` in the handlers for clicks on the buttons opening and closing the widget
    },
    onWidgetToggle: function (isOpen) {
        //The widget changed status — closed/open
        //boolean isOpen — status
        //Depending on the status hide icon and show 'iframe' and close button or vice versa
    },
    startBlink: function(title){
        //Notification of clients about a new message from a bot or agent
        //"New message" notification is displayed on a browser tab with the widget when the tab is not active.
    }
}

For example:

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. After initializing the widget, you can connect styles to it. To do this, call: justWidgetApi.addCustomStyles(<url_of_customstyles>)

  2. After a full page load you need to call justWidgetApi.init("<widget token>").

Installation inside iframe using custom handlers​

To embed a chat widget in a website inside iframe you need to:

  1. Add a chatwidget icon to the page. The page should be hidden at the time of page loading. The element:
    • must have id="justwidget--asst-button";
    • by clicking on the button should call justWidgetApi.open().
  2. Add a close button to the page. The page should be hidden at the time of page loading. The element:
    • must have id="justwidget--asst-close";
    • by clicking on the button should call justWidgetApi.close().
  3. Add to page <iframe>. At the time of page loading it should be hidden. The element:
    • must have id="justwidget--iframe";
    • filled src attribute, for example src="https://<servername>/chatadapter/chatwidget/<tokencache>/justwidget-iframe.html".
  4. Add a script to the page:
(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": {
                // Widget is ready to work, show widget icon
                JustWidgetHandlers.onWidgetReady();
                return;
            }
            case "justWidget.toggle": {
                // Widget state changing (open / closed)
                // message.data.isOpen - the new state of the widget
                // When opening (message.data.isOpen = true) hide the icon, show the iframe and closure button
                // When closing (message.data.isOpen = false) show the icon, hide the iframe and closure button
                JustWidgetHandlers.onWidgetToggle(message.data.isOpen);
                return;
            }
            case "justWidget.newMessage": {
                //Notification of clients about a new message from a bot or agent
                //"New message" notification is displayed on a browser tab with the widget when the tab is not active.
                JustWidgetHandlers.startBlink(message.title || 'New message');
                return;
            }
            default: {
                return;
            }
        }
    });
})();

switch (type) can be set, for example, as follows:

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 || 'New message');
        return;
    }
}
  1. After initializing the widget, you can connect styles to it. To do this, call: justWidgetApi.addCustomStyles(<url_of_customstyles>)

Configuring chat widget parameters when installing inside iframe​

To configure chat widget parameters when installing inside iframe:

  1. When installing inside iframe using an external script: in the onWidgetReady event handler, call the addJuswidgetVariables()method, for example:
justWidgetApi.addJuswidgetVariables({start: {
    id: "1ZuvLClIKGSzqH4RkXWpCYpgOTOZzTAAS46DHrlr8d0yV5pg2lGEk5V9ZK8yDI9v"
}});
  1. When installing inside iframe using custom handlers: change the script added to the page to a script with the addJuswidgetVariables method:
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. To configure the chat widget parameters after initialization, call the justWidgetApi.addJuswidgetVariables method, for example:
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;
    }
}