Not allow<!-- Embed this in your customer-facing pages -->
<!-- Place before </body> tag -->

<div id="cf-chat-widget" class="font-sans antialiased z-[9999] relative">

    <button id="cf-toggle-btn" class="fixed bottom-6 right-6 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full w-14 h-14 md:w-16 md:h-16 flex items-center justify-center shadow-2xl transition-all transform hover:scale-105 z-[9999]">
        <svg id="cf-icon-open" class="w-7 h-7 md:w-8 md:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
        <svg id="cf-icon-close" class="w-7 h-7 md:w-8 md:h-8 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
        <span id="cf-badge" class="hidden absolute -top-1 -right-1 bg-red-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center border-2 border-white shadow-sm">0</span>
    </button>

    <div id="cf-chat-window" class="hidden fixed inset-0 md:inset-auto md:bottom-24 md:right-6 md:w-[380px] md:h-[600px] bg-white md:rounded-2xl shadow-2xl z-[9998] flex flex-col overflow-hidden transition-all duration-300 origin-bottom-right">
        
        <div class="bg-indigo-600 text-white p-4 flex items-center justify-between shrink-0 shadow-md relative z-10">
            <div class="flex items-center gap-3">
                <div class="relative">
                    <div class="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path></svg>
                    </div>
                    <div id="cf-status-dot" class="absolute bottom-0 right-0 w-3 h-3 bg-gray-400 border-2 border-indigo-600 rounded-full"></div>
                </div>
                <div>
                    <h3 class="font-bold text-lg leading-tight">Support</h3>
                    <p id="cf-status-text" class="text-xs text-indigo-100 opacity-90">Connecting...</p>
                </div>
            </div>
            
            <div class="flex items-center gap-1">
                <button id="cf-btn-minimize" class="p-2 hover:bg-white/10 rounded-lg transition text-white/80 hover:text-white">
                    <svg class="w-6 h-6 md:w-5 md:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                </button>
            </div>
        </div>

        <div class="flex-1 flex flex-col overflow-hidden relative bg-gray-50">
            
            <div id="cf-view-start" class="absolute inset-0 z-20 bg-gray-50 flex flex-col justify-center p-6 overflow-y-auto">
                <div class="text-center mb-8">
                    <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center mx-auto mb-4 shadow-sm">
                        <svg class="w-8 h-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
                    </div>
                    <h2 class="text-xl font-bold text-gray-900 mb-2">Welcome!</h2>
                    <p class="text-sm text-gray-500" id="cf-welcome-text">Please fill out the form below to start chatting with our team.</p>
                </div>
                
                <form id="cf-form-start" class="space-y-4">
                    <input type="text" id="cf-input-name" required class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white text-gray-900 shadow-sm outline-none transition" placeholder="Your Name">
                    <input type="email" id="cf-input-email" required class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white text-gray-900 shadow-sm outline-none transition" placeholder="Your Email">
                    
                    <div id="cf-group-offline" class="hidden">
                        <textarea id="cf-input-message" rows="3" class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white text-gray-900 shadow-sm outline-none transition resize-none" placeholder="How can we help you?"></textarea>
                    </div>

                    <button type="submit" id="cf-btn-start" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3.5 rounded-xl shadow-lg shadow-indigo-200 transition-all transform active:scale-95">
                        Start Conversation
                    </button>
                </form>
            </div>

            <div id="cf-view-chat" class="hidden flex-1 flex flex-col h-full bg-gray-50">
                <div id="cf-messages" class="flex-1 overflow-y-auto p-4 space-y-4 scroll-smooth"></div>
                
                <div id="cf-typing" class="hidden px-4 py-1 text-xs text-gray-400 italic bg-gray-50">
                    Support is typing...
                </div>
                
                <div class="p-3 bg-white border-t border-gray-200 pb-safe">
                    <div class="flex gap-2 items-end">
                        <textarea id="cf-input-chat" rows="1" class="flex-1 px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-gray-50 max-h-32 resize-none outline-none text-sm" placeholder="Type a message..."></textarea>
                        <button id="cf-btn-send" class="bg-indigo-600 hover:bg-indigo-700 text-white p-3 rounded-xl shadow-md transition-all active:scale-95 flex-shrink-0">
                            <svg class="w-5 h-5 transform rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
                        </button>
                    </div>
                    <div class="text-center mt-2">
                        <button id="cf-btn-end" class="text-xs text-gray-400 hover:text-red-500 transition underline decoration-gray-300 underline-offset-2">End Conversation</button>
                    </div>
                </div>
            </div>

            <div id="cf-view-success" class="hidden absolute inset-0 z-30 bg-white flex flex-col items-center justify-center p-6 text-center">
                <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6 animate-bounce">
                    <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">Message Sent!</h3>
                <p class="text-gray-500 text-sm mb-8 leading-relaxed">We've received your message. A support ticket has been created and we will email you shortly.</p>
                <button onclick="location.reload()" class="text-indigo-600 font-semibold hover:text-indigo-800 transition">Close Window</button>
            </div>

        </div>
    </div>
</div>

<style>
    /* Mobile Safe Area */
    .pb-safe { padding-bottom: env(safe-area-inset-bottom, 1rem); }
    
    /* Animations */
    #cf-chat-window { will-change: transform, opacity; }
    
    /* Fade In Message */
    .cf-msg-anim { animation: cfFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; opacity: 0; transform: translateY(10px); }
    @keyframes cfFadeIn { to { opacity: 1; transform: translateY(0); } }

    /* Mobile Slide Up */
    @media (max-width: 768px) {
        @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
        #cf-chat-window:not(.hidden) { animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
    }
</style>

<script>
(function() {
    // CONFIGURATION
    const API_URL = 'https://help.cloudfam.io/api/chat.php'; // Change this if needed
    
    // STATE
    let sessionId = localStorage.getItem('cf_session_id');
    let visitorInfo = JSON.parse(localStorage.getItem('cf_visitor_info') || 'null');
    let pollTimer = null;
    let lastMsgId = 0;
    let isTyping = false;
    let typeTimer;

    // DOM ELEMENTS
    const els = {
        widget: document.getElementById('cf-chat-widget'),
        btnToggle: document.getElementById('cf-toggle-btn'),
        iconOpen: document.getElementById('cf-icon-open'),
        iconClose: document.getElementById('cf-icon-close'),
        badge: document.getElementById('cf-badge'),
        window: document.getElementById('cf-chat-window'),
        btnMin: document.getElementById('cf-btn-minimize'),
        
        statusDot: document.getElementById('cf-status-dot'),
        statusText: document.getElementById('cf-status-text'),
        
        viewStart: document.getElementById('cf-view-start'),
        formStart: document.getElementById('cf-form-start'),
        inputName: document.getElementById('cf-input-name'),
        inputEmail: document.getElementById('cf-input-email'),
        inputMsg: document.getElementById('cf-input-message'),
        btnStart: document.getElementById('cf-btn-start'),
        groupOffline: document.getElementById('cf-group-offline'),
        welcomeText: document.getElementById('cf-welcome-text'),
        
        viewChat: document.getElementById('cf-view-chat'),
        msgsArea: document.getElementById('cf-messages'),
        inputChat: document.getElementById('cf-input-chat'),
        btnSend: document.getElementById('cf-btn-send'),
        btnEnd: document.getElementById('cf-btn-end'),
        typing: document.getElementById('cf-typing'),
        
        viewSuccess: document.getElementById('cf-view-success')
    };

    // INIT
    function init() {
        if (visitorInfo) {
            els.inputName.value = visitorInfo.name;
            els.inputEmail.value = visitorInfo.email;
        }

        if (sessionId) {
            showChat();
            startPolling();
        } else {
            fetchStatus();
        }

        addListeners();
    }

    function addListeners() {
        els.btnToggle.onclick = toggleWindow;
        els.btnMin.onclick = toggleWindow;
        els.formStart.onsubmit = startChat;
        els.btnSend.onclick = sendMessage;
        els.btnEnd.onclick = endChat;
        
        els.inputChat.onkeypress = (e) => {
            if(e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); }
        };

        els.inputChat.oninput = () => {
            if(!isTyping) { isTyping = true; sendTyping(true); }
            clearTimeout(typeTimer);
            typeTimer = setTimeout(() => { isTyping = false; sendTyping(false); }, 1000);
            
            // Auto resize height
            els.inputChat.style.height = 'auto';
            els.inputChat.style.height = els.inputChat.scrollHeight + 'px';
        };
    }

    // ACTIONS
    function toggleWindow() {
        const isHidden = els.window.classList.contains('hidden');
        if (isHidden) {
            els.window.classList.remove('hidden');
            els.iconOpen.classList.add('hidden');
            els.iconClose.classList.remove('hidden');
            els.badge.classList.add('hidden');
            els.badge.textContent = '0';
            scrollToBottom();
        } else {
            els.window.classList.add('hidden');
            els.iconOpen.classList.remove('hidden');
            els.iconClose.classList.add('hidden');
        }
    }

    async function fetchStatus() {
        try {
            const res = await fetch(`${API_URL}?action=check_status`);
            const data = await res.json();
            
            if (data.status === 'offline') {
                els.statusText.innerText = "We are currently offline";
                els.statusDot.classList.replace('bg-green-400', 'bg-gray-400');
                els.welcomeText.innerText = data.message;
                els.btnStart.innerText = "Send Message";
                els.groupOffline.classList.remove('hidden');
                els.inputMsg.required = true;
            } else {
                els.statusText.innerText = "We are online";
                els.statusDot.classList.replace('bg-gray-400', 'bg-green-400');
                els.btnStart.innerText = "Start Conversation";
                els.groupOffline.classList.add('hidden');
                els.inputMsg.required = false;
            }
        } catch (e) { console.error(e); }
    }

    async function startChat(e) {
        e.preventDefault();
        els.btnStart.disabled = true;
        els.btnStart.innerText = "Connecting...";

        const payload = {
            action: 'start_chat',
            name: els.inputName.value,
            email: els.inputEmail.value,
            initial_message: els.inputMsg.value
        };

        try {
            const res = await fetch(API_URL, {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(payload)
            });
            const data = await res.json();

            if (data.success) {
                localStorage.setItem('cf_visitor_info', JSON.stringify({name: payload.name, email: payload.email}));
                
                if (data.mode === 'offline') {
                    els.viewStart.classList.add('hidden');
                    els.viewSuccess.classList.remove('hidden');
                } else {
                    sessionId = data.session_id;
                    localStorage.setItem('cf_session_id', sessionId);
                    showChat();
                    startPolling();
                }
            } else {
                alert(data.message || "Error starting chat");
            }
        } catch (e) { alert("Connection Error"); }
        
        els.btnStart.disabled = false;
        // Reset text based on visibility of offline field
        els.btnStart.innerText = els.groupOffline.classList.contains('hidden') ? "Start Conversation" : "Send Message";
    }

    async function sendMessage() {
        const txt = els.inputChat.value.trim();
        if (!txt || !sessionId) return;

        els.inputChat.value = '';
        els.inputChat.style.height = 'auto';
        appendMsg('visitor', txt, new Date());

        try {
            await fetch(API_URL, {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({
                    action: 'send_message',
                    session_id: sessionId,
                    message: txt
                })
            });
        } catch (e) {}
    }

    async function poll() {
        if (!sessionId) return;
        try {
            const res = await fetch(`${API_URL}?action=get_messages&session_id=${sessionId}&last_id=${lastMsgId}`);
            const data = await res.json();
            
            if (data.success) {
                if (data.status === 'ended') { resetChat(); alert("Chat ended by agent."); return; }
                
                if (data.messages) {
                    let hasNew = false;
                    data.messages.forEach(m => {
                        if (m.id > lastMsgId) {
                            lastMsgId = m.id;
                            if (m.sender_type !== 'visitor') {
                                appendMsg(m.sender_type, m.message_body, m.created_at);
                                hasNew = true;
                            }
                        }
                    });
                    if (hasNew && els.window.classList.contains('hidden')) {
                        const count = parseInt(els.badge.innerText) || 0;
                        els.badge.innerText = count + 1;
                        els.badge.classList.remove('hidden');
                    }
                }
                
                // Typing
                if (data.is_agent_typing) {
                    els.typing.classList.remove('hidden');
                    scrollToBottom();
                } else {
                    els.typing.classList.add('hidden');
                }
            }
        } catch (e) {}
    }

    function startPolling() {
        if (pollTimer) clearInterval(pollTimer);
        poll();
        pollTimer = setInterval(poll, 3000);
    }

    async function sendTyping(isTyping) {
        if (!sessionId) return;
        fetch(API_URL, {
            method: 'POST',
            body: JSON.stringify({action: 'typing_status', session_id: sessionId, is_typing: isTyping})
        });
    }

    async function endChat() {
        if (!confirm("End conversation?")) return;
        await fetch(API_URL, {
             method: 'POST',
             body: JSON.stringify({action: 'end_chat', session_id: sessionId})
        });
        resetChat();
    }

    // HELPERS
    function showChat() {
        els.viewStart.classList.add('hidden');
        els.viewChat.classList.remove('hidden');
        scrollToBottom();
    }

    function resetChat() {
        clearInterval(pollTimer);
        localStorage.removeItem('cf_session_id');
        sessionId = null;
        lastMsgId = 0;
        els.msgsArea.innerHTML = '';
        els.viewChat.classList.add('hidden');
        els.viewStart.classList.remove('hidden');
    }

    function appendMsg(type, text, time) {
        const isAgent = type === 'agent' || type === 'system';
        const isSys = type === 'system';
        const timeStr = new Date(time).toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'});
        
        let html;
        if (isSys) {
            html = `<div class="flex justify-center my-3 cf-msg-anim"><span class="text-xs text-gray-500 bg-gray-100 px-3 py-1 rounded-full">${escape(text)}</span></div>`;
        } else {
            html = `
            <div class="flex gap-3 mb-4 ${isAgent ? '' : 'flex-row-reverse'} cf-msg-anim">
                <div class="w-8 h-8 rounded-full flex-shrink-0 flex items-center justify-center text-xs font-bold ${isAgent ? 'bg-indigo-100 text-indigo-600' : 'bg-gray-200 text-gray-600'}">
                    ${isAgent ? 'S' : 'Y'}
                </div>
                <div class="max-w-[80%]">
                    <div class="px-4 py-2.5 text-sm shadow-sm ${isAgent ? 'bg-white border border-gray-100 text-gray-800 rounded-2xl rounded-tl-none' : 'bg-indigo-600 text-white rounded-2xl rounded-tr-none'}">
                        ${escape(text)}
                    </div>
                    <div class="text-[10px] text-gray-400 mt-1 ${isAgent ? '' : 'text-right'}">${timeStr}</div>
                </div>
            </div>`;
        }
        els.msgsArea.insertAdjacentHTML('beforeend', html);
        scrollToBottom();
    }

    function scrollToBottom() {
        els.msgsArea.scrollTop = els.msgsArea.scrollHeight;
    }

    function escape(str) {
        const div = document.createElement('div');
        div.textContent = str;
        return div.innerHTML.replace(/\n/g, '<br>');
    }

    // Run
    init();

})();
</script>