script>
console.log("💬 Chatbot widget script loaded");
function addChatbotWidget() {
const setupToken = "Eliska_realitas_central";
// Add viewport meta tag to prevent iPhone zooming
const viewportMeta = document.createElement('meta');
viewportMeta.name = 'viewport';
viewportMeta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no';
document.head.appendChild(viewportMeta);
// Add styles
const style = document.createElement('style');
style.innerHTML = `
@keyframes colorTransition {
0% { background-color: #523e29; }
100% { background-color: #806d59; }
}
#chatbot-widget {
position: fixed;
bottom: 20px;
right: 16px; /* moved to right side */
z-index: 9999;
text-align: center;
background: transparent;
display: flex;
flex-direction: column;
align-items: flex-end; /* align contents to the right edge */
}
#chatbot-widget img {
width: 175px;
height: 175px;
margin-bottom: -18px;
transition: bottom 0.5s ease-in-out;
}
#chatbot-buttons {
display: flex;
flex-direction: row;
gap: 8px;
align-items: center;
justify-content: flex-end; /* keep buttons flush to the right */
width: 100%;
}
#chatbot-button, #chatbot-close {
height: 60px;
background-color: #523e29;
color: #ffffff;
border: none;
border-radius: 6px;
font-size: 20px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
display: flex;
justify-content: center;
align-items: center;
animation: colorTransition 1.5s infinite alternate;
text-align: center;
font-weight: normal;
}
#chatbot-button {
width: 175px;
white-space: pre-line;
line-height: 1.2;
}
#chatbot-close {
width: 60px;
font-size: 26px;
display: none;
}
#chatbot-frame-wrapper {
position: fixed;
bottom: 90px;
right: 16px; /* moved to right side */
width: 450px;
height: calc(100vh - 110px);
border-radius: 12px;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
z-index: 9998;
overflow: hidden;
display: none;
touch-action: manipulation;
}
#chatbot-frame {
width: 100%;
height: 100%;
border: none;
}
@media only screen and (max-width: 600px) {
#chatbot-widget img {
width: 140px;
height: 140px;
margin-bottom: -22px;
}
#chatbot-frame-wrapper {
width: 100%;
height: 87%;
right: 0; /* full-width from right on mobile */
bottom: 90px;
border-radius: 0;
}
#chatbot-button {
width: 140px;
height: 55px;
font-size: 13px;
}
#chatbot-close {
width: 50px;
height: 55px;
font-size: 22px;
}
}
`;
document.head.appendChild(style);
// Widget container
const widget = document.createElement('div');
widget.id = 'chatbot-widget';
const img = document.createElement('img');
img.id = 'chatbot-lady';
img.src = 'https://best3ai.tech/wp-content/uploads/2024/01/upravena.png';
img.alt = 'Paní';
widget.appendChild(img);
const buttons = document.createElement('div');
buttons.id = 'chatbot-buttons';
// Create the buttons in the requested order:
// cross (left) — text button (right)
const close = document.createElement('button');
close.id = 'chatbot-close';
close.innerText = '×';
const button = document.createElement('button');
button.id = 'chatbot-button';
button.innerText = 'Dobrý den,\n s čím pomohu?';
// Append in left-to-right order: close then text button
buttons.appendChild(close);
buttons.appendChild(button);
widget.appendChild(buttons);
document.body.appendChild(widget);
const iframeWrapper = document.createElement('div');
iframeWrapper.id = 'chatbot-frame-wrapper';
const iframe = document.createElement('iframe');
iframe.id = 'chatbot-frame';
iframe.src = 'https://chatbot.nemoviq.cz/';
// Optional: for debugging iframe load
iframe.onload = function () {
console.log("✅ Chatbot iframe loaded");
};
iframeWrapper.appendChild(iframe);
document.body.appendChild(iframeWrapper);
let isChatVisible = false;
function sendTokenToIframe() {
for (let i = 0; i < 5; i++) {
setTimeout(() => {
console.log(`🔐 Sending token to iframe (attempt ${i + 1})`);
iframe.contentWindow.postMessage({ setupToken }, "https://chatbot.nemoviq.cz");
}, i * 1000);
}
}
function showChat() {
isChatVisible = true;
iframeWrapper.style.display = 'block';
close.style.display = 'flex';
sendTokenToIframe(); // Send token once chat is shown
const lady = document.getElementById('chatbot-lady');
lady.style.opacity = '0';
setTimeout(() => { lady.style.display = 'none'; }, 300);
}
function hideChat() {
isChatVisible = false;
iframeWrapper.style.display = 'none';
close.style.display = 'none';
const lady = document.getElementById('chatbot-lady');
lady.style.display = 'block';
setTimeout(() => { lady.style.opacity = '1'; }, 10);
}
button.addEventListener('click', () => {
isChatVisible ? hideChat() : showChat();
});
close.addEventListener('click', hideChat);
function preventBodyScrollWhileHoveringIframe(wrapper) {
wrapper.addEventListener('mouseenter', () => {
document.body.style.overflow = 'hidden';
});
wrapper.addEventListener('mouseleave', () => {
document.body.style.overflow = '';
});
wrapper.addEventListener('touchstart', () => {
document.body.style.overflow = 'hidden';
});
wrapper.addEventListener('touchend', () => {
document.body.style.overflow = '';
});
}
preventBodyScrollWhileHoveringIframe(iframeWrapper);
}
window.addEventListener('DOMContentLoaded', addChatbotWidget);