Chatbot

Le script du chatbot ajoute une fenêtre de discussion responsive intégrée dans le site. Il permet d'ouvrir et de fermer le chatbot avec des animations adaptées à différentes tailles d'écran.

Lien vers la documentation complète

Pour une explication détaillée, consultez la page dédiée au chatbot.

document.addEventListener('DOMContentLoaded', function () {
    // Créer les éléments du chatbot
    const chatbotContainer = document.createElement('div');
    chatbotContainer.id = 'chatbot-container';
    chatbotContainer.style.cssText = `
        display: none;
        position: fixed;
        right: 20px;
        bottom: 120px; /* Ajustement pour le monter */
        width: 400px;
        height: 600px;
        border: 1px solid #ccc;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        z-index: 10000;
    `;
    chatbotContainer.innerHTML = `
        <iframe src="https://chatbot.devmastery.fr" style="width: 100%; height: 100%; border: none;"></iframe>
    `;

    const openChatbotBtn = document.createElement('button');
    openChatbotBtn.id = 'open-chatbot-btn';
    openChatbotBtn.style.cssText = `
        position: fixed;
        bottom: 30px;
        right: 30px;
        padding: 10px 20px;
        background-color: #2e4b68;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        z-index: 10000;
    `;
    openChatbotBtn.textContent = 'Ouvrir le Chatbot';

    const closeChatbotBtn = document.createElement('button');
    closeChatbotBtn.id = 'close-chatbot-btn';
    closeChatbotBtn.style.cssText = `
        position: fixed;
        bottom: 30px;
        right: 30px;
        padding: 10px 20px;
        background-color: #2e4b68;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        z-index: 10000000;
        display: none;
    `;
    closeChatbotBtn.textContent = 'Fermer le Chatbot';

    // Ajout des éléments au DOM
    document.body.appendChild(chatbotContainer);
    document.body.appendChild(openChatbotBtn);
    document.body.appendChild(closeChatbotBtn);

    // Fonctionnalités pour ouvrir et fermer le chatbot
    openChatbotBtn.addEventListener('click', function () {
        chatbotContainer.style.display = 'block';
        openChatbotBtn.style.display = 'none';
        closeChatbotBtn.style.display = 'block';
    });

    closeChatbotBtn.addEventListener('click', function () {
        chatbotContainer.style.display = 'none';
        openChatbotBtn.style.display = 'block';
        closeChatbotBtn.style.display = 'none';
    });

    // Media queries pour rendre le chatbot responsive
    function applyResponsiveStyles() {
        const screenWidth = window.innerWidth;

        if (screenWidth < 768) {
            chatbotContainer.style.width = '90%';
            chatbotContainer.style.height = '60%';
            chatbotContainer.style.right = '5%';
            chatbotContainer.style.bottom = '70px'; /* Ajustement pour mobile */
        } else if (screenWidth < 1024) {
            chatbotContainer.style.width = '350px';
            chatbotContainer.style.height = '500px';
            chatbotContainer.style.right = '20px';
            chatbotContainer.style.bottom = '120px'; /* Ajustement pour tablettes */
        } else {
            chatbotContainer.style.width = '400px';
            chatbotContainer.style.height = '600px';
            chatbotContainer.style.right = '20px';
            chatbotContainer.style.bottom = '120px'; /* Ajustement pour desktop */
        }
    }

    // Appliquer les styles responsives au chargement et lors des redimensionnements
    applyResponsiveStyles();
    window.addEventListener('resize', applyResponsiveStyles);
});