// Create the modal container
const modalContainer = document.createElement('div');
modalContainer.id = 'modal-container';
modalContainer.className = 'mainChatFrame';
// Create the modal content
const modalContent = document.createElement('div');
modalContent.id = 'modal-content';
// Create the close button
const closeButton = document.createElement('span');
closeButton.id = 'close-button';
closeButton.innerHTML = '×';
// Create the chatbot iframe
const chatbotIframe = document.createElement('iframe');
chatbotIframe.id = 'connectPlexChatBotiFrame';
chatbotIframe.src = 'https://connectplex.ai/embedChatView/472-8a997';
//chatbotIframe.src = 'http://192.168.0.90:3000/embedChatView/472-8a997';
chatbotIframe.frameborder = '0';
chatbotIframe.allow = 'microphone; camera';
// Append elements to the modal container
modalContent.appendChild(closeButton);
modalContent.appendChild(chatbotIframe);
modalContainer.appendChild(modalContent);
modalContainer.style.zIndex = "999999";
// Append modal container to the document body
document.body.appendChild(modalContainer);
chatbotIframe.onload = function () {
const iframeWindow = chatbotIframe.contentWindow;
// Add an event listener for click events on all anchor elements inside the iframe
iframeWindow.document.addEventListener('click', function (event) {
const target = event.target;
// Check if the clicked element is an anchor tag with target="_blank"
if (target.tagName === 'A' && target.getAttribute('target') === '_blank') {
event.preventDefault(); // Prevent default behavior of opening in the iframe
// Open the link in a new tab
window.open(target.href, '_blank');
}
});
};
// Create the icon button
const iconButton = document.createElement('div');
iconButton.id = 'icon-button';
iconButton.style.zIndex = '99999';
// Create the icon image
const iconImage = document.createElement('img');
iconImage.src = 'https://connectplex.ai/assets/pcustom/embedChat/connectplexChat2.svg';
iconImage.alt = 'Chat Icon';
// Append icon image to the icon button
iconButton.appendChild(iconImage);
// Append icon button to the document body
document.body.appendChild(iconButton);
// Function to open the modal
var firstTimeOpen = 1;
function openModal() {
modalContainer.style.display = 'block';
var iFrameWindow = chatbotIframe.contentWindow;
if (firstTimeOpen == 0) {
iFrameWindow.postMessage('chatPopupOpen', '*');
} else {
iFrameWindow.postMessage('firstTimeChatPopupOpen', '*');
firstTimeOpen = 0;
}
}
// Function to close the modal
function closeModal() {
modalContainer.style.display = 'none';
var iFrameWindow = chatbotIframe.contentWindow;
iFrameWindow.postMessage('chatPopupClose', '*');
document.cookie = "chatPopup=1; path=/;";
}
// Event listener for the close button
closeButton.addEventListener('click', closeModal);
// Event listener for showing the modal
iconButton.addEventListener('click', openModal);
// Inject CSS styles
const cssStyles = `
#modal-container {
position: fixed;
bottom: 20px;
right: 20px;
width: 420px; /* Adjust the width as needed */
height: 556px; /* Adjust the height as needed */
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-radius: 4px;
z-index: 9999;
display: none;
}
#modal-content {
position: relative;
width: 100%;
height: 100%;
}
#close-button {
position: absolute;
top: 20px;
right: 20px;
font-size: 30px;
color: #444;
cursor: pointer;
}
#icon-button {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
/*background-color: #eaeaea;*/
border-radius: 50%;
cursor: pointer;
/* Add your icon styles here */
}
#icon-button:hover {
background-color: #ccc;
}
#icon-button img {
width: 100%;
height: 100%;
object-fit: contain;
}
@media (max-width: 520px) {
.mainChatFrame {
width: 100% !important;
bottom: 0px !important;
}
}
#connectPlexChatBotiFrame {
height: 100%;
width:100%;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-radius: 4px;
border-width: 0px
}
`;
const styleElement = document.createElement('style');
styleElement.innerHTML = cssStyles;
document.head.appendChild(styleElement);
var isMobile = window.innerWidth < 768;
if (isMobile) {
modalContainer.style.bottom=20;
modalContainer.style.right=0;
}