Hello.



<link rel="preconnect" href="https://cdn.jsdelivr.net">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
    #onc-chat-launcher {
        position: fixed;
        right: 1rem;
        bottom: 1rem;
        z-index: 1080;
        display: inline-flex;
        align-items: center;
        gap: .65rem;
        padding: .9rem 1.15rem;
        border: 0;
        border-radius: 999px;
        background: linear-gradient(135deg, #0f3d75 0%, #1459a6 100%);
        color: #fff;
        font-weight: 600;
        box-shadow: 0 18px 38px rgba(7, 28, 61, .28);
    }

    #onc-chat-launcher:hover {
        background: linear-gradient(135deg, #0d3464 0%, #114d90 100%);
    }

    #onc-chat-widget {
        position: fixed;
        right: 1rem;
        bottom: 5.5rem;
        z-index: 1080;
        width: min(390px, calc(100vw - 1.5rem));
        height: min(680px, calc(100vh - 7rem));
        display: none;
        overflow: hidden;
        border: 1px solid rgba(13, 47, 88, .08);
        border-radius: 1.15rem;
        background: #fff;
        box-shadow: 0 28px 70px rgba(10, 28, 53, .22);
    }

    #onc-chat-widget.onc-open {
        display: flex;
        flex-direction: column;
    }

    .onc-chat-header {
        padding: 1rem 1rem .85rem;
        background:
            radial-gradient(circle at top right, rgba(255, 255, 255, .16), transparent 30%),
            linear-gradient(135deg, #0c315d 0%, #165fab 100%);
        color: #fff;
    }

    .onc-chat-brand {
        font-size: .95rem;
        font-weight: 700;
        letter-spacing: .01em;
    }

    .onc-chat-subtitle {
        font-size: .76rem;
        color: rgba(255, 255, 255, .84);
    }

    .onc-chat-body {
        flex: 1 1 auto;
        min-height: 0;
        background:
            linear-gradient(180deg, #f4f8fc 0%, #f8fbfd 100%);
    }

    #onc-chat-messages {
        height: 100%;
        padding: 1rem;
        overflow-y: auto;
    }

    .onc-msg {
        display: flex;
        margin-bottom: .85rem;
    }

    .onc-msg.user {
        justify-content: flex-end;
    }

    .onc-bubble {
        max-width: 85%;
        padding: .8rem .9rem;
        border-radius: 1rem;
        font-size: .95rem;
        line-height: 1.45;
        white-space: pre-wrap;
        word-break: break-word;
    }

    .onc-msg.bot .onc-bubble {
        border: 1px solid rgba(15, 61, 117, .1);
        background: #fff;
        color: #17324d;
        border-top-left-radius: .4rem;
    }

    .onc-msg.user .onc-bubble {
        background: linear-gradient(135deg, #1459a6 0%, #0f3d75 100%);
        color: #fff;
        border-top-right-radius: .4rem;
    }

    .onc-chat-quick {
        overflow-x: auto;
        white-space: nowrap;
        padding: .85rem 1rem 0;
        background: #fff;
    }

    .onc-chat-quick .btn {
        margin-right: .45rem;
        margin-bottom: .45rem;
        border-radius: 999px;
    }

    .onc-chat-footer {
        border-top: 1px solid rgba(14, 46, 84, .08);
        background: #fff;
        padding: .9rem 1rem 1rem;
    }

    .onc-chat-meta .form-control {
        border-color: rgba(13, 47, 88, .1);
    }

    #onc-chat-input {
        resize: none;
        min-height: 52px;
        max-height: 140px;
    }

    .onc-chat-note {
        font-size: .72rem;
        color: #6d7d8e;
    }

    .onc-chat-status {
        font-size: .74rem;
        color: #5d6f82;
        min-height: 1rem;
    }

    @media (max-width: 576px) {
        #onc-chat-launcher {
            right: .75rem;
            bottom: .75rem;
            padding: .85rem 1rem;
        }

        #onc-chat-widget {
            right: .75rem;
            bottom: .75rem;
            width: calc(100vw - 1.5rem);
            height: calc(100vh - 1.5rem);
            border-radius: 1rem;
        }
    }
</style>

<button type="button" id="onc-chat-launcher" aria-controls="onc-chat-widget" aria-expanded="false">
    <span>Chat with ONC</span>
</button>

<section id="onc-chat-widget" aria-label="Online Notary Center live chat">
    <div class="onc-chat-header d-flex justify-content-between align-items-start gap-3">
        <div>
            <div class="onc-chat-brand">Online Notary Center</div>
            <div class="onc-chat-subtitle">General platform help, lead routing, and support intake</div>
        </div>
        <button type="button" class="btn btn-sm btn-light" id="onc-chat-close" aria-label="Close chat">Close</button>
    </div>

    <div class="onc-chat-quick">
        <button type="button" class="btn btn-outline-primary btn-sm onc-quick" data-quick="I have a pricing question.">Pricing</button>
        <button type="button" class="btn btn-outline-primary btn-sm onc-quick" data-quick="How do I become an online notary?">Become a notary</button>
        <button type="button" class="btn btn-outline-primary btn-sm onc-quick" data-quick="I need business or enterprise plan information.">Business plans</button>
        <button type="button" class="btn btn-outline-primary btn-sm onc-quick" data-quick="I need support with my account or a session.">Support</button>
    </div>

    <div class="onc-chat-body">
        <div id="onc-chat-messages"></div>
    </div>

    <div class="onc-chat-footer">
        <div class="row g-2 onc-chat-meta mb-2">
            <div class="col-12">
                <input type="text" class="form-control form-control-sm" id="onc-name" placeholder="Your name (optional)" maxlength="155">
            </div>
            <div class="col-sm-6">
                <input type="email" class="form-control form-control-sm" id="onc-email" placeholder="Email (optional)" maxlength="155">
            </div>
            <div class="col-sm-6">
                <input type="text" class="form-control form-control-sm" id="onc-phone" placeholder="Phone (optional)" maxlength="50">
            </div>
        </div>

        <div class="input-group mb-2">
            <textarea id="onc-chat-input" class="form-control" rows="2" placeholder="Type your question..."></textarea>
            <button type="button" id="onc-chat-send" class="btn btn-primary">Send</button>
        </div>

        <div class="onc-chat-status" id="onc-chat-status"></div>
        <div class="onc-chat-note">This assistant provides general platform information only and does not provide legal advice.</div>
    </div>
</section>

<script>
    (function () {
        const launcher = document.getElementById('onc-chat-launcher');
        const widget = document.getElementById('onc-chat-widget');
        const closeButton = document.getElementById('onc-chat-close');
        const messages = document.getElementById('onc-chat-messages');
        const chatInput = document.getElementById('onc-chat-input');
        const sendButton = document.getElementById('onc-chat-send');
        const statusNode = document.getElementById('onc-chat-status');
        const nameInput = document.getElementById('onc-name');
        const emailInput = document.getElementById('onc-email');
        const phoneInput = document.getElementById('onc-phone');
        const quickButtons = document.querySelectorAll('.onc-quick');

        const SESSION_KEY = 'onc_chat_session_id';
        const VISITOR_KEY = 'onc_chat_visitor';
        const GREETING = 'Hi, welcome to Online Notary Center. How can I help today?';

        function createSessionId() {
            if (window.crypto && crypto.randomUUID) {
                return 'onc_' + crypto.randomUUID();
            }

            return 'onc_' + Math.random().toString(36).slice(2) + Date.now();
        }

        let sessionId = localStorage.getItem(SESSION_KEY);
        if (!sessionId) {
            sessionId = createSessionId();
            localStorage.setItem(SESSION_KEY, sessionId);
        }

        try {
            const savedVisitor = JSON.parse(localStorage.getItem(VISITOR_KEY) || '{}');
            nameInput.value = savedVisitor.name || '';
            emailInput.value = savedVisitor.email || '';
            phoneInput.value = savedVisitor.phone || '';
        } catch (error) {
            localStorage.removeItem(VISITOR_KEY);
        }

        function saveVisitorState() {
            localStorage.setItem(VISITOR_KEY, JSON.stringify({
                name: nameInput.value.trim(),
                email: emailInput.value.trim(),
                phone: phoneInput.value.trim()
            }));
        }

        function setStatus(text) {
            statusNode.textContent = text || '';
        }

        function addMessage(role, text) {
            const row = document.createElement('div');
            row.className = 'onc-msg ' + (role === 'user' ? 'user' : 'bot');

            const bubble = document.createElement('div');
            bubble.className = 'onc-bubble';
            bubble.textContent = text;

            row.appendChild(bubble);
            messages.appendChild(row);
            messages.scrollTop = messages.scrollHeight;
        }

        function openWidget() {
            widget.classList.add('onc-open');
            launcher.style.display = 'none';
            launcher.setAttribute('aria-expanded', 'true');

            if (messages.children.length === 0) {
                addMessage('bot', GREETING);
            }

            chatInput.focus();
        }

        function closeWidget() {
            widget.classList.remove('onc-open');
            launcher.style.display = 'inline-flex';
            launcher.setAttribute('aria-expanded', 'false');
        }

        async function sendMessage(rawMessage) {
            const message = rawMessage.trim();
            if (!message) {
                return;
            }

            saveVisitorState();
            addMessage('user', message);
            chatInput.value = '';
            sendButton.disabled = true;
            quickButtons.forEach((button) => {
                button.disabled = true;
            });
            setStatus('Sending...');

            try {
                const response = await fetch('/api/chat.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        session_id: sessionId,
                        message: message,
                        name: nameInput.value.trim(),
                        email: emailInput.value.trim(),
                        phone: phoneInput.value.trim(),
                        page_url: window.location.href
                    })
                });

                const data = await response.json();
                if (data.reply) {
                    addMessage('bot', data.reply);
                } else {
                    addMessage('bot', 'Thanks for reaching out. A team member can follow up if needed.');
                }

                if (data.handoff === true) {
                    setStatus('Flagged for team follow-up.');
                } else {
                    setStatus('');
                }
            } catch (error) {
                addMessage('bot', "Thanks for reaching out. I'm having trouble right now, so I've flagged this for our team. Please email info@onlinenotarycenter.com for immediate help.");
                setStatus('Temporary system issue.');
            } finally {
                sendButton.disabled = false;
                quickButtons.forEach((button) => {
                    button.disabled = false;
                });
            }
        }

        launcher.addEventListener('click', openWidget);
        closeButton.addEventListener('click', closeWidget);
        sendButton.addEventListener('click', function () {
            sendMessage(chatInput.value);
        });

        chatInput.addEventListener('keydown', function (event) {
            if (event.key === 'Enter' && !event.shiftKey) {
                event.preventDefault();
                sendMessage(chatInput.value);
            }
        });

        [nameInput, emailInput, phoneInput].forEach((field) => {
            field.addEventListener('change', saveVisitorState);
            field.addEventListener('blur', saveVisitorState);
        });

        quickButtons.forEach((button) => {
            button.addEventListener('click', function () {
                sendMessage(button.getAttribute('data-quick') || '');
            });
        });
    }());
</script>