{"id":33,"date":"2026-10-25T12:04:05","date_gmt":"2026-10-25T12:04:05","guid":{"rendered":"http:\/\/localhost\/aistheticpro%20theme\/index.php\/ai-chat\/"},"modified":"2026-10-25T18:01:51","modified_gmt":"2026-10-25T18:01:51","slug":"ai-chat","status":"publish","type":"page","link":"https:\/\/msoulpro.com\/aisthetic\/ai-chat\/","title":{"rendered":"AI Chat Showcase"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"33\" class=\"elementor elementor-33\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-sec_ai_hero elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"sec_ai_hero\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-col_ai_hero\" data-id=\"col_ai_hero\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-w_ai_dh elementor-widget elementor-widget-aisthetic_dual_heading\" data-id=\"w_ai_dh\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"aisthetic_dual_heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"aisthetic-widget-wrapper aisth-dual-heading-wrap aisth-style-gradient aisth-mode-inline\">\n\t\t\t\n\t\t\t\t\t\t\t<div class=\"aisth-heading-pretitle-wrap\">\n\t\t\t\t\t<span class=\"aisth-heading-pretitle\">INTELLIGENT VISITOR ENGAGEMENT<\/span>\n\t\t\t\t<\/div>\n\t\t\t\n\t\t\t<h1 class=\"aisth-dual-heading-title\">\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"aisth-heading-primary\">Local Zero-Cost<\/span>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"aisth-heading-highlight\">AI Chat Companion<\/span>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t<\/h1>\n\n\t\t\t\t\t\t\t<p class=\"aisth-heading-description\">Deliver instant support to visitors with zero API token cost using 30 built-in industry knowledge packs, or connect OpenAI, DeepSeek, and local Ollama models with seamless WhatsApp lead handoff.<\/p>\n\t\t\t\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-sec_ai_body elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"sec_ai_body\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-col_ai_body\" data-id=\"col_ai_body\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-w_ai_body_html elementor-widget elementor-widget-html\" data-id=\"w_ai_body_html\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"msoul-page msoul-aichat\" style=\"max-width: 1240px; margin: 0 auto; padding: 20px 20px 80px;\">\n\n    <!-- AI Architecture Overview Banner -->\n    <div class=\"msoul-card msoul-aichat-banner\" style=\"margin-bottom: 40px; border-color: var(--msoul-cyan); padding: 32px; border-radius: 16px;\">\n        <div style=\"display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;\">\n            <div style=\"max-width: 760px;\">\n                <span class=\"msoul-tier-badge msoul-tier-annual\" style=\"font-weight: 700; border-radius: 999px; padding: 4px 14px; font-size: 0.8rem; display: inline-block; margin-bottom: 8px;\">MULTI-PROVIDER AI ROUTER \u2022 0-COST LOCAL ENGINE<\/span>\n                <h2 style=\"font-size: 1.65rem; margin: 12px 0 8px; font-weight: 800;\">The Smartest AI Assistant Built Into Any WordPress Theme<\/h2>\n                <p class=\"msoul-muted-text\" style=\"margin: 0; font-size: 0.95rem; line-height: 1.6;\">\n                    Most AI plugins burn through costly API tokens on repetitive questions. Aisthetic AI features a built-in <strong>Local FAQ Matcher<\/strong> loaded with 30 industry packs that instantly answers common questions with zero API cost and zero latency. When complex queries arrive, it intelligently routes to OpenAI, Claude, DeepSeek, or your local Ollama server.\n                <\/p>\n            <\/div>\n            <div class=\"msoul-stat-box\" style=\"display: flex; flex-direction: column; gap: 8px; padding: 20px 28px; border-radius: 12px; text-align: center; min-width: 190px;\">\n                <div style=\"font-size: 2.2rem; font-weight: 800; color: #0284C7;\">85%<\/div>\n                <div class=\"msoul-muted-text\" style=\"font-size: 0.82rem; font-weight: 600;\">Queries Answered at $0 API Cost<\/div>\n                <div style=\"font-size: 0.78rem; color: #10B981; font-weight: 700;\">Sub-10ms Instant Latency<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- LIVE AI ASSISTANT SANDBOX - 3 TEMPLATES SWITCHER -->\n    <div class=\"msoul-card msoul-ai-sandbox\" style=\"margin-bottom: 50px; padding: 32px; border-radius: 16px;\">\n        \n        <!-- Header & Template Selector Tabs -->\n        <div style=\"display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; border-bottom: 1px solid var(--msoul-border); padding-bottom: 20px; margin-bottom: 24px;\">\n            <div style=\"display: flex; align-items: center; gap: 12px;\">\n                <div style=\"width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #0284C7, #7C3AED); display: flex; align-items: center; justify-content: center; font-weight: 800; color: #FFF; font-size: 1.15rem; box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);\">AI<\/div>\n                <div>\n                    <h3 style=\"font-size: 1.35rem; margin: 0 0 4px; font-weight: 800;\">Live AI Assistant Sandbox<\/h3>\n                    <div style=\"font-size: 0.82rem; color: #10B981; display: flex; align-items: center; gap: 6px; font-weight: 600;\">\n                        <span style=\"width: 8px; height: 8px; border-radius: 50%; background: #10B981; display: inline-block; box-shadow: 0 0 6px #10B981;\"><\/span> Online \u2022 Switch between all 3 design templates below\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- 3 MODERN SEGMENTED TEMPLATE TABS -->\n            <div class=\"msoul-tabs-nav\" id=\"aiTemplateTabs\" role=\"tablist\">\n                <button type=\"button\" class=\"ai-tpl-tab msoul-tab-btn active\" data-template=\"glassmorphism\" role=\"tab\" aria-selected=\"true\">\n                    <span>\u2728 Glassmorphism Modal<\/span>\n                <\/button>\n                <button type=\"button\" class=\"ai-tpl-tab msoul-tab-btn\" data-template=\"minimal\" role=\"tab\" aria-selected=\"false\">\n                    <span>\u26a1 Clean Minimalist<\/span>\n                <\/button>\n                <button type=\"button\" class=\"ai-tpl-tab msoul-tab-btn\" data-template=\"drawer\" role=\"tab\" aria-selected=\"false\">\n                    <span>\ud83d\udcf1 Docked Side Drawer<\/span>\n                <\/button>\n            <\/div>\n        <\/div>\n\n        <!-- Template Description Pill -->\n        <div id=\"aiTemplateBadge\" class=\"msoul-template-badge\" style=\"margin-bottom: 22px; padding: 12px 18px; border-radius: 10px; font-size: 0.88rem; display: flex; justify-content: space-between; align-items: center;\">\n            <span><strong>Template 1: Glassmorphic Modal<\/strong> \u2014 Floating blurred acrylic backdrop with neon glow rings, ideal for high-tech SaaS, crypto, and modern design agencies.<\/span>\n            <span style=\"font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; padding: 4px 10px; border-radius: 6px;\" class=\"msoul-live-tag\">Live Preview<\/span>\n        <\/div>\n\n        <!-- Sample Quick Prompts -->\n        <div style=\"margin-bottom: 24px;\">\n            <div class=\"msoul-muted-text\" style=\"font-size: 0.85rem; font-weight: 600; margin-bottom: 10px;\">Click a sample question to test response speed:<\/div>\n            <div style=\"display: flex; gap: 10px; flex-wrap: wrap;\" id=\"samplePrompts\">\n                <button type=\"button\" class=\"sample-prompt-btn\" data-q=\"What is the refund guarantee policy?\" data-a=\"Aisthetic Pro offers an unconditional 14-day money-back guarantee. If you're not completely satisfied with performance or features, simply email support for a full 100% refund.\">What is the refund policy?<\/button>\n                <button type=\"button\" class=\"sample-prompt-btn\" data-q=\"Do I need to buy extra Elementor addon packs?\" data-a=\"No! Aisthetic Pro comes with 42 native Elementor widgets built directly into the theme. You can safely replace Essential Addons, Ultimate Addons, and save over 1.2MB in bloated JavaScript.\">Do I need extra Elementor addons?<\/button>\n                <button type=\"button\" class=\"sample-prompt-btn\" data-q=\"How does the 30-feature WooCommerce suite work?\" data-a=\"The 30 WooCommerce conversion features (like variation swatches, slide-out cart, dynamic free shipping bar, and quick view) are built into the theme core. You can toggle each module on or off in theme settings.\">How does WooCommerce suite work?<\/button>\n                <button type=\"button\" class=\"sample-prompt-btn\" data-q=\"Can I hand off chat to WhatsApp or email?\" data-a=\"Yes! Aisthetic AI features automated human handoff. Visitors can smoothly transition to WhatsApp chat or submit a ticket via email with full chat transcript attached.\">Can I hand off to WhatsApp?<\/button>\n            <\/div>\n        <\/div>\n\n        <!-- DYNAMIC TEMPLATE STAGE CONTAINER -->\n        <div id=\"aiTemplateStage\" style=\"display: flex; justify-content: center; align-items: stretch; transition: all 0.3s ease;\">\n            \n            <!-- CHAT INTERFACE BOX -->\n            <div id=\"aiChatWrapper\" class=\"aisthetic-tpl-glassmorphism\" style=\"width: 100%; max-width: 680px; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: all 0.35s ease;\">\n                \n                <!-- Chat Window Header -->\n                <div id=\"aiChatHeader\" style=\"padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--msoul-border);\">\n                    <div style=\"display: flex; align-items: center; gap: 10px;\">\n                        <div id=\"aiHeaderAvatar\" style=\"width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #0284C7, #7C3AED); display: flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 800; color: #FFF;\">AI<\/div>\n                        <div>\n                            <div id=\"aiBotNameLabel\" style=\"font-size: 0.95rem; font-weight: 800;\">Aisthetic Smart Assistant<\/div>\n                            <div id=\"aiBotSubtitleLabel\" style=\"font-size: 0.75rem; font-weight: 600;\">Local Knowledge Matcher (0ms Latency)<\/div>\n                        <\/div>\n                    <\/div>\n                    <div style=\"display: flex; align-items: center; gap: 8px;\">\n                        <span id=\"aiTemplateTag\" style=\"font-size: 0.72rem; font-weight: 800; text-transform: uppercase; padding: 3px 10px; border-radius: 6px;\">Glassmorphism<\/span>\n                        <div style=\"width: 10px; height: 10px; border-radius: 50%; background: #10B981; box-shadow: 0 0 8px #10B981;\" title=\"Bot Active\"><\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Chat Simulation Log -->\n                <div id=\"aiChatBox\" style=\"background: transparent; padding: 20px; height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px;\">\n                    <div style=\"display: flex; gap: 12px; align-items: flex-start;\">\n                        <div style=\"width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #0284C7, #7C3AED); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; color: #FFF; flex-shrink: 0;\">AI<\/div>\n                        <div class=\"ai-bot-bubble\" style=\"padding: 12px 18px; border-radius: 0 14px 14px 14px; font-size: 0.88rem; max-width: 80%; line-height: 1.55;\">\n                            Hello! I am your Aisthetic AI Assistant. Try asking me about our 42 native widgets, WooCommerce conversion modules, or licensing policies!\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Lead Capture \/ WhatsApp Bar -->\n                <div id=\"aiHandoffBar\" style=\"padding: 10px 20px; border-top: 1px solid var(--msoul-border); display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem;\">\n                    <span>Need human assistance?<\/span>\n                    <a href=\"https:\/\/wa.me\/?text=Hello%20Aisthetic%20Support\" target=\"_blank\" style=\"color: #10B981; text-decoration: none; font-weight: 700; display: flex; align-items: center; gap: 5px;\">\n                        <span>\ud83d\udcac Chat on WhatsApp<\/span> \u2192\n                    <\/a>\n                <\/div>\n\n                <!-- Chat Input Bar -->\n                <div id=\"aiChatFooter\" style=\"border-top: 1px solid var(--msoul-border); padding: 14px 20px; display: flex; gap: 10px;\">\n                    <input type=\"text\" id=\"aiChatInput\" class=\"msoul-chat-input\" placeholder=\"Ask a question about Aisthetic Pro...\" aria-label=\"Ask a question\">\n                    <button type=\"button\" id=\"aiChatSend\" class=\"msoul-chat-send\">Send<\/button>\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n    <!-- Multi-Provider Compatibility Matrix -->\n    <div style=\"margin-bottom: 60px;\">\n        <div style=\"text-align: center; margin-bottom: 36px;\">\n            <span class=\"msoul-eyebrow\">UNLIMITED COMPATIBILITY<\/span>\n            <h2 style=\"font-size: 2.2rem; margin: 10px 0 14px; font-weight: 800;\">Connect Your Preferred AI Provider<\/h2>\n            <p class=\"msoul-muted-text\" style=\"font-size: 1.05rem; max-width: 660px; margin: 0 auto;\">Enter your own API key or run 100% private models via local Ollama. Zero vendor lock-in.<\/p>\n        <\/div>\n\n        <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;\">\n            <div class=\"msoul-card msoul-provider-card\" style=\"padding: 26px; text-align: center; border-radius: 14px;\">\n                <div style=\"font-size: 2.2rem; margin-bottom: 12px;\">\ud83e\udde0<\/div>\n                <h3 style=\"font-size: 1.25rem; margin: 0 0 8px; font-weight: 800;\">OpenAI (GPT-4o &amp; Mini)<\/h3>\n                <p class=\"msoul-muted-text\" style=\"font-size: 0.86rem; line-height: 1.55; margin: 0;\">Connect your OpenAI API key for rapid reasoning, vision analysis, and contextual memory.<\/p>\n            <\/div>\n            <div class=\"msoul-card msoul-provider-card\" style=\"padding: 26px; text-align: center; border-radius: 14px;\">\n                <div style=\"font-size: 2.2rem; margin-bottom: 12px;\">\u26a1<\/div>\n                <h3 style=\"font-size: 1.25rem; margin: 0 0 8px; font-weight: 800;\">DeepSeek V3 \/ R1<\/h3>\n                <p class=\"msoul-muted-text\" style=\"font-size: 0.86rem; line-height: 1.55; margin: 0;\">Ultra-low cost high-performance inference via DeepSeek official API or OpenRouter.<\/p>\n            <\/div>\n            <div class=\"msoul-card msoul-provider-card\" style=\"padding: 26px; text-align: center; border-radius: 14px;\">\n                <div style=\"font-size: 2.2rem; margin-bottom: 12px;\">\ud83d\udee1\ufe0f<\/div>\n                <h3 style=\"font-size: 1.25rem; margin: 0 0 8px; font-weight: 800;\">Local Ollama &amp; Llama 3<\/h3>\n                <p class=\"msoul-muted-text\" style=\"font-size: 0.86rem; line-height: 1.55; margin: 0;\">100% private, self-hosted AI models running on your own GPU server with zero data leaving your network.<\/p>\n            <\/div>\n            <div class=\"msoul-card msoul-provider-card\" style=\"padding: 26px; text-align: center; border-radius: 14px;\">\n                <div style=\"font-size: 2.2rem; margin-bottom: 12px;\">\ud83d\ude80<\/div>\n                <h3 style=\"font-size: 1.25rem; margin: 0 0 8px; font-weight: 800;\">Groq LPU Engine<\/h3>\n                <p class=\"msoul-muted-text\" style=\"font-size: 0.86rem; line-height: 1.55; margin: 0;\">Sub-100ms ultra-fast inference for instantaneous customer support answers.<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Final CTA -->\n    <div style=\"text-align: center;\">\n        <div class=\"msoul-card msoul-aichat-cta\" style=\"padding: 42px; border-radius: 20px;\">\n            <h3 style=\"font-size: 1.85rem; margin: 0 0 12px; font-weight: 800;\">Add Intelligent AI Customer Support Today<\/h3>\n            <p class=\"msoul-muted-text\" style=\"font-size: 1.05rem; max-width: 620px; margin: 0 auto 24px; line-height: 1.6;\">Capture qualified leads, automate customer inquiries 24\/7, and reduce support ticket volume.<\/p>\n            <a href=\"https:\/\/msoulpro.com\/aisthetic\/pricing\/\" class=\"msoul-btn-primary\" style=\"padding: 14px 34px; font-size: 1rem; border-radius: 999px; text-decoration: none; font-weight: 700; display: inline-block;\">Get Aisthetic Pro ($59\/yr) \u2192<\/a>\n        <\/div>\n    <\/div>\n\n<\/div>\n\n<!-- INTERACTIVE 3-TEMPLATE LOGIC SCRIPT -->\n<script>\n(function() {\n    function initAiSandbox() {\n        const tabs = document.querySelectorAll('.ai-tpl-tab');\n        const wrapper = document.getElementById('aiChatWrapper');\n        const badge = document.getElementById('aiTemplateBadge');\n        const tag = document.getElementById('aiTemplateTag');\n        const header = document.getElementById('aiChatHeader');\n        const footer = document.getElementById('aiChatFooter');\n        const chatBox = document.getElementById('aiChatBox');\n        const input = document.getElementById('aiChatInput');\n        const sendBtn = document.getElementById('aiChatSend');\n        const sampleBtns = document.querySelectorAll('.sample-prompt-btn');\n\n        if (!wrapper || !tabs.length) return;\n\n        function checkIsLight() {\n            return document.documentElement.getAttribute('data-color-mode') === 'light' || document.body.classList.contains('aist-light-mode');\n        }\n\n        \/\/ Template metadata with dual-mode awareness\n        function getTemplateConfig(tplKey, isLight) {\n            if (tplKey === 'minimal') {\n                return {\n                    name: 'Clean Minimalist',\n                    badgeHtml: '<span><strong>Template 2: Clean Minimalist<\/strong> \u2014 Crisp high-contrast floating card with sharp typography and subtle borders, ideal for legal, healthcare, and corporate portfolios.<\/span><span style=\"font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; padding: 4px 10px; border-radius: 6px;\" class=\"msoul-live-tag\">Live Preview<\/span>',\n                    tag: 'Minimalist',\n                    style: {\n                        maxWidth: '480px',\n                        borderRadius: '12px',\n                        background: isLight ? '#FFFFFF' : '#121A2E',\n                        border: isLight ? '1px solid #CBD5E1' : '1px solid #26314D',\n                        boxShadow: isLight ? '0 16px 36px -10px rgba(0, 0, 0, 0.12)' : '0 16px 36px -10px rgba(0, 0, 0, 0.5)',\n                        backdropFilter: 'none'\n                    },\n                    headerBg: isLight ? '#F8FAFC' : '#0B1021',\n                    footerBg: isLight ? '#F8FAFC' : '#0B1021',\n                    botBubbleBg: isLight ? '#F1F5F9' : '#18223D',\n                    botTextColor: isLight ? '#0F172A' : '#F4F7FF',\n                    tagColor: isLight ? '#0284C7' : '#2EB4FF',\n                    tagBg: isLight ? '#E0F2FE' : 'rgba(46, 180, 255, 0.15)'\n                };\n            } else if (tplKey === 'drawer') {\n                return {\n                    name: 'Docked Side Drawer',\n                    badgeHtml: '<span><strong>Template 3: Docked Side Drawer<\/strong> \u2014 Full-height slide-out offcanvas drawer with quick actions, lead capture, and appointment booking handoff.<\/span><span style=\"font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; padding: 4px 10px; border-radius: 6px;\" class=\"msoul-live-tag\">Live Preview<\/span>',\n                    tag: 'Side Drawer',\n                    style: {\n                        maxWidth: '520px',\n                        borderRadius: '16px 0 0 16px',\n                        background: isLight ? '#FFFFFF' : '#0D1424',\n                        border: isLight ? '2px solid #7C3AED' : '2px solid #7C5CFF',\n                        boxShadow: isLight ? '-15px 0 40px rgba(124, 58, 237, 0.15)' : '-15px 0 50px rgba(0,0,0,0.7), 0 0 35px rgba(124,92,255,0.25)',\n                        backdropFilter: 'blur(20px)'\n                    },\n                    headerBg: isLight ? 'linear-gradient(135deg, #EDE9FE, #F8FAFC)' : 'linear-gradient(135deg, #131A32, #1E1B4B)',\n                    footerBg: isLight ? '#F8FAFC' : '#0A0F24',\n                    botBubbleBg: isLight ? '#F5F3FF' : '#172038',\n                    botTextColor: isLight ? '#0F172A' : '#F4F7FF',\n                    tagColor: isLight ? '#7C3AED' : '#A78BFA',\n                    tagBg: isLight ? '#EDE9FE' : 'rgba(124, 92, 255, 0.2)'\n                };\n            } else {\n                \/\/ Glassmorphism default\n                return {\n                    name: 'Glassmorphism Modal',\n                    badgeHtml: '<span><strong>Template 1: Glassmorphic Modal<\/strong> \u2014 Floating blurred acrylic backdrop with neon glow rings, ideal for high-tech SaaS, crypto, and modern design agencies.<\/span><span style=\"font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; padding: 4px 10px; border-radius: 6px;\" class=\"msoul-live-tag\">Live Preview<\/span>',\n                    tag: 'Glassmorphism',\n                    style: {\n                        maxWidth: '680px',\n                        borderRadius: '18px',\n                        background: isLight ? 'rgba(255, 255, 255, 0.92)' : 'rgba(14, 23, 38, 0.92)',\n                        border: isLight ? '1px solid rgba(2, 132, 199, 0.25)' : '1px solid rgba(255, 255, 255, 0.15)',\n                        boxShadow: isLight ? '0 20px 50px rgba(0,0,0,0.08), 0 0 25px rgba(2, 132, 199, 0.15)' : '0 25px 60px rgba(0,0,0,0.6), 0 0 30px rgba(46,180,255,0.2)',\n                        backdropFilter: 'blur(24px)'\n                    },\n                    headerBg: isLight ? '#F8FAFC' : '#121A2E',\n                    footerBg: isLight ? '#F8FAFC' : '#121A2E',\n                    botBubbleBg: isLight ? '#F1F5F9' : '#18223D',\n                    botTextColor: isLight ? '#0F172A' : '#FFFFFF',\n                    tagColor: isLight ? '#0284C7' : '#2EB4FF',\n                    tagBg: isLight ? '#E0F2FE' : 'rgba(46, 180, 255, 0.2)'\n                };\n            }\n        }\n\n        \/\/ Switch template function\n        function applyTemplate(tplKey) {\n            const isLight = checkIsLight();\n            const t = getTemplateConfig(tplKey, isLight);\n\n            \/\/ Update Tab buttons\n            tabs.forEach(btn => {\n                const isActive = btn.getAttribute('data-template') === tplKey;\n                btn.classList.toggle('active', isActive);\n                btn.setAttribute('aria-selected', isActive ? 'true' : 'false');\n            });\n\n            \/\/ Update Badge & Tag\n            if (badge) badge.innerHTML = t.badgeHtml;\n            if (tag) {\n                tag.innerText = t.tag;\n                tag.style.color = t.tagColor;\n                tag.style.background = t.tagBg;\n                tag.style.borderColor = t.tagColor;\n            }\n\n            \/\/ Apply wrapper styles\n            wrapper.style.maxWidth = t.style.maxWidth;\n            wrapper.style.borderRadius = t.style.borderRadius;\n            wrapper.style.background = t.style.background;\n            wrapper.style.border = t.style.border;\n            wrapper.style.boxShadow = t.style.boxShadow;\n            wrapper.style.backdropFilter = t.style.backdropFilter;\n\n            \/\/ Apply header \/ footer styles\n            if (header) {\n                header.style.background = t.headerBg;\n                const nameLabel = document.getElementById('aiBotNameLabel');\n                const subLabel = document.getElementById('aiBotSubtitleLabel');\n                if (nameLabel) nameLabel.style.color = isLight ? '#0F172A' : '#FFFFFF';\n                if (subLabel) subLabel.style.color = isLight ? '#0284C7' : t.tagColor;\n            }\n            if (footer) {\n                footer.style.background = t.footerBg;\n            }\n\n            \/\/ Update bot bubbles in chat box\n            const botBubbles = chatBox.querySelectorAll('.ai-bot-bubble');\n            botBubbles.forEach(b => {\n                b.style.background = t.botBubbleBg;\n                b.style.color = t.botTextColor;\n            });\n        }\n\n        \/\/ Tab click handlers\n        tabs.forEach(btn => {\n            btn.addEventListener('click', function() {\n                const tplKey = this.getAttribute('data-template');\n                applyTemplate(tplKey);\n            });\n        });\n\n        \/\/ Chat send function\n        function sendMessage(text) {\n            if (!text || !text.trim()) return;\n\n            const isLight = checkIsLight();\n\n            \/\/ User bubble\n            const userRow = document.createElement('div');\n            userRow.style.display = 'flex';\n            userRow.style.gap = '12px';\n            userRow.style.alignItems = 'flex-start';\n            userRow.style.justifyContent = 'flex-end';\n\n            const userBubble = document.createElement('div');\n            userBubble.style.background = 'linear-gradient(135deg, #0284C7, #7C3AED)';\n            userBubble.style.color = '#FFF';\n            userBubble.style.padding = '12px 18px';\n            userBubble.style.borderRadius = '14px 0 14px 14px';\n            userBubble.style.fontSize = '0.88rem';\n            userBubble.style.maxWidth = '80%';\n            userBubble.style.lineHeight = '1.55';\n            userBubble.innerText = text;\n\n            const userAvatar = document.createElement('div');\n            userAvatar.style.width = '30px';\n            userAvatar.style.height = '30px';\n            userAvatar.style.borderRadius = '50%';\n            userAvatar.style.background = '#0284C7';\n            userAvatar.style.display = 'flex';\n            userAvatar.style.alignItems = 'center';\n            userAvatar.style.justifyContent = 'center';\n            userAvatar.style.fontSize = '0.75rem';\n            userAvatar.style.fontWeight = '800';\n            userAvatar.style.color = '#FFF';\n            userAvatar.style.flexShrink = '0';\n            userAvatar.innerText = 'You';\n\n            userRow.appendChild(userBubble);\n            userRow.appendChild(userAvatar);\n            chatBox.appendChild(userRow);\n            chatBox.scrollTop = chatBox.scrollHeight;\n\n            if (input) input.value = '';\n\n            \/\/ AI response simulation\n            setTimeout(() => {\n                const botRow = document.createElement('div');\n                botRow.style.display = 'flex';\n                botRow.style.gap = '12px';\n                botRow.style.alignItems = 'flex-start';\n\n                const botAvatar = document.createElement('div');\n                botAvatar.style.width = '30px';\n                botAvatar.style.height = '30px';\n                botAvatar.style.borderRadius = '50%';\n                botAvatar.style.background = 'linear-gradient(135deg, #0284C7, #7C3AED)';\n                botAvatar.style.display = 'flex';\n                botAvatar.style.alignItems = 'center';\n                botAvatar.style.justifyContent = 'center';\n                botAvatar.style.fontSize = '0.75rem';\n                botAvatar.style.fontWeight = '800';\n                botAvatar.style.color = '#FFF';\n                botAvatar.style.flexShrink = '0';\n                botAvatar.innerText = 'AI';\n\n                const botBubble = document.createElement('div');\n                botBubble.className = 'ai-bot-bubble';\n                botBubble.style.padding = '12px 18px';\n                botBubble.style.borderRadius = '0 14px 14px 14px';\n                botBubble.style.fontSize = '0.88rem';\n                botBubble.style.maxWidth = '80%';\n                botBubble.style.lineHeight = '1.55';\n\n                \/\/ Find matched FAQ response or fallback\n                let reply = \"Aisthetic Pro AI handles this natively with 0 API tokens using our Local FAQ Matcher. For deeper custom prompts, it routes automatically to your connected LLM provider.\";\n                sampleBtns.forEach(b => {\n                    if (b.getAttribute('data-q').toLowerCase() === text.toLowerCase()) {\n                        reply = b.getAttribute('data-a');\n                    }\n                });\n\n                botBubble.innerText = reply;\n                botRow.appendChild(botAvatar);\n                botRow.appendChild(botBubble);\n                chatBox.appendChild(botRow);\n                chatBox.scrollTop = chatBox.scrollHeight;\n\n                \/\/ Sync current template colors to new bubble\n                const activeTab = document.querySelector('.ai-tpl-tab.active');\n                if (activeTab) {\n                    applyTemplate(activeTab.getAttribute('data-template'));\n                }\n            }, 350);\n        }\n\n        if (sendBtn) {\n            sendBtn.addEventListener('click', () => {\n                if (input) sendMessage(input.value);\n            });\n        }\n\n        if (input) {\n            input.addEventListener('keydown', (e) => {\n                if (e.key === 'Enter') {\n                    sendMessage(input.value);\n                }\n            });\n        }\n\n        sampleBtns.forEach(b => {\n            b.addEventListener('click', function() {\n                const q = this.getAttribute('data-q');\n                sendMessage(q);\n            });\n        });\n    }\n\n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', initAiSandbox);\n    } else {\n        initAiSandbox();\n    }\n})();\n<\/script>\n\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>MULTI-PROVIDER AI ROUTER \u2022 0-COST LOCAL ENGINE The Smartest AI Assistant Built Into Any WordPress Theme Most AI plugins burn through costly API tokens on repetitive questions. Aisthetic AI features a built-in Local FAQ Matcher loaded with 30 industry packs that instantly answers common questions with zero API cost and zero latency. When complex queries [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-33","page","type-page","status-publish","hentry"],"aisthetic_meta":{"styles_descriptor":{"styles":{"desktop":"[data-prefix=\"single_page\"] {background-image:none;}","tablet":"","mobile":""},"google_fonts":[],"version":9}},"_links":{"self":[{"href":"https:\/\/msoulpro.com\/aisthetic\/wp-json\/wp\/v2\/pages\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/msoulpro.com\/aisthetic\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/msoulpro.com\/aisthetic\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/msoulpro.com\/aisthetic\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/msoulpro.com\/aisthetic\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":1,"href":"https:\/\/msoulpro.com\/aisthetic\/wp-json\/wp\/v2\/pages\/33\/revisions"}],"predecessor-version":[{"id":81,"href":"https:\/\/msoulpro.com\/aisthetic\/wp-json\/wp\/v2\/pages\/33\/revisions\/81"}],"wp:attachment":[{"href":"https:\/\/msoulpro.com\/aisthetic\/wp-json\/wp\/v2\/media?parent=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}