There is a button inside the dialog to open the widget on both of them. Our problem is we want to use the dialog as a modal, but because we can control where to attach the widget elements, it can’t appear over a fullscreen dialog. Only the elements inside the dialog are visible on it when it is opened."
Locally Reproducible: (Yes/No):
code implemented:
<!doctype html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<style>
body {
margin: 0;
padding: 0;
}
#custom_fc_button {
width: 10%;
position: absolute;
right: 1px;
bottom: 20px;
}
dialog {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
background-color: #fabada;
}
</style>
</head>
<body>
<div id="custom_fc_button" style="visibility:hidden;">
<button type="button" id="open_fc_widget" onClick="openWidget()" style="cursor:pointer;">open widget outside</button>
</div>
<dialog>
<h1>I am an HTML dialog as a modal, over the top of any other dialogs that might be present. Interaction outside the dialog is blocked.</h1>
<button type="button" onClick="openWidget()">Open widget inside</button>
</dialog>
<script>
window.fcSettings = {
token: "8d3a4a04-5562-4f59-8f66-f84a269897a1",
host: "https://wchat.freshchat.com",
config: {
headerProperty: {
hideChatButton: true
}
},
onInit: function() {
window.fcWidget.on("widget:loaded",function() {
document.getElementById('custom_fc_button').style.visibility = 'visible';
window.fcWidget.on("unreadCount:notify", function(resp) {
console.log(resp);
test = resp;
});
window.fcWidget.on("widget:closed", function() {
document.getElementById('fc_frame').style.visibility = 'hidden';
document.getElementById('open_fc_widget').style.visibility = 'visible';
});
window.fcWidget.on("widget:opened", function(resp) {
document.getElementById('open_fc_widget').style.visibility = 'hidden';
});
});
}
};
var openWidget = function() {
document.getElementById('fc_frame').style.visibility = 'visible';
window.fcWidget.open();
};
window.onload = function() {
// with modal
document.querySelector('dialog').showModal();
// no modal
// document.querySelector('dialog').show();
}
</script>
<script src="https://wchat.freshchat.com/js/widget.js" async></script>
</body>
</html>