Simple Chat Widget Test Page
This is a test page for the chat widget. Click the chat button in the bottom right corner to open the chat.
/* Basic styling for the chat widget */
#chat-widget-container {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
font-family: Arial, sans-serif;
}
.chat-button {
width: 56px;
height: 56px;
border-radius: 50%;
background-color: #4F46E5;
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
transition: transform 0.3s ease;
}
.chat-button:hover {
transform: scale(1.05);
}
.chat-frame {
width: 350px;
height: 500px;
border: none;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
margin-bottom: 15px;
display: none;
}
Simple Chat Widget Test Page
This is a test page for the chat widget. Click the chat button in the bottom right corner to open the chat.
document.addEventListener(‘DOMContentLoaded’, function() {
const button = document.getElementById(‘chat-button’);
const frameContainer = document.getElementById(‘chat-frame-container’);
let chatFrame = null;
let chatOpen = false;
// Create chat iframe when button is first clicked (lazy loading)
function createChatFrame() {
if (!chatFrame) {
chatFrame = document.createElement(‘iframe’);
chatFrame.className = ‘chat-frame’;
// This URL should point to your chat page
// Since this is a test, we’re using a placeholder
chatFrame.src = “about:blank”;
frameContainer.appendChild(chatFrame);
// For testing – add content to the iframe
setTimeout(() => {
try {
const frameDoc = chatFrame.contentDocument || chatFrame.contentWindow.document;
frameDoc.body.innerHTML = `
Hello! How can I help you today?
style=”width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;”>
`;
} catch (e) {
console.error(“Could not modify iframe content:”, e);
}
}, 100);
}
}
// Toggle chat visibility when button is clicked
button.addEventListener(‘click’, function() {
if (!chatFrame) {
createChatFrame();
}
chatOpen = !chatOpen;
chatFrame.style.display = chatOpen ? ‘block’ : ‘none’;
// Change button icon when chat is open
if (chatOpen) {
button.innerHTML = ‘’;
} else {
button.innerHTML = ‘’;
}
});
});
