{"id":1199,"date":"2025-11-21T19:32:38","date_gmt":"2025-11-21T19:32:38","guid":{"rendered":"https:\/\/zoeflexsolutions.com\/?page_id=1199"},"modified":"2025-11-24T19:53:01","modified_gmt":"2025-11-24T19:53:01","slug":"ai-agent-sample","status":"publish","type":"page","link":"https:\/\/zoeflexsolutions.com\/pt\/ai-agent-sample\/","title":{"rendered":"AI Agent Sample"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n \r\n \r\n IA Agent - Sample<\/title>\r\n\r\n <!-- IMPORTA\u00c7\u00c3O DE FONTES -->\r\n <style>\r\n @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap\");\r\n @import url(\"https:\/\/api.fontshare.com\/v2\/css?f[]=satoshi@400,500,600,700&display=swap\");\r\n <\/style>\r\n\r\n <style>\r\n \/* ===== RESET E BASE ===== *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n html,\r\n body {\r\n font-family: \"Inter\", sans-serif;\r\n color: #fff;\r\n margin: 0;\r\n padding: 0;\r\n background: #000;\r\n width: 100%;\r\n min-height: 100vh;\r\n }\r\n\r\n body {\r\n overflow-x: hidden;\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n \/* ===== FUNDO COM GRADIENTE E ELEMENTOS DECORATIVOS ===== *\/\r\n body::before {\r\n content: \"\";\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100vh;\r\n background: linear-gradient(135deg, #000000 0%, #0a0e27 50%, #001a3f 100%);\r\n z-index: -2;\r\n pointer-events: none;\r\n animation: gradientShift 15s ease-in-out infinite;\r\n }\r\n\r\n \/* Orbe decorativo superior esquerdo *\/\r\n body::after {\r\n content: \"\";\r\n position: fixed;\r\n top: -100px;\r\n left: -100px;\r\n width: 400px;\r\n height: 400px;\r\n background: radial-gradient(circle, rgba(0, 240, 255, 0.08) 0%, transparent 70%);\r\n border-radius: 50%;\r\n z-index: -1;\r\n pointer-events: none;\r\n filter: blur(40px);\r\n animation: floatOrbe 8s ease-in-out infinite;\r\n }\r\n\r\n \/* Orbe decorativo inferior direito *\/\r\n .page-wrapper::before {\r\n content: \"\";\r\n position: fixed;\r\n bottom: -150px;\r\n right: -150px;\r\n width: 500px;\r\n height: 500px;\r\n background: radial-gradient(circle, rgba(0, 240, 255, 0.06) 0%, transparent 70%);\r\n border-radius: 50%;\r\n z-index: -1;\r\n pointer-events: none;\r\n filter: blur(50px);\r\n animation: floatOrbe 10s ease-in-out infinite reverse;\r\n }\r\n\r\n \/* ===== ANIMA\u00c7\u00d5ES ===== *\/\r\n @keyframes gradientShift {\r\n 0%, 100% {\r\n background: linear-gradient(135deg, #000000 0%, #0a0e27 50%, #001a3f 100%);\r\n }\r\n 50% {\r\n background: linear-gradient(135deg, #000000 0%, #0d1a3f 50%, #001a4f 100%);\r\n }\r\n }\r\n\r\n @keyframes floatOrbe {\r\n 0%, 100% {\r\n transform: translate(0, 0);\r\n }\r\n 50% {\r\n transform: translate(30px, -30px);\r\n }\r\n }\r\n\r\n @keyframes slideUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(40px) scale(0.95);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0) scale(1);\r\n }\r\n }\r\n\r\n @keyframes cardSlideUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(50px) scale(0.9);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0) scale(1);\r\n }\r\n }\r\n\r\n @keyframes glowPulse {\r\n 0%, 100% {\r\n box-shadow: 0 0 20px rgba(0, 240, 255, 0.3), 0 0 40px rgba(0, 240, 255, 0.1);\r\n }\r\n 50% {\r\n box-shadow: 0 0 30px rgba(0, 240, 255, 0.5), 0 0 60px rgba(0, 240, 255, 0.2);\r\n }\r\n }\r\n\r\n @keyframes iconPulse {\r\n 0%, 100% {\r\n transform: scale(1);\r\n filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.3));\r\n }\r\n 50% {\r\n transform: scale(1.05);\r\n filter: drop-shadow(0 0 16px rgba(0, 240, 255, 0.6));\r\n }\r\n }\r\n\r\n @keyframes borderGradient {\r\n 0% {\r\n border-image-source: linear-gradient(90deg, rgba(0, 240, 255, 0.2), rgba(0, 240, 255, 0.5), rgba(0, 240, 255, 0.2));\r\n }\r\n 50% {\r\n border-image-source: linear-gradient(90deg, rgba(0, 240, 255, 0.5), rgba(0, 240, 255, 0.8), rgba(0, 240, 255, 0.5));\r\n }\r\n 100% {\r\n border-image-source: linear-gradient(90deg, rgba(0, 240, 255, 0.2), rgba(0, 240, 255, 0.5), rgba(0, 240, 255, 0.2));\r\n }\r\n }\r\n\r\n @keyframes spinnerRotate {\r\n from {\r\n transform: rotate(0deg);\r\n }\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n }\r\n\r\n @keyframes spinnerRing {\r\n 0% {\r\n transform: rotate(0deg) scale(1);\r\n opacity: 1;\r\n }\r\n 100% {\r\n transform: rotate(360deg) scale(1);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n \/* ===== CONTAINER PRINCIPAL ===== *\/\r\n .page-wrapper {\r\n position: relative;\r\n z-index: 10;\r\n width: 100%;\r\n max-width: 100%;\r\n margin: 0;\r\n padding: 30px 20px;\r\n overflow: visible;\r\n flex: 1;\r\n }\r\n\r\n \/* ===== HERO SECTION ===== *\/\r\n .hero-section {\r\n text-align: center;\r\n margin-bottom: 40px;\r\n animation: slideUp 0.8s ease-out forwards;\r\n }\r\n\r\n .hero-section h1 {\r\n font-family: \"Poppins\", sans-serif;\r\n font-size: 2em;\r\n font-weight: 800;\r\n margin-bottom: 12px;\r\n background: linear-gradient(135deg, #fff 0%, #00f0ff 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n letter-spacing: -0.5px;\r\n text-shadow: 0 0 30px rgba(0, 240, 255, 0.2);\r\n }\r\n\r\n .hero-section p {\r\n font-size: 0.95em;\r\n color: #aaa;\r\n max-width: 100%;\r\n margin: 0 auto;\r\n line-height: 1.5;\r\n }\r\n\r\n \/* ===== CURRENT CHAT STATUS ===== *\/\r\n .current-chat-status {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 12px;\r\n margin: 30px 0 40px;\r\n animation: slideUp 0.8s ease-out forwards;\r\n animation-delay: 0.2s;\r\n opacity: 0;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .status-label {\r\n font-size: 0.8em;\r\n color: #aaa;\r\n text-transform: uppercase;\r\n letter-spacing: 0.4px;\r\n }\r\n\r\n .status-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n padding: 6px 12px;\r\n background: rgba(0, 240, 255, 0.1);\r\n border: 1px solid rgba(0, 240, 255, 0.3);\r\n border-radius: 16px;\r\n color: #00f0ff;\r\n font-weight: 600;\r\n font-size: 0.75em;\r\n text-transform: uppercase;\r\n letter-spacing: 0.3px;\r\n box-shadow: 0 0 12px rgba(0, 240, 255, 0.2);\r\n }\r\n\r\n .status-dot {\r\n width: 8px;\r\n height: 8px;\r\n background: #00f0ff;\r\n border-radius: 50%;\r\n animation: glowPulse 2s ease-in-out infinite;\r\n }\r\n\r\n \/* ===== GRID DE CARDS ===== *\/\r\n .cards-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\r\n gap: 20px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .ai-card {\r\n background: rgba(0, 0, 0, 0.6);\r\n backdrop-filter: blur(16px);\r\n border-radius: 16px;\r\n padding: 24px 18px;\r\n border: 1px solid rgba(0, 240, 255, 0.15);\r\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.05);\r\n position: relative;\r\n overflow: hidden;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n animation: cardSlideUp 0.6s ease-out forwards;\r\n opacity: 0;\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n }\r\n\r\n .ai-card:nth-child(1) {\r\n animation-delay: 0.3s;\r\n }\r\n\r\n .ai-card:nth-child(2) {\r\n animation-delay: 0.4s;\r\n }\r\n\r\n .ai-card:nth-child(3) {\r\n animation-delay: 0.5s;\r\n }\r\n\r\n .ai-card:nth-child(4) {\r\n animation-delay: 0.6s;\r\n }\r\n\r\n \/* Efeito de brilho sutil no card *\/\r\n .ai-card::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 1px;\r\n background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.3), transparent);\r\n pointer-events: none;\r\n }\r\n\r\n .ai-card:hover {\r\n border-color: rgba(0, 240, 255, 0.4);\r\n background: rgba(0, 0, 0, 0.7);\r\n box-shadow: \r\n 0 12px 48px rgba(0, 240, 255, 0.2),\r\n 0 0 30px rgba(0, 240, 255, 0.15),\r\n inset 0 1px 1px rgba(255, 255, 255, 0.08);\r\n transform: translateY(-8px) scale(1.02);\r\n }\r\n\r\n .ai-card:active {\r\n transform: translateY(-4px) scale(0.98);\r\n }\r\n\r\n \/* ===== \u00cdCONE DO CARD ===== *\/\r\n .card-icon {\r\n width: 50px;\r\n height: 50px;\r\n margin: 0 auto 16px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 2em;\r\n animation: iconPulse 3s ease-in-out infinite;\r\n }\r\n\r\n .ai-card:nth-child(1) .card-icon {\r\n animation-delay: 0s;\r\n }\r\n\r\n .ai-card:nth-child(2) .card-icon {\r\n animation-delay: 0.5s;\r\n }\r\n\r\n .ai-card:nth-child(3) .card-icon {\r\n animation-delay: 1s;\r\n }\r\n\r\n .ai-card:nth-child(4) .card-icon {\r\n animation-delay: 1.5s;\r\n }\r\n\r\n \/* ===== T\u00cdTULOS DO CARD ===== *\/\r\n .card-titles {\r\n text-align: center;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .card-title-en {\r\n font-family: \"Poppins\", sans-serif;\r\n font-size: 1em;\r\n font-weight: 700;\r\n color: #fff;\r\n margin-bottom: 4px;\r\n }\r\n\r\n .card-title-pt {\r\n font-size: 0.8em;\r\n color: #00f0ff;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 0.4px;\r\n }\r\n\r\n \/* ===== DESCRI\u00c7\u00c3O DO CARD ===== *\/\r\n .card-description {\r\n font-size: 0.8em;\r\n color: #aaa;\r\n text-align: center;\r\n margin-bottom: 16px;\r\n line-height: 1.4;\r\n flex-grow: 1;\r\n }\r\n\r\n \/* ===== BOT\u00c3O DO CARD ===== *\/\r\n .card-button {\r\n width: 100%;\r\n padding: 10px 16px;\r\n border: none;\r\n border-radius: 10px;\r\n background: linear-gradient(135deg, #00f0ff 0%, #0099cc 100%);\r\n color: #000;\r\n font-weight: 700;\r\n font-size: 0.8em;\r\n font-family: \"Poppins\", sans-serif;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n text-transform: uppercase;\r\n letter-spacing: 0.4px;\r\n position: relative;\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 6px;\r\n margin-top: auto;\r\n }\r\n\r\n .card-button::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\r\n transition: left 0.5s ease;\r\n }\r\n\r\n .card-button:hover {\r\n box-shadow: 0 8px 20px rgba(0, 240, 255, 0.4);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .card-button:hover::before {\r\n left: 100%;\r\n }\r\n\r\n .card-button:active {\r\n transform: scale(0.97);\r\n }\r\n\r\n \/* ===== OVERLAY DE TROCA DE CHAT ===== *\/\r\n #chat-overlay {\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(0, 0, 0, 0.85);\r\n backdrop-filter: blur(8px);\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 9999;\r\n padding: 16px;\r\n animation: fadeIn 0.3s ease-out forwards;\r\n }\r\n\r\n #chat-overlay.show {\r\n display: flex;\r\n }\r\n\r\n @keyframes fadeIn {\r\n from {\r\n opacity: 0;\r\n backdrop-filter: blur(0px);\r\n }\r\n to {\r\n opacity: 1;\r\n backdrop-filter: blur(8px);\r\n }\r\n }\r\n\r\n .chat-overlay-content {\r\n background: rgba(0, 0, 0, 0.8);\r\n border: 1px solid rgba(0, 240, 255, 0.3);\r\n border-radius: 20px;\r\n padding: 40px 32px;\r\n text-align: center;\r\n max-width: 360px;\r\n width: 100%;\r\n box-shadow: \r\n 0 20px 60px rgba(0, 0, 0, 0.5),\r\n 0 0 40px rgba(0, 240, 255, 0.2);\r\n backdrop-filter: blur(16px);\r\n animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n @keyframes popIn {\r\n from {\r\n opacity: 0;\r\n transform: scale(0.8);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n }\r\n\r\n .chat-overlay-content p {\r\n margin: 12px 0 0;\r\n font-size: 0.95em;\r\n color: #aaa;\r\n line-height: 1.5;\r\n }\r\n\r\n .chat-overlay-content p:first-of-type {\r\n margin-top: 0;\r\n color: #fff;\r\n font-weight: 600;\r\n }\r\n\r\n \/* ===== SPINNER SOFISTICADO ===== *\/\r\n .spinner {\r\n width: 48px;\r\n height: 48px;\r\n margin: 0 auto 20px;\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .spinner::before {\r\n content: \"\";\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n border: 2px solid rgba(0, 240, 255, 0.2);\r\n border-radius: 50%;\r\n animation: spinnerRotate 2s linear infinite;\r\n }\r\n\r\n .spinner::after {\r\n content: \"\";\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n border: 2px solid transparent;\r\n border-top-color: #00f0ff;\r\n border-right-color: #00f0ff;\r\n border-radius: 50%;\r\n animation: spinnerRotate 1s linear infinite reverse;\r\n }\r\n\r\n \/* ===== RESPONSIVIDADE ===== *\/\r\n @media (max-width: 1024px) {\r\n .cards-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 18px;\r\n }\r\n\r\n .hero-section h1 {\r\n font-size: 1.6em;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .page-wrapper {\r\n padding: 20px 16px;\r\n }\r\n\r\n .hero-section {\r\n margin-bottom: 30px;\r\n }\r\n\r\n .hero-section h1 {\r\n font-size: 1.4em;\r\n }\r\n\r\n .hero-section p {\r\n font-size: 0.9em;\r\n }\r\n\r\n .cards-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 16px;\r\n }\r\n\r\n .ai-card {\r\n padding: 20px 14px;\r\n }\r\n\r\n .card-icon {\r\n width: 45px;\r\n height: 45px;\r\n font-size: 1.8em;\r\n }\r\n\r\n .card-title-en {\r\n font-size: 0.95em;\r\n }\r\n\r\n .card-description {\r\n font-size: 0.75em;\r\n }\r\n\r\n .current-chat-status {\r\n flex-direction: column;\r\n gap: 8px;\r\n margin: 20px 0 30px;\r\n }\r\n\r\n \/* Orbes menos vis\u00edveis em mobile *\/\r\n body::after {\r\n opacity: 0.3;\r\n }\r\n\r\n .page-wrapper::before {\r\n opacity: 0.3;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .page-wrapper {\r\n padding: 16px 12px;\r\n }\r\n\r\n .hero-section h1 {\r\n font-size: 1.2em;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .hero-section p {\r\n font-size: 0.85em;\r\n }\r\n\r\n .cards-grid {\r\n grid-template-columns: 1fr;\r\n gap: 14px;\r\n }\r\n\r\n .ai-card {\r\n padding: 16px 12px;\r\n }\r\n\r\n .card-icon {\r\n width: 40px;\r\n height: 40px;\r\n font-size: 1.6em;\r\n margin: 0 auto 12px;\r\n }\r\n\r\n .card-title-en {\r\n font-size: 0.9em;\r\n }\r\n\r\n .card-title-pt {\r\n font-size: 0.7em;\r\n }\r\n\r\n .card-description {\r\n font-size: 0.7em;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .card-button {\r\n padding: 8px 12px;\r\n font-size: 0.75em;\r\n }\r\n\r\n .chat-overlay-content {\r\n padding: 24px 16px;\r\n }\r\n\r\n .spinner {\r\n width: 36px;\r\n height: 36px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div class=\"page-wrapper\">\r\n <!-- HERO SECTION -->\r\n <div class=\"hero-section\">\r\n <h1>Choose Your AI Experience<\/h1>\r\n <p>Select one of the assistants below to open a dedicated chat experience. Each flow is specialized to help you with different needs.<\/p>\r\n <\/div>\r\n\r\n <!-- CURRENT CHAT STATUS -->\r\n <div class=\"current-chat-status\">\r\n <span class=\"status-label\">Current Flow:<\/span>\r\n <div class=\"status-badge\">\r\n <span class=\"status-dot\"><\/span>\r\n <span id=\"current-chat-badge-en\">Loading\u2026<\/span>\r\n <\/div>\r\n <div class=\"status-badge\">\r\n <span class=\"status-dot\"><\/span>\r\n <span id=\"current-chat-badge-pt\">Carregando\u2026<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- GRID DE CARDS DE IA -->\r\n <div class=\"cards-grid\">\r\n <!-- DEALER CARD -->\r\n <div class=\"ai-card\">\r\n <div class=\"card-icon\">\ud83e\udd1d<\/div>\r\n <div class=\"card-titles\">\r\n <div class=\"card-title-en\">Dealer Attendant<\/div>\r\n <div class=\"card-title-pt\">Atendente - Dealer<\/div>\r\n <\/div>\r\n <p class=\"card-description\">Get specialized support for dealer-related inquiries and assistance with your dealership operations.<\/p>\r\n <button class=\"card-button\" type=\"button\" onclick=\"changeChat('dealer')\">\r\n Open Chat\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- IMAGE OPTIMIZER CARD -->\r\n <div class=\"ai-card\">\r\n <div class=\"card-icon\">\ud83d\uddbc\ufe0f<\/div>\r\n <div class=\"card-titles\">\r\n <div class=\"card-title-en\">Image Optimizer<\/div>\r\n <div class=\"card-title-pt\">Otimizar Imagem<\/div>\r\n <\/div>\r\n <p class=\"card-description\">Enhance and optimize your images with AI-powered tools for better visual content quality.<\/p>\r\n <button class=\"card-button\" type=\"button\" onclick=\"changeChat('image')\">\r\n Open Chat\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- DEALER AD ASSISTANT CARD -->\r\n <div class=\"ai-card\">\r\n <div class=\"card-icon\">\ud83d\udce2<\/div>\r\n <div class=\"card-titles\">\r\n <div class=\"card-title-en\">Dealer Ad Assistant<\/div>\r\n <div class=\"card-title-pt\">Assistente de An\u00fancio - Dealer<\/div>\r\n <\/div>\r\n <p class=\"card-description\">Create and optimize advertising campaigns specifically designed for dealership promotion.<\/p>\r\n <button class=\"card-button\" type=\"button\" onclick=\"changeChat('dealer_ad')\">\r\n Open Chat\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- GENERAL CREATIVE CARD -->\r\n <div class=\"ai-card\">\r\n <div class=\"card-icon\">\u2728<\/div>\r\n <div class=\"card-titles\">\r\n <div class=\"card-title-en\">General Creative<\/div>\r\n <div class=\"card-title-pt\">Criativo - Geral<\/div>\r\n <\/div>\r\n <p class=\"card-description\">Unlock creative possibilities with our general-purpose AI assistant for any creative need.<\/p>\r\n <button class=\"card-button\" type=\"button\" onclick=\"changeChat('creative')\">\r\n Open Chat\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- OVERLAY DE TROCA DE CHAT -->\r\n <div id=\"chat-overlay\">\r\n <div class=\"chat-overlay-content\">\r\n <div class=\"spinner\"><\/div>\r\n <p>Switching Chat\u2026<\/p>\r\n <p>Loading your experience, please wait a moment.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- SCRIPT: mapa dos chats + sele\u00e7\u00e3o por query param -->\r\n <script>\r\n \/\/ Mapa: chave => nome e token\r\n const CHAT_CONFIG = {\r\n dealer: {\r\n labelEN: \"Dealer Attendant\",\r\n labelPT: \"Atendente - Dealer\",\r\n token: \"HeWLcYatKhGpDAPNfnyZaWZv\"\r\n },\r\n image: {\r\n labelEN: \"Image Optimizer\",\r\n labelPT: \"Otimizar Imagem\",\r\n token: \"WKZ1dop9dsthuoyHcmBLx6ie\"\r\n },\r\n dealer_ad: {\r\n labelEN: \"Dealer Ad Assistant\",\r\n labelPT: \"Assistente de An\u00fancio - Dealer\",\r\n token: \"z948s2KkMxdgo4xCr2Aeja5w\"\r\n },\r\n creative: {\r\n labelEN: \"General Creative\",\r\n labelPT: \"Criativo - Geral\",\r\n token: \"QAgXfD8erTCKQB2GiQdsMhhe\"\r\n }\r\n };\r\n\r\n function getCurrentChatKey() {\r\n const params = new URLSearchParams(window.location.search);\r\n return params.get(\"chat\") || \"dealer\"; \/\/ default\r\n }\r\n\r\n function shouldAutoOpen() {\r\n const params = new URLSearchParams(window.location.search);\r\n return params.get(\"open\") === \"1\";\r\n }\r\n\r\n function showOverlay() {\r\n var overlay = document.getElementById(\"chat-overlay\");\r\n if (overlay) {\r\n overlay.classList.add(\"show\");\r\n }\r\n }\r\n\r\n function changeChat(key) {\r\n const params = new URLSearchParams(window.location.search);\r\n params.set(\"chat\", key);\r\n params.set(\"open\", \"1\"); \/\/ marca para abrir automaticamente\r\n\r\n \/\/ Mostra o overlay e logo em seguida troca a URL (reload)\r\n showOverlay();\r\n setTimeout(function () {\r\n window.location.search = params.toString();\r\n }, 200);\r\n }\r\n\r\n \/\/ Atualiza o badge com o chat atual\r\n (function updateCurrentLabels() {\r\n const chatKey = getCurrentChatKey();\r\n const conf = CHAT_CONFIG[chatKey] || CHAT_CONFIG.dealer;\r\n\r\n const badgeEn = document.getElementById(\"current-chat-badge-en\");\r\n const badgePt = document.getElementById(\"current-chat-badge-pt\");\r\n\r\n if (badgeEn) badgeEn.textContent = conf.labelEN;\r\n if (badgePt) badgePt.textContent = conf.labelPT;\r\n })();\r\n <\/script>\r\n\r\n <!-- CARREGAMENTO DO SDK DO CHATWOOT COM O TOKEN CORRETO + AUTO-OPEN -->\r\n <script>\r\n (function (d, t) {\r\n var BASE_URL = \"https:\/\/inbox.zoeflexsolutions.com\/\";\r\n var g = d.createElement(t),\r\n s = d.getElementsByTagName(t)[0];\r\n g.src = BASE_URL + \"\/packs\/js\/sdk.js\";\r\n g.defer = true;\r\n g.async = true;\r\n s.parentNode.insertBefore(g, s);\r\n\r\n var chatKey = getCurrentChatKey();\r\n var conf = CHAT_CONFIG[chatKey] || CHAT_CONFIG.dealer;\r\n var autoOpen = shouldAutoOpen();\r\n\r\n \/\/ Quando o widget estiver pronto nesta carga de p\u00e1gina\r\n window.addEventListener(\"chatwoot:ready\", function () {\r\n if (autoOpen && window.$chatwoot && typeof window.$chatwoot.toggle === \"function\") {\r\n window.$chatwoot.toggle(\"open\");\r\n }\r\n });\r\n\r\n g.onload = function () {\r\n window.chatwootSDK.run({\r\n websiteToken: conf.token,\r\n baseUrl: BASE_URL\r\n });\r\n };\r\n })(document, \"script\");\r\n <\/script>\r\n<\/body>\r\n\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>IA Agent – Sample Choose Your AI Experience Select one of the assistants below to open a dedicated chat experience. Each flow is specialized to help you with different needs. Current Flow: Loading\u2026 Carregando\u2026 \ud83e\udd1d Dealer Attendant Atendente – Dealer Get specialized support for dealer-related inquiries and assistance with your dealership operations. Open Chat \ud83d\uddbc\ufe0f […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1199","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/zoeflexsolutions.com\/pt\/wp-json\/wp\/v2\/pages\/1199","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zoeflexsolutions.com\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zoeflexsolutions.com\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zoeflexsolutions.com\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zoeflexsolutions.com\/pt\/wp-json\/wp\/v2\/comments?post=1199"}],"version-history":[{"count":34,"href":"https:\/\/zoeflexsolutions.com\/pt\/wp-json\/wp\/v2\/pages\/1199\/revisions"}],"predecessor-version":[{"id":1297,"href":"https:\/\/zoeflexsolutions.com\/pt\/wp-json\/wp\/v2\/pages\/1199\/revisions\/1297"}],"wp:attachment":[{"href":"https:\/\/zoeflexsolutions.com\/pt\/wp-json\/wp\/v2\/media?parent=1199"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}