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