How to add chat widget to iframe

After you’ve published your bot in chat widget, you might need to add it to iframe. In Tovie DialogStudio, there are two different options to do it:

using a third-party script
using a custom event handler

Use a third-party script

To add your chat widget to iframe, you need to make a few steps.

Add the chat widget icon to the page. It should be hidden at the moment when the page loads. The element:

should include id="justwidget--asst-button"
should invoke justWidgetApi.open() at the button click

Add the “close” button. Should be hidden at the moment when the page loads.

should include id="justwidget--asst-close"
should invoke justWidgetApi.close() at the button click

Add iframe to the page. Should be hidden at the moment when the page loads:

should include id="justwidget--iframe
empty attribute src (src="")

Add the script to this page:

https://<servername>/chatadapter/s/iframe/justwidget-iframe.js

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:

Show details

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

After the widget is initialized you can add CSS styles:

justWidgetApi.addCustomStyles(<external_css_file_url>)

After the page has loaded completely, invoke:

justWidgetApi.init("<widget_token>")

Use a custom event handler

To add chat widget to iframe via a custom event handler:

Add the chat widget icon to the page. It should be hidden at the moment when the page loads. The element:

should include id="justwidget--asst-button"
should invoke justWidgetApi.open() at the button click`

Add the “close” button. Should be hidden at the moment when the page loads.

should include id="justwidget--asst-close"
should invoke justWidgetApi.close() at the button click

Add iframe to the page. Should be hidden at the moment when the page loads:

should include id="justwidget--iframe"
attribute src with contents, e.g.,

src="https://ds.tovie.ai/chatadapter/chatwidget/<chat_widget_token>/justwidget-iframe.html"

Add the following script to the page:

Show details

(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 also be set as follows:

Show details

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

After the widget is initialized you can add CSS styles:

justWidgetApi.addCustomStyles(<external_css_file_url>)

Use a third-party script​

Use a custom event handler​

Use a third-party script

Use a custom event handler