ChatbotAGGLO/public/chatbot-widget.js

(function() {
    // 1. Identify the URL of the chatbot server and extract the chatbot slug parameter
    const scriptTag = document.currentScript;
    const scriptSrc = scriptTag ? scriptTag.src : '';
    const baseUrl = scriptSrc ? new URL(scriptSrc).origin : window.location.origin;

    let chatbotSlug = 'default';
    if (scriptSrc) {
        const urlParams = new URL(scriptSrc).searchParams;
        chatbotSlug = urlParams.get('chatbot') || '';
    }

    if (!chatbotSlug) {
        console.error("Chatbot Widget error: The 'chatbot' parameter is missing in the script URL. Example: chatbot-widget.js?chatbot=client-slug");
        return;
    }

    // 2. Create and inject Widget styles
    const style = document.createElement('style');
    style.innerHTML = `
        .agglo-chat-widget-btn {
            position: fixed;
            bottom: 24px;
            right: 24px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
            cursor: pointer;
            z-index: 999999;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid #334155;
            outline: none;
        }
        .agglo-chat-widget-btn:hover {
            transform: scale(1.08) rotate(5deg);
            box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.5);
            background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
        }
        .agglo-chat-widget-btn:active {
            transform: scale(0.95);
        }
        .agglo-chat-widget-btn svg {
            width: 26px;
            height: 26px;
            fill: none;
            stroke: #94a3b8;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: all 0.3s ease;
        }
        .agglo-chat-widget-btn:hover svg {
            stroke: #f1f5f9;
        }
        .agglo-chat-widget-btn.open svg {
            transform: rotate(90deg);
        }
        .agglo-chat-widget-container {
            position: fixed;
            bottom: 96px;
            right: 24px;
            width: 400px;
            height: 600px;
            max-height: calc(100vh - 120px);
            max-width: calc(100vw - 48px);
            border-radius: 16px;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
            background-color: #0f172a;
            z-index: 999998;
            opacity: 0;
            transform: translateY(20px) scale(0.95);
            pointer-events: none;
            visibility: hidden;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
            border: 1px solid #1e293b;
        }
        .agglo-chat-widget-container.open {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
            visibility: visible;
        }
        .agglo-chat-widget-iframe {
            width: 100%;
            height: 100%;
            border: none;
            background: transparent;
        }
        @media (max-width: 480px) {
            .agglo-chat-widget-container {
                bottom: 0;
                right: 0;
                width: 100vw;
                height: 100vh;
                max-width: 100vw;
                max-height: 100vh;
                border-radius: 0;
                border: none;
            }
            .agglo-chat-widget-btn {
                bottom: 16px;
                right: 16px;
            }
        }
    `;
    document.head.appendChild(style);

    // 3. Create the iframe container
    const container = document.createElement('div');
    container.className = 'agglo-chat-widget-container';
    
    const iframe = document.createElement('iframe');
    iframe.className = 'agglo-chat-widget-iframe';
    iframe.src = `${baseUrl}/chatbot-widget/${chatbotSlug}`;
    container.appendChild(iframe);
    document.body.appendChild(container);

    // 4. Create the floating button
    const button = document.createElement('button');
    button.className = 'agglo-chat-widget-btn';
    button.ariaLabel = 'Ouvrir le chat';
    
    // Chat icon (closed state)
    const chatIcon = `
        <svg xmlns="http://www.w3.org/2000/svg" class="icon-chat" viewBox="0 0 24 24">
            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
        </svg>
    `;
    
    // Close icon (opened state)
    const closeIcon = `
        <svg xmlns="http://www.w3.org/2000/svg" class="icon-close" viewBox="0 0 24 24" style="display: none;">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
    `;
    
    button.innerHTML = chatIcon + closeIcon;
    document.body.appendChild(button);

    // 5. Toggle logic
    let isOpen = false;
    button.addEventListener('click', function() {
        isOpen = !isOpen;
        
        const svgChat = button.querySelector('.icon-chat');
        const svgClose = button.querySelector('.icon-close');
        
        if (isOpen) {
            button.classList.add('open');
            container.classList.add('open');
            svgChat.style.display = 'none';
            svgClose.style.display = 'block';
        } else {
            button.classList.remove('open');
            container.classList.remove('open');
            svgChat.style.display = 'block';
            svgClose.style.display = 'none';
        }
    });
})();