{"id":994,"date":"2025-12-22T07:34:33","date_gmt":"2025-12-22T07:34:33","guid":{"rendered":"https:\/\/auventsaintremois.com\/chatbot"},"modified":"2025-12-22T07:34:33","modified_gmt":"2025-12-22T07:34:33","slug":"chatbot","status":"publish","type":"page","link":"https:\/\/auventsaintremois.com\/en\/chatbot","title":{"rendered":"Chatbot R\u00e9servation"},"content":{"rendered":"<script>\n        const AJAX_URL = 'https:\/\/auventsaintremois.com\/wp-admin\/admin-ajax.php';\n    <\/script>\n    <!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Chatbot R\u00e9servation - L'Auvent Saint-R\u00e9mois<\/title>\n    <style>\n        * { margin: 0; padding: 0; box-sizing: border-box; }\n        body {\n            font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            min-height: 100vh;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            padding: 20px;\n        }\n        .chat-container {\n            width: 100%;\n            max-width: 800px;\n            height: 90vh;\n            max-height: 700px;\n            background: #ffffff;\n            border-radius: 20px;\n            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n            display: flex;\n            flex-direction: column;\n            overflow: hidden;\n        }\n        .chat-header {\n            background: linear-gradient(135deg, #8B4513 0%, #A0522D 100%);\n            color: white;\n            padding: 12px 20px;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            gap: 15px;\n        }\n        .header-welcome {\n            flex: 1;\n        }\n        .header-welcome p {\n            margin: 0;\n            font-size: 14px;\n            line-height: 1.4;\n        }\n        @media (max-width: 768px) {\n            .header-welcome p {\n                font-size: 12px;\n            }\n        }\n        .language-selector select {\n            background: rgba(255,255,255,0.2);\n            color: white;\n            border: 1px solid rgba(255,255,255,0.3);\n            padding: 8px 12px;\n            border-radius: 8px;\n            cursor: pointer;\n        }\n        .chat-messages { flex: 1; overflow-y: auto; padding: 15px; background: #f8f9fa; }\n        .contact-link-container {\n            padding: 10px 15px;\n            background: #f8f9fa;\n            text-align: center;\n            border-bottom: 1px solid #e9ecef;\n        }\n        .contact-link {\n            font-size: 12px;\n            color: #6c757d;\n            text-decoration: none;\n            transition: color 0.2s ease;\n            display: inline-block;\n        }\n        .contact-link:hover {\n            color: #8B4513;\n            text-decoration: underline;\n        }\n        @media (max-width: 768px) {\n            .contact-link {\n                font-size: 11px;\n                line-height: 1.4;\n            }\n        }\n        .message { margin-bottom: 20px; animation: fadeIn 0.3s; }\n        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\n        .message-user { display: flex; justify-content: flex-end; }\n        .message-user .message-bubble {\n            background: linear-gradient(135deg, #8B4513 0%, #A0522D 100%);\n            color: white;\n            border-radius: 18px 18px 4px 18px;\n            padding: 12px 18px;\n            max-width: 70%;\n        }\n        .message-assistant .message-bubble {\n            background: white;\n            color: #333;\n            border-radius: 18px 18px 18px 4px;\n            padding: 12px 18px;\n            max-width: 70%;\n            box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n        }\n        .message-audio-button {\n            margin-top: 8px;\n            padding: 6px 12px;\n            background: #8B4513;\n            color: white;\n            border: none;\n            border-radius: 6px;\n            cursor: pointer;\n            font-size: 12px;\n        }\n        .chat-input-container { padding: 12px 15px; background: white; border-bottom: 1px solid #e9ecef; }\n        .chat-input-wrapper { display: flex; gap: 12px; }\n        .chat-input {\n            flex: 1;\n            padding: 14px 18px;\n            border: 2px solid #e9ecef;\n            border-radius: 12px;\n            font-size: 15px;\n        }\n        .chat-input:focus { outline: none; border-color: #8B4513; }\n        .chat-send-button {\n            padding: 14px 28px;\n            background: linear-gradient(135deg, #8B4513 0%, #A0522D 100%);\n            color: white;\n            border: none;\n            border-radius: 12px;\n            font-weight: 600;\n            cursor: pointer;\n        }\n        .typing-indicator { display: flex; gap: 4px; padding: 12px; background: white; border-radius: 18px; }\n        .typing-dot { width: 8px; height: 8px; background: #8B4513; border-radius: 50%; animation: typing 1.4s infinite; }\n        @keyframes typing { 0%, 60%, 100% { opacity: 0.4; } 30% { transform: translateY(-10px); opacity: 1; } }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"chat-container\">\n        <div class=\"chat-header\">\n            <div class=\"header-welcome\">\n                <p id=\"headerWelcomeText\">Je suis votre assistant pour r\u00e9server votre s\u00e9jour. Posez-moi toutes vos questions !<\/p>\n            <\/div>\n            <div class=\"language-selector\">\n                <select id=\"languageSelect\">\n                    <option value=\"fr\">\ud83c\uddeb\ud83c\uddf7 Fran\u00e7ais<\/option>\n                    <option value=\"en\">\ud83c\uddec\ud83c\udde7 English<\/option>\n                    <option value=\"de\">\ud83c\udde9\ud83c\uddea Deutsch<\/option>\n                    <option value=\"it\">\ud83c\uddee\ud83c\uddf9 Italiano<\/option>\n                    <option value=\"es\">\ud83c\uddea\ud83c\uddf8 Espa\u00f1ol<\/option>\n                    <option value=\"nl\">\ud83c\uddf3\ud83c\uddf1 Nederlands<\/option>\n                <\/select>\n            <\/div>\n        <\/div>\n\n        <div class=\"chat-input-container\">\n            <div class=\"chat-input-wrapper\">\n                <input type=\"text\" id=\"chatInput\" class=\"chat-input\" placeholder=\"Votre question...\">\n                <button id=\"sendButton\" class=\"chat-send-button\">Envoyer<\/button>\n            <\/div>\n        <\/div>\n\n        <div class=\"contact-link-container\">\n            <a href=\"https:\/\/auventsaintremois.com\/en\/contact\/\" class=\"contact-link\" id=\"contactLink\" target=\"_blank\">\n                Pour toute question sp\u00e9cifique, n'h\u00e9sitez pas \u00e0 nous contacter via notre formulaire de contact.\n            <\/a>\n        <\/div>\n\n        <div class=\"chat-messages\" id=\"chatMessages\">\n        <\/div>\n    <\/div>\n\n    <script>\n        \/\/ AJAX_URL est inject\u00e9 par le shortcode PHP\n        let currentLanguage = 'fr';\n        let sessionId = 'res_' + Date.now();\n\n        \/\/ Traductions multilingues\n        const translations = {\n            headerWelcome: {\n                fr: \"Je suis votre assistant pour r\u00e9server votre s\u00e9jour. Posez-moi toutes vos questions !\",\n                en: \"I am your assistant to book your stay. Ask me all your questions!\",\n                es: \"Soy su asistente para reservar su estancia. \u00a1H\u00e1game todas sus preguntas!\",\n                de: \"Ich bin Ihr Assistent f\u00fcr die Buchung Ihres Aufenthalts. Stellen Sie mir alle Ihre Fragen!\",\n                it: \"Sono il vostro assistente per prenotare il vostro soggiorno. Fatemi tutte le vostre domande!\",\n                nl: \"Ik ben uw assistent om uw verblijf te boeken. Stel mij al uw vragen!\"\n            },\n            placeholder: {\n                fr: \"Votre question...\",\n                en: \"Your question...\",\n                es: \"Su pregunta...\",\n                de: \"Ihre Frage...\",\n                it: \"La vostra domanda...\",\n                nl: \"Uw vraag...\"\n            },\n            sendButton: {\n                fr: \"Envoyer\",\n                en: \"Send\",\n                es: \"Enviar\",\n                de: \"Senden\",\n                it: \"Invia\",\n                nl: \"Verzenden\"\n            },\n            contactLink: {\n                fr: \"Pour toute question sp\u00e9cifique, n'h\u00e9sitez pas \u00e0 nous contacter via notre formulaire de contact.\",\n                en: \"For any specific questions, please feel free to contact us through our contact form.\",\n                es: \"Para cualquier pregunta espec\u00edfica, no dude en contactarnos a trav\u00e9s de nuestro formulario de contacto.\",\n                de: \"F\u00fcr spezifische Fragen kontaktieren Sie uns bitte \u00fcber unser Kontaktformular.\",\n                it: \"Per qualsiasi domanda specifica, non esitate a contattarci tramite il nostro modulo di contatto.\",\n                nl: \"Voor specifieke vragen kunt u contact met ons opnemen via ons contactformulier.\"\n            }\n        };\n\n        function updateLanguage(lang) {\n            \/\/ Texte d'accueil du header\n            const headerWelcomeText = document.getElementById('headerWelcomeText');\n            if (headerWelcomeText && translations.headerWelcome[lang]) {\n                headerWelcomeText.textContent = translations.headerWelcome[lang];\n            }\n\n            \/\/ Placeholder\n            const chatInput = document.getElementById('chatInput');\n            if (chatInput && translations.placeholder[lang]) {\n                chatInput.placeholder = translations.placeholder[lang];\n            }\n\n            \/\/ Bouton envoyer\n            const sendButton = document.getElementById('sendButton');\n            if (sendButton && translations.sendButton[lang]) {\n                sendButton.textContent = translations.sendButton[lang];\n            }\n\n            \/\/ Lien de contact\n            const contactLink = document.getElementById('contactLink');\n            if (contactLink && translations.contactLink[lang]) {\n                contactLink.textContent = translations.contactLink[lang];\n            }\n        }\n\n        document.getElementById('languageSelect').addEventListener('change', (e) => {\n            currentLanguage = e.target.value;\n            updateLanguage(currentLanguage);\n        });\n\n        document.getElementById('sendButton').addEventListener('click', sendMessage);\n        document.getElementById('chatInput').addEventListener('keypress', (e) => {\n            if (e.key === 'Enter') sendMessage();\n        });\n\n        async function sendMessage() {\n            const input = document.getElementById('chatInput');\n            const message = input.value.trim();\n            if (!message) return;\n\n            input.disabled = true;\n            addMessage('user', message);\n            input.value = '';\n\n            const typing = showTyping();\n\n            try {\n                const formData = new FormData();\n                formData.append('action', 'asr_chatbot_query');\n                formData.append('question', message);\n                formData.append('language', currentLanguage);\n                formData.append('chatbot_type', 'reservation');\n                formData.append('_nocache', Date.now());\n\n                const response = await fetch(AJAX_URL, {\n                    method: 'POST',\n                    body: formData\n                });\n\n                const data = await response.json();\n                typing.remove();\n\n                if (data.success && data.data.answer) {\n                    addMessage('assistant', data.data.answer);\n                } else {\n                    addMessage('assistant', data.data && data.data.message ? data.data.message : 'Erreur, r\u00e9essayez.');\n                }\n            } catch (error) {\n                typing.remove();\n                addMessage('assistant', 'Erreur de connexion.');\n            }\n\n            input.disabled = false;\n            input.focus();\n        }\n\n        function showTyping() {\n            const div = document.createElement('div');\n            div.className = 'message';\n            div.innerHTML = '<div class=\"typing-indicator\"><div class=\"typing-dot\"><\/div><div class=\"typing-dot\"><\/div><div class=\"typing-dot\"><\/div><\/div>';\n            document.getElementById('chatMessages').appendChild(div);\n            return div;\n        }\n\n        function addMessage(type, text) {\n            const div = document.createElement('div');\n            div.className = 'message message-' + type;\n            div.innerHTML = '<div class=\"message-bubble\">' + text.replace(\/<\/g, '&lt;').replace(\/>\/g, '&gt;') + '<\/div>';\n            document.getElementById('chatMessages').appendChild(div);\n            document.getElementById('chatMessages').scrollTop = 999999;\n        }\n    <\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_glsr_average":0,"_glsr_ranking":0,"_glsr_reviews":0,"footnotes":""},"class_list":["post-994","page","type-page","status-publish","czr-hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Chatbot R\u00e9servation &#8226; Location de vacances - Auvent Saint-Remois<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/auventsaintremois.com\/en\/chatbot\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Chatbot R\u00e9servation &#8226; Location de vacances - Auvent Saint-Remois\" \/>\n<meta property=\"og:url\" content=\"https:\/\/auventsaintremois.com\/en\/chatbot\/\" \/>\n<meta property=\"og:site_name\" content=\"Location de vacances - Auvent Saint-Remois\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/auventsaintremois.com\/chatbot\",\"url\":\"https:\/\/auventsaintremois.com\/chatbot\",\"name\":\"Chatbot R\u00e9servation &#8226; Location de vacances - Auvent Saint-Remois\",\"isPartOf\":{\"@id\":\"https:\/\/auventsaintremois.com\/#website\"},\"datePublished\":\"2025-12-22T07:34:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/auventsaintremois.com\/chatbot#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/auventsaintremois.com\/chatbot\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/auventsaintremois.com\/chatbot#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/auventsaintremois.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Chatbot R\u00e9servation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/auventsaintremois.com\/#website\",\"url\":\"https:\/\/auventsaintremois.com\/\",\"name\":\"Location de vacances - Auvent Saint-Remois\",\"description\":\"Location saisonni\u00e8re \u00e0 Saint-R\u00e9my de Provence\",\"publisher\":{\"@id\":\"https:\/\/auventsaintremois.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/auventsaintremois.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/auventsaintremois.com\/#organization\",\"name\":\"Auvent Saint-Remois\",\"url\":\"https:\/\/auventsaintremois.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/auventsaintremois.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/www.auventsaintremois.com\/wp-content\/uploads\/2021\/05\/LOGO-AUVENT-SAINT-REMOIS-copie-3.png\",\"contentUrl\":\"http:\/\/www.auventsaintremois.com\/wp-content\/uploads\/2021\/05\/LOGO-AUVENT-SAINT-REMOIS-copie-3.png\",\"width\":586,\"height\":161,\"caption\":\"Auvent Saint-Remois\"},\"image\":{\"@id\":\"https:\/\/auventsaintremois.com\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Chatbot R\u00e9servation &#8226; Location de vacances - Auvent Saint-Remois","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/auventsaintremois.com\/en\/chatbot\/","og_locale":"en_GB","og_type":"article","og_title":"Chatbot R\u00e9servation &#8226; Location de vacances - Auvent Saint-Remois","og_url":"https:\/\/auventsaintremois.com\/en\/chatbot\/","og_site_name":"Location de vacances - Auvent Saint-Remois","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/auventsaintremois.com\/chatbot","url":"https:\/\/auventsaintremois.com\/chatbot","name":"Chatbot R\u00e9servation &#8226; Location de vacances - Auvent Saint-Remois","isPartOf":{"@id":"https:\/\/auventsaintremois.com\/#website"},"datePublished":"2025-12-22T07:34:33+00:00","breadcrumb":{"@id":"https:\/\/auventsaintremois.com\/chatbot#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/auventsaintremois.com\/chatbot"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/auventsaintremois.com\/chatbot#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/auventsaintremois.com\/"},{"@type":"ListItem","position":2,"name":"Chatbot R\u00e9servation"}]},{"@type":"WebSite","@id":"https:\/\/auventsaintremois.com\/#website","url":"https:\/\/auventsaintremois.com\/","name":"Holiday rental - Auvent Saint-Remois","description":"Seasonal rental in Saint-R\u00e9my de Provence","publisher":{"@id":"https:\/\/auventsaintremois.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/auventsaintremois.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/auventsaintremois.com\/#organization","name":"Saint-Remois awning","url":"https:\/\/auventsaintremois.com\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/auventsaintremois.com\/#\/schema\/logo\/image\/","url":"http:\/\/www.auventsaintremois.com\/wp-content\/uploads\/2021\/05\/LOGO-AUVENT-SAINT-REMOIS-copie-3.png","contentUrl":"http:\/\/www.auventsaintremois.com\/wp-content\/uploads\/2021\/05\/LOGO-AUVENT-SAINT-REMOIS-copie-3.png","width":586,"height":161,"caption":"Auvent Saint-Remois"},"image":{"@id":"https:\/\/auventsaintremois.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/auventsaintremois.com\/en\/wp-json\/wp\/v2\/pages\/994","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/auventsaintremois.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/auventsaintremois.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/auventsaintremois.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/auventsaintremois.com\/en\/wp-json\/wp\/v2\/comments?post=994"}],"version-history":[{"count":0,"href":"https:\/\/auventsaintremois.com\/en\/wp-json\/wp\/v2\/pages\/994\/revisions"}],"wp:attachment":[{"href":"https:\/\/auventsaintremois.com\/en\/wp-json\/wp\/v2\/media?parent=994"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}