<p>{"id":16859,"date":"2026-04-15T13:09:38","date_gmt":"2026-04-15T13:09:38","guid":{"rendered":"https:\/\/siteskyline.com\/?page_id=16859"},"modified":"2026-05-09T07:14:13","modified_gmt":"2026-05-09T07:14:13","slug":"ai-chatbot-for-wordpress","status":"publish","type":"page","link":"https:\/\/siteskyline.com\/it\/ai-chatbot-for-wordpress\/","title":{"rendered":"</p><p>AI Chatbot For WordPress : Intellichat<\/p>"},"content":{"rendered":"\n<!-- ==========================================\n         1. HERO SECTION (ABOVE THE FOLD)\n    =========================================== -->\n<section class='\"relative' pt-16 pb-20 lg:pt-24 lg:pb-28 overflow-hidden border-b border-scandi-border>\n    <div class='\"max-w-[1200px]' mx-auto w-full px-4 sm:px-6 lg:px-8>\n        <div class='\"lg:grid' lg:grid-cols-12 lg:gap-16 items-center>\n\n            <!-- Left: Copy & CTA -->\n            <div class='\"lg:col-span-6' text-center lg:text-left>\n\n                <!-- Trust Indicator -->\n                <div class='\"flex' items-center justify-center lg:justify-start gap-2 mb-6>\n                    <div class='\"flex' text-yellow-400>\n                        \n                            \n                        \n                        \n                            \n                        \n                        \n                            \n                        \n                        \n                            \n                        \n                        \n                            \n                        \n                    <\/div>\n                    <span class='\"text-sm' font-medium text-gray-700>Trusted by 5,000+ WordPress Sites<\/span>\n                <\/div>\n\n                <!-- SEO H1 Headline & H2 Subheadline -->\n                <h1 class='\"text-4xl' sm:text-5xl lg:text-6xl font-bold tracking-tight text-gray-900 mb-6 leading-tight>\n                    AI Chatbot For WordPress with <span class='\"text-brand\"'>RAG & Gemini.<\/span>\n                <\/h1>\n                <h2 class='\"text-lg' sm:text-xl text-scandi-muted mb-8 leading-relaxed max-w-2xl mx-auto lg:mx-0>\n                    Transform your WordPress site with an intelligent AI chatbot that learns from your actual content.\n                    Answer visitor questions instantly and accurately without hallucination.\n                <\/h2>\n\n                <!-- CTAs -->\n                <div class='\"flex' flex-col sm:flex-row gap-4 justify-center lg:justify-start>\n                    <a href="%5C%22#pricing%5C%22" class='\"inline-flex' justify-center items-center px-8 py-4 text-base font-semibold bg-brand hover:bg-brand-hover rounded-lg shadow-sm hover:shadow-md transition-all duration-200>\n                        Get Intellichat Pro\n                        \n                            \n                        \n                    <\/a>\n                    <button class='\"inline-flex' justify-center items-center px-8 py-4 text-base font-medium text-gray-700 bg-white border border-scandi-border hover:bg-gray-50 rounded-lg transition-all duration-200>\n                        \n                            \n                            \n                        \n                        Watch Video\n                    <\/button>\n                <\/div>\n            <\/div>\n\n            <!-- Right: Hero Tailwind Graphic -->\n            <div class='\"lg:col-span-6' mt-16 lg:mt-0>\n                <div class='\"relative' w-full max-w-lg mx-auto bg-scandi-surface rounded-2xl p-4 border border-scandi-border scandi-shadow h-96 flex flex-col justify-between overflow-hidden>\n                    <!-- Browser Header -->\n                    <div class='\"flex' space-x-2 mb-4>\n                        <div class='\"w-3' h-3 rounded-full bg-red-400><\/div>\n                        <div class='\"w-3' h-3 rounded-full bg-yellow-400><\/div>\n                        <div class='\"w-3' h-3 rounded-full bg-green-400><\/div>\n                    <\/div>\n                    <!-- Page Content Placeholder -->\n                    <div class='\"flex-1' bg-white rounded-lg border border-gray-100 p-6 flex flex-col gap-6>\n                        <div class='\"w-3\/4' h-8 bg-gray-100 rounded><\/div>\n                        <div class='\"space-y-3\"'>\n                            <div class='\"w-full' h-3 bg-gray-100 rounded><\/div>\n                            <div class='\"w-full' h-3 bg-gray-100 rounded><\/div>\n                            <div class='\"w-5\/6' h-3 bg-gray-100 rounded><\/div>\n                        <\/div>\n                        <div class='\"grid' grid-cols-3 gap-4 mt-4>\n                            <div class='\"h-20' bg-gray-50 rounded border border-gray-100><\/div>\n                            <div class='\"h-20' bg-gray-50 rounded border border-gray-100><\/div>\n                            <div class='\"h-20' bg-gray-50 rounded border border-gray-100><\/div>\n                        <\/div>\n                    <\/div>\n                    <!-- Floating Widget Mockup -->\n                    <div class='\"absolute' bottom-6 right-6 flex flex-col items-end>\n                        <div class='\"w-72' h-56 bg-white border border-gray-200 shadow-xl rounded-xl mb-3 flex flex-col overflow-hidden>\n                            <div class='\"bg-brand' text-white p-3 font-semibold flex items-center justify-between>\n                                <div class='\"flex' items-center gap-2>\n                                    <div class='\"w-2' h-2 bg-green-400 rounded-full animate-pulse><\/div>\n                                    Intellichat AI\n                                <\/div>\n                                \n                                    \n                                \n                            <\/div>\n                            <div class='\"flex-1' p-3 space-y-3 text-sm bg-gray-50 overflow-y-auto>\n                                <div class='\"bg-white' border border-gray-100 rounded-2xl rounded-tl-sm p-3 max-w- self-start shadow-sm text-gray-700>\n                                    Hi! I’m trained on this website’s content. What can I help you find?\n                                <\/div>\n                                <div class='\"bg-brand' text-white rounded-2xl rounded-tr-sm p-3 max-w- self-end ml-auto shadow-sm>\n                                    Do you integrate with WooCommerce?\n                                <\/div>\n                                <div class='\"bg-white' border border-gray-100 rounded-2xl rounded-tl-sm p-3 max-w- self-start shadow-sm text-gray-700 flex flex-col gap-2>\n                                    <span>Yes! The Pro version includes WooCommerce integration allowing customers to\n                                        check order status directly in chat.<\/span>\n                                <\/div>\n                            <\/div>\n                            <div class='\"p-2' border-t border-gray-100 bg-white>\n                                <div class='\"bg-gray-100' rounded-full px-4 py-2 text-gray-400 text-xs flex justify-between items-center>\n                                    Type your message…\n                                    \n                                        \n                                    \n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        <div class='\"w-14' h-14 bg-brand rounded-full flex items-center justify-center text-white shadow-lg shadow-brand hover:scale-105 transition-transform cursor-pointer>\n                            \n                                \n                                \n                            \n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- Video Modal -->\n<div id='\"videoModal\"' class='\"fixed' inset-0 z-50 flex items-center justify-center hidden bg-black backdrop-blur-sm transition-opacity>\n    <div class='\"relative' w-full max-w-4xl mx-4 aspect-video bg-black rounded-xl shadow-2xl border border-white>\n        <button class='\"absolute' right-0 text-white hover:text-white mb-2 z-50 flex items-center gap-2 transition-colors>\n            Close\n            \n        <\/button>\n        <div class='\"w-full' h-full rounded-xl overflow-hidden>\n            \n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- ==========================================\n         2. THE PROCESS (How It Works)\n    =========================================== -->\n<section class='\"py-20' bg-scandi-surface border-b border-scandi-border>\n    <div class='\"max-w-[1200px]' mx-auto w-full px-4 sm:px-6 lg:px-8>\n        <div class='\"text-center' max-w-3xl mx-auto mb-16>\n            <h2 class='\"text-3xl' md:text-4xl font-bold text-gray-900 mb-4>Set up your AI Assistant in minutes<\/h2>\n            </h2><p class='\"text-lg' text-scandi-muted>No coding required. Use our quick setup wizard to connect your API,\n                train your data, and deploy your chatbot.<\/p>\n        <\/div>\n\n        </p><div class='\"grid' md:grid-cols-3 gap-10 text-center>\n            <!-- Step 1 -->\n            <div class='\"relative\"'>\n                <div class='\"w-16' h-16 mx-auto bg-brand-light text-brand rounded-full flex items-center justify-center text-2xl font-bold mb-6 relative z-10 border-4 border-scandi-surface shadow-sm>\n                    1<\/div>\n                <h3 class='\"text-xl' font-bold text-gray-900 mb-3>Connect API<\/h3>\n                </h3><p class='\"text-scandi-muted' leading-relaxed>Enter your Google Gemini API key with our onboarding wizard\n                    featuring live validation.<\/p>\n                </p><div class='\"hidden' md:block absolute top-8 left- w-full h- bg-brand-light><\/div>\n            <\/div>\n            <!-- Step 2 -->\n            <div class='\"relative\"'>\n                <div class='\"w-16' h-16 mx-auto bg-brand text-white rounded-full flex items-center justify-center text-2xl font-bold mb-6 relative z-10 border-4 border-scandi-surface shadow-sm>\n                    2<\/div>\n                <h3 class='\"text-xl' font-bold text-gray-900 mb-3>Train on Content<\/h3>\n                </h3><p class='\"text-scandi-muted' leading-relaxed>Select specific posts and pages. Intellichat converts them\n                    to high-dimensional vectors for semantic search.<\/p>\n                </p><div class='\"hidden' md:block absolute top-8 left- w-full h- bg-brand-light><\/div>\n            <\/div>\n            <!-- Step 3 -->\n            <div class='\"relative\"'>\n                <div class='\"w-16' h-16 mx-auto bg-brand-light text-brand rounded-full flex items-center justify-center text-2xl font-bold mb-6 relative z-10 border-4 border-scandi-surface shadow-sm>\n                    3<\/div>\n                <h3 class='\"text-xl' font-bold text-gray-900 mb-3>Customize & Launch<\/h3>\n                </h3><p class='\"text-scandi-muted' leading-relaxed>Customize widget colors and icons with live preview, then\n                    instantly activate the chatbot on your site.<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- ==========================================\n         3. FEATURES SECTION\n    =========================================== -->\n\n<!-- Feature 1: RAG Technology -->\n<section id='\"features\"' class='\"py-16' lg:py-24 bg-white border-b border-scandi-border>\n    <div class='\"max-w-[1200px]' mx-auto w-full px-4 sm:px-6 lg:px-8>\n        <div class='\"lg:grid' lg:grid-cols-2 gap-16 items-center>\n\n            <!-- Left: Tailwind Graphic -->\n            <div class='\"mb-12' lg:mb-0>\n                <div class='\"relative' w-full aspect-video bg-scandi-surface rounded-2xl p-6 border border-scandi-border scandi-shadow flex items-center justify-center>\n                    <div class='\"relative' w-full h-full flex items-center justify-between>\n                        <!-- Document -->\n                        <div class='\"w-20' h-28 bg-white border border-gray-200 rounded-lg flex flex-col items-center justify-center gap-2 shadow-sm relative>\n                            <div class='\"absolute' bg-blue-100 text-blue-600 rounded-full w-8 h-8 flex items-center justify-center shadow-sm>\n                                \n                                    \n                                    \n                                \n                            <\/div>\n                            <div class='\"w-12' h-1.5 bg-gray-200 rounded><\/div>\n                            <div class='\"w-14' h-1.5 bg-gray-200 rounded><\/div>\n                            <div class='\"w-10' h-1.5 bg-gray-200 rounded><\/div>\n                            <div class='\"w-12' h-1.5 bg-gray-200 rounded mt-2><\/div>\n                            <div class='\"w-8' h-1.5 bg-gray-200 rounded><\/div>\n                        <\/div>\n\n                        <!-- Arrow -->\n                        <div class='\"flex-1' flex items-center justify-center relative>\n                            <div class='\"w-full' h- border-t-2 border-dashed border-brand absolute top-1>\n                            <\/div>\n                            <div class='\"bg-brand\/10' text-brand px-3 py-1 rounded-full text- font-bold z-10 uppercase tracking-wider border border-brand backdrop-blur-sm>\n                                Embed<\/div>\n                        <\/div>\n\n                        <!-- Vector DB -->\n                        <div class='\"w-28' h-32 bg-white border border-gray-200 rounded-lg flex flex-col shadow-lg overflow-hidden relative>\n                            <div class='\"h-8' bg-gray-900 flex items-center justify-center text-xs text-white font-mono gap-1>\n                                \n                                    \n                                    \n                                \n                                Vector DB\n                            <\/div>\n                            <div class='\"flex-1' p-3 flex flex-col gap-2 justify-center bg-gray-50>\n                                <div class='\"bg-white' p-1.5 rounded border border-gray-100 flex items-center gap-2>\n                                    <div class='\"w-1.5' h-1.5 bg-brand rounded-full><\/div>\n                                    <div class='\"text-[9px]' font-mono text-gray-500>[0.12, -0.4…]<\/div>\n                                <\/div>\n                                <div class='\"bg-white' p-1.5 rounded border border-gray-100 flex items-center gap-2>\n                                    <div class='\"w-1.5' h-1.5 bg-purple-500 rounded-full><\/div>\n                                    <div class='\"text-[9px]' font-mono text-gray-500>[0.88, 0.23…]<\/div>\n                                <\/div>\n                                <div class='\"bg-white' p-1.5 rounded border border-gray-100 flex items-center gap-2>\n                                    <div class='\"w-1.5' h-1.5 bg-blue-500 rounded-full><\/div>\n                                    <div class='\"text-[9px]' font-mono text-gray-500>[-0.5, 0.91…]<\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                        <!-- Arrow -->\n                        <div class='\"flex-1' flex items-center justify-center relative>\n                            <div class='\"w-full' h- border-t-2 border-dashed border-brand absolute top-1>\n                            <\/div>\n                            <div class='\"bg-brand\/10' text-brand px-3 py-1 rounded-full text- font-bold z-10 uppercase tracking-wider border border-brand backdrop-blur-sm>\n                                RAG<\/div>\n                        <\/div>\n\n                        <!-- AI Generation -->\n                        <div class='\"w-20' h-28 bg-gradient-to-br from-brand to-purple-600 rounded-lg text-white flex flex-col items-center justify-center shadow-lg gap-3 relative overflow-hidden>\n                            <div class='\"absolute' inset-0 bg-white opacity-50 bg->\n                            <\/div>\n                            \n                                \n                                \n                            \n                            <span class='\"text-[10px]' font-bold relative z-10>Gemini<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Right: Text -->\n            <div>\n                <h2 class='\"text-3xl' lg:text-4xl font-bold text-gray-900 mb-8>Smarter AI with <span class='\"text-brand\"'>RAG Technology<\/span><\/h2>\n                <ul class='\"space-y-6\"'>\n                    <li class='\"flex' items-start gap-4>\n                        <div class='\"w-6' h-6 rounded-full bg-brand-light flex items-center justify-center text-brand flex-shrink-0 mt-0.5>\n                            \n                                \n                            \n                        <\/div>\n                        <div>\n                            <span class='\"block' text-gray-900 text-base><strong>Retrieval-Augmented Generation:<\/strong>\n                                RAG ensures answers are grounded in your actual content, combining semantic search with\n                                AI generation.<\/span>\n                        <\/div>\n                    <\/li>\n                    <li class='\"flex' items-start gap-4>\n                        <div class='\"w-6' h-6 rounded-full bg-brand-light flex items-center justify-center text-brand flex-shrink-0 mt-0.5>\n                            \n                                \n                            \n                        <\/div>\n                        <div>\n                            <span class='\"block' text-gray-900 text-base><strong>Vector Embeddings:<\/strong>\n                                Your WordPress content is converted into high-dimensional vectors and stored locally in\n                                your database for blazing-fast similarity matching.<\/span>\n                        <\/div>\n                    <\/li>\n                    <li class='\"flex' items-start gap-4>\n                        <div class='\"w-6' h-6 rounded-full bg-brand-light flex items-center justify-center text-brand flex-shrink-0 mt-0.5>\n                            \n                                \n                            \n                        <\/div>\n                        <div>\n                            <span class='\"block' text-gray-900 text-base><strong>Zero Hallucinations:<\/strong>\n                                The chatbot relies on your documentation and posts to generate answers, drastically\n                                reducing false information.<\/span>\n                        <\/div>\n                    <\/li>\n                <\/ul>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- Feature 2: Floating Chat Widget -->\n<section class='\"py-16' lg:py-24 bg-scandi-surface border-b border-scandi-border>\n    <div class='\"max-w-[1200px]' mx-auto w-full px-4 sm:px-6 lg:px-8>\n        <div class='\"lg:grid' lg:grid-cols-2 gap-16 items-center flex flex-col-reverse>\n\n            <!-- Left: Text -->\n            <div class='\"mt-12' lg:mt-0>\n                <h2 class='\"text-3xl' lg:text-4xl font-bold text-gray-900 mb-8>Beautiful <span class='\"text-brand\"'>Floating Widget<\/span><\/h2>\n                <ul class='\"space-y-5\"'>\n                    <li class='\"flex' items-start gap-4>\n                        <div class='\"w-6' h-6 rounded-full bg-brand flex items-center justify-center text-white flex-shrink-0 mt-0.5>\n                            \n                                \n                            \n                        <\/div>\n                        <div>\n                            <span class='\"block' text-gray-900 font-bold text-base>Live Preview Customization<\/span>\n                            <span class='\"block' text-sm text-scandi-muted mt-1>See changes in real-time as you tweak\n                                colors, adjust themes, and edit the custom welcome message.<\/span>\n                        <\/div>\n                    <\/li>\n                    <li class='\"flex' items-start gap-4>\n                        <div class='\"w-6' h-6 rounded-full bg-brand flex items-center justify-center text-white flex-shrink-0 mt-0.5>\n                            \n                                \n                            \n                        <\/div>\n                        <div>\n                            <span class='\"block' text-gray-900 font-bold text-base>Shadow DOM Isolation<\/span>\n                            <span class='\"block' text-sm text-scandi-muted mt-1>Widget CSS is isolated, meaning your\n                                theme’s stylesheets won’t break the chatbot UI, ensuring it always looks perfect.<\/span>\n                        <\/div>\n                    <\/li>\n                    <li class='\"flex' items-start gap-4>\n                        <div class='\"w-6' h-6 rounded-full bg-brand flex items-center justify-center text-white flex-shrink-0 mt-0.5>\n                            \n                                \n                            \n                        <\/div>\n                        <div>\n                            <span class='\"block' text-gray-900 font-bold text-base>Dark Mode & Responsiveness<\/span>\n                            <span class='\"block' text-sm text-scandi-muted mt-1>Automatically adapts to user’s system\n                                preferences. Works beautifully on desktop, tablet, and mobile devices.<\/span>\n                        <\/div>\n                    <\/li>\n                <\/ul>\n            <\/div>\n\n            <!-- Right: Tailwind Graphic -->\n            <div class='\"mb-12' lg:mb-0>\n                <div class='\"w-full' aspect-square md:aspect-video bg-white rounded-2xl p-6 border border-scandi-border scandi-shadow flex flex-col items-center justify-center space-y-8 relative overflow-hidden>\n                    <!-- Background blobs -->\n                    <div class='\"absolute' top-0 right-0 w-32 h-32 bg-brand rounded-full blur-2xl><\/div>\n                    <div class='\"absolute' bottom-0 left-0 w-40 h-40 bg-purple-500 rounded-full blur-2xl><\/div>\n\n                    <!-- Icon Switcher Mockup -->\n                    <div class='\"flex' gap-4 z-10>\n                        <div class='\"w-14' h-14 bg-brand rounded-full flex items-center justify-center text-white shadow-lg ring-4 ring-brand cursor-pointer>\n                            \n                                \n                                \n                            \n                        <\/div>\n                        <div class='\"w-14' h-14 bg-gray-100 rounded-full flex items-center justify-center text-gray-500 hover:bg-gray-200 cursor-pointer transition-colors>\n                            \n                                \n                                \n                            \n                        <\/div>\n                        <div class='\"w-14' h-14 bg-gray-100 rounded-full flex items-center justify-center text-gray-500 hover:bg-gray-200 cursor-pointer transition-colors>\n                            \n                                \n                            \n                        <\/div>\n                    <\/div>\n\n                    <!-- Widget Preview UI -->\n                    <div class='\"bg-gray-900' border border-gray-800 rounded-xl shadow-2xl w-full max-w-sm p-5 z-10>\n                        <div class='\"flex' items-center justify-between mb-5 pb-3 border-b border-gray-800>\n                            <div class='\"font-semibold' text-white flex items-center gap-2>\n                                <div class='\"w-2.5' h-2.5 bg-green-500 rounded-full shadow->\n                                <\/div>\n                                Chat Support (Dark Mode)\n                            <\/div>\n                            \n                                \n                            \n                        <\/div>\n                        <div class='\"space-y-4\"'>\n                            <div class='\"flex' items-start gap-3>\n                                <div class='\"w-8' h-8 rounded-full bg-brand flex items-center justify-center text-white text-xs shrink-0>\n                                    AI<\/div>\n                                <div class='\"bg-gray-800' text-gray-200 rounded-2xl rounded-tl-sm p-3 text-sm>\n                                    Hello! How can I assist you with your site today?\n                                <\/div>\n                            <\/div>\n                            <div class='\"h-3' bg-gray-800 rounded-full w-3 ml-auto opacity-50><\/div>\n                            <div class='\"h-3' bg-gray-800 rounded-full w-1 ml-auto opacity-50><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- Feature 3: Train on Your Content -->\n<section class='\"py-16' lg:py-24 bg-white border-b border-scandi-border>\n    <div class='\"max-w-[1200px]' mx-auto w-full px-4 sm:px-6 lg:px-8>\n        <div class='\"lg:grid' lg:grid-cols-2 gap-16 items-center>\n            <!-- Left: Tailwind Graphic -->\n            <div class='\"mb-12' lg:mb-0>\n                <div class='\"w-full' aspect-video bg-scandi-surface rounded-2xl p-6 border border-scandi-border scandi-shadow flex flex-col items-center justify-center relative overflow-hidden>\n                    <div class='\"absolute' top-10 left-10 w-20 h-20 bg-blue-400 rounded-full blur-xl><\/div>\n                    <div class='\"absolute' bottom-10 right-10 w-32 h-32 bg-brand rounded-full blur-xl><\/div>\n\n                    <div class='\"w-full' max-w-sm bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden z-10>\n                        <div class='\"bg-gray-50' px-4 py-3 border-b border-gray-100 flex justify-between items-center>\n                            <span class='\"font-semibold' text-gray-700 text-sm>Select Content to Train<\/span>\n                            <span class='\"text-xs' bg-brand text-brand px-2 py-1 rounded font-medium>Pages &\n                                Posts<\/span>\n                        <\/div>\n                        <div class='\"divide-y' divide-gray-100>\n                            <!-- Item 1 -->\n                            <div class='\"p-3' flex items-center gap-3 hover:bg-gray-50 transition-colors>\n                                <div class='\"w-5' h-5 rounded border border-brand bg-brand flex items-center justify-center text-white>\n                                    \n                                        \n                                    \n                                <\/div>\n                                <div class='\"flex-1\"'>\n                                    <div class='\"text-sm' font-medium text-gray-800>About Our Company<\/div>\n                                    <div class='\"text-xs' text-gray-400>Page \u2022 Last modified 2 days ago<\/div>\n                                <\/div>\n                                <span class='\"text-[10px]' font-bold text-green-600 bg-green-50 px-2 py-1 rounded border border-green-100>Trained<\/span>\n                            <\/div>\n                            <!-- Item 2 -->\n                            <div class='\"p-3' flex items-center gap-3 hover:bg-gray-50 transition-colors>\n                                <div class='\"w-5' h-5 rounded border border-brand bg-brand flex items-center justify-center text-white>\n                                    \n                                        \n                                    \n                                <\/div>\n                                <div class='\"flex-1\"'>\n                                    <div class='\"text-sm' font-medium text-gray-800>Shipping Policy<\/div>\n                                    <div class='\"text-xs' text-gray-400>Page \u2022 Last modified 1 week ago<\/div>\n                                <\/div>\n                                <span class='\"text-[10px]' font-bold text-green-600 bg-green-50 px-2 py-1 rounded border border-green-100>Trained<\/span>\n                            <\/div>\n                            <!-- Item 3 -->\n                            <div class='\"p-3' flex items-center gap-3 hover:bg-gray-50 transition-colors opacity-60>\n                                <div class='\"w-5' h-5 rounded border border-gray-300 bg-white><\/div>\n                                <div class='\"flex-1\"'>\n                                    <div class='\"text-sm' font-medium text-gray-800>Summer Sale 2024<\/div>\n                                    <div class='\"text-xs' text-gray-400>Post \u2022 Draft<\/div>\n                                <\/div>\n                                <span class='\"text-[10px]' font-medium text-gray-500 bg-gray-100 px-2 py-1 rounded border border-gray-200>Pending<\/span>\n                            <\/div>\n                        <\/div>\n                        <div class='\"p-3' bg-gray-50 border-t border-gray-100 flex justify-end>\n                            <div class='\"bg-brand' text-white text-xs font-semibold py-2 px-4 rounded shadow flex items-center gap-2 cursor-pointer>\n                                \n                                    \n                                    \n                                \n                                Retrain Selected\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Right: Text -->\n            <div>\n                <h2 class='\"text-3xl' lg:text-4xl font-bold text-gray-900 mb-6><span class='\"text-brand\"'>Train<\/span> on\n                    Your Content<\/h2>\n                <p class='\"text-lg' text-scandi-muted mb-8>You have complete control over what the AI learns. Filter and\n                    select specific content easily from your dashboard.<\/p>\n\n                </p><ul class='\"space-y-6\"'>\n                    <li class='\"flex' items-start gap-4>\n                        <div class='\"w-6' h-6 rounded-full bg-brand-light flex items-center justify-center text-brand flex-shrink-0 mt-0.5>\n                            \n                                \n                            \n                        <\/div>\n                        <div>\n                            <span class='\"block' text-gray-900 text-base><strong>Selective Training:<\/strong> Choose\n                                exactly which posts and pages to embed. Avoid feeding outdated or irrelevant information\n                                to the AI.<\/span>\n                        <\/div>\n                    <\/li>\n                    <li class='\"flex' items-start gap-4>\n                        <div class='\"w-6' h-6 rounded-full bg-brand-light flex items-center justify-center text-brand flex-shrink-0 mt-0.5>\n                            \n                                \n                            \n                        <\/div>\n                        <div>\n                            <span class='\"block' text-gray-900 text-base><strong>Manage Data Easily:<\/strong> View\n                                trained data at a glance, and instantly delete embeddings when your content changes to\n                                keep the bot up-to-date.<\/span>\n                        <\/div>\n                    <\/li>\n                    <li class='\"flex' items-start gap-4>\n                        <div class='\"w-6' h-6 rounded-full bg-brand-light flex items-center justify-center text-brand flex-shrink-0 mt-0.5>\n                            \n                                \n                            \n                        <\/div>\n                        <div>\n                            <span class='\"block' text-gray-900 text-base><strong>Pagination & Filters:<\/strong> Manage\n                                massive content libraries effortlessly with built-in pagination and filtering by post\n                                types.<\/span>\n                        <\/div>\n                    <\/li>\n                <\/ul>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- Feature 4: Pro Features -->\n<section class='\"py-16' lg:py-24 bg-scandi-surface border-b border-scandi-border>\n    <div class='\"max-w-[1200px]' mx-auto w-full px-4 sm:px-6 lg:px-8>\n        <div class='\"text-center' max-w-3xl mx-auto mb-16>\n            <span class='\"text-brand' font-semibold tracking-wider uppercase text-sm mb-2 block>Premium Features<\/span>\n            <h2 class='\"text-3xl' md:text-4xl font-bold text-gray-900 mb-4>Upgrade to Intellichat Pro<\/h2>\n            </h2><p class='\"text-lg' text-scandi-muted>Take your AI chatbot to the next level with powerful tools designed for\n                businesses and eCommerce stores.<\/p>\n        <\/div>\n\n        </p><div class='\"grid' md:grid-cols-2 lg:grid-cols-4 gap-8>\n            <!-- Pro Feature 1 -->\n            <div class='\"bg-white' rounded-xl p-6 border border-scandi-border scandi-shadow>\n                <div class='\"w-12' h-12 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-lg flex items-center justify-center text-white mb-6>\n                    \n                        \n                        \n                    \n                <\/div>\n                <h3 class='\"text-lg' font-bold text-gray-900 mb-2>Multi-Provider Models<\/h3>\n                </h3><p class='\"text-sm' text-scandi-muted>Unlock OpenAI (GPT-4o) and Anthropic (Claude 3.5 Sonnet) models\n                    alongside Gemini for unparalleled reasoning capabilities.<\/p>\n            <\/div>\n\n            <!-- Pro Feature 2 -->\n            </p><div class='\"bg-white' rounded-xl p-6 border border-scandi-border scandi-shadow>\n                <div class='\"w-12' h-12 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-lg flex items-center justify-center text-white mb-6>\n                    \n                        \n                        \n                    \n                <\/div>\n                <h3 class='\"text-lg' font-bold text-gray-900 mb-2>AI Ticketing System<\/h3>\n                </h3><p class='\"text-sm' text-scandi-muted>Automatically create and manage support tickets when users need\n                    human help. Streamline your customer service pipeline.<\/p>\n            <\/div>\n\n            <!-- Pro Feature 3 -->\n            </p><div class='\"bg-white' rounded-xl p-6 border border-scandi-border scandi-shadow>\n                <div class='\"w-12' h-12 bg-gradient-to-br from-green-400 to-emerald-600 rounded-lg flex items-center justify-center text-white mb-6>\n                    \n                        \n                        \n                    \n                <\/div>\n                <h3 class='\"text-lg' font-bold text-gray-900 mb-2>WooCommerce Ready<\/h3>\n                </h3><p class='\"text-sm' text-scandi-muted>Allow customers to securely check their order status and tracking\n                    details directly inside the chat window.<\/p>\n            <\/div>\n\n            <!-- Pro Feature 4 -->\n            </p><div class='\"bg-white' rounded-xl p-6 border border-scandi-border scandi-shadow relative overflow-hidden>\n                <div class='\"absolute' w-16 h-16 bg-yellow-400 rounded-full blur-xl><\/div>\n                <div class='\"w-12' h-12 bg-gradient-to-br from-gray-700 to-gray-900 rounded-lg flex items-center justify-center text-white mb-6>\n                    \n                        \n                        \n                    \n                <\/div>\n                <h3 class='\"text-lg' font-bold text-gray-900 mb-2>White-Labeling<\/h3>\n                </h3><p class='\"text-sm' text-scandi-muted>Make it entirely yours. Remove the “Powered by Intellichat” badge\n                    from the widget footer and keep your brand in focus.<\/p>\n            <\/div>\n        <\/div>\n\n        </p><div class='\"mt-12' text-center>\n            <a href="%5C%22#pricing%5C%22" class='\"inline-flex' justify-center items-center px-8 py-4 text-base font-semibold bg-gray-900 hover:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-all duration-200 gap-2>\n                View Pricing Plans\n                \n                    \n                \n            <\/a>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- ==========================================\n         5. PRICING PLANS\n    =========================================== -->\n<section id='\"pricing\"' class='\"py-24' bg-scandi-surface border-b border-scandi-border>\n    <div class='\"max-w-[1200px]' mx-auto w-full px-4 sm:px-6 lg:px-8>\n        <div class='\"text-center' max-w-2xl mx-auto mb-16>\n            <h2 class='\"text-3xl' md:text-4xl font-bold text-gray-900 mb-4>Choose Your Pro Plan<\/h2>\n            </h2><p class='\"text-lg' text-scandi-muted>Unlock powerful features to elevate your customer support. All plans\n                are billed annually.<\/p>\n        <\/div>\n\n        <!-- Pricing Grid -->\n        </p><div class='\"grid' md:grid-cols-3 gap-8 max-w-6xl mx-auto mb-16>\n\n            <!-- Plan 1 -->\n            <div class='\"bg-white' rounded-2xl border border-scandi-border p-8 flex flex-col hover:shadow-lg transition-shadow duration-300>\n                <h3 class='\"text-xl' font-semibold text-gray-900 mb-2>1 Site License<\/h3>\n                </h3><p class='\"text-scandi-muted' text-sm mb-6>Perfect for a single website.<\/p>\n                </p><div class='\"mb-6' border-b border-scandi-border pb-6>\n                    <span class='\"text-4xl' font-bold text-gray-900>$49<\/span>\n                    <span class='\"text-scandi-muted\"'>\/Year<\/span>\n                <\/div>\n                <ul class='\"space-y-4' mb-8 flex-1>\n                    <li class='\"flex' items-center gap-3 text-gray-700 text-sm>\n                        \n                            \n                            \n                        \n                        Multi-Provider Models (OpenAI, Anthropic)\n                    <\/li>\n                    </li><li class='\"flex' items-center gap-3 text-gray-700 text-sm>\n                        \n                            \n                            \n                        \n                        AI Ticketing System\n                    <\/li>\n                    </li><li class='\"flex' items-center gap-3 text-gray-700 text-sm>\n                        \n                            \n                            \n                        \n                        WooCommerce Integration\n                    <\/li>\n                    </li><li class='\"flex' items-center gap-3 text-gray-700 text-sm>\n                        \n                            \n                            \n                        \n                        White-Labeling\n                    <\/li>\n                    </li><li class='\"flex' items-center gap-3 text-gray-700 text-sm>\n                        \n                            \n                            \n                        \n                        Priority Support\n                    <\/li>\n                <\/ul>\n                <a rel='\"nofollow\"' href="%5C%22https:%5C/%5C/app.siteskyline.com%5C/product%5C/intellichat-pro%5C/?add-to-cart=1258&variation_id=1259&attribute_sites=1%20Site%5C%22" class='\"block' w-full py-3 px-4 bg-brand-light text-brand font-semibold text-center rounded-lg hover:bg-brand hover:text-white transition-colors>\n                    Choose Plan\n                <\/a>\n            <\/div>\n\n            <!-- Plan 2 (Highlighted) -->\n            <div class='\"bg-white' rounded-2xl border-2 border-brand p-8 flex flex-col relative shadow-xl transform md:-translate-y-4>\n                <div class='\"absolute' top-0 left-1 bg-brand text-white px-4 py-1 rounded-full text-sm font-semibold tracking-wide>\n                    MOST POPULAR\n                <\/div>\n                <h3 class='\"text-xl' font-semibold text-gray-900 mb-2>5 Sites License<\/h3>\n                </h3><p class='\"text-scandi-muted' text-sm mb-6>Ideal for multiple projects or client work.<\/p>\n                </p><div class='\"mb-6' border-b border-scandi-border pb-6>\n                    <span class='\"text-4xl' font-bold text-gray-900>$99<\/span>\n                    <span class='\"text-scandi-muted\"'>\/Year<\/span>\n                <\/div>\n                <ul class='\"space-y-4' mb-8 flex-1>\n                    <li class='\"flex' items-center gap-3 text-gray-700 text-sm>\n                        \n                            \n                            \n                        \n                        Multi-Provider Models (OpenAI, Anthropic)\n                    <\/li>\n                    </li><li class='\"flex' items-center gap-3 text-gray-700 text-sm>\n                        \n                            \n                            \n                        \n                        AI Ticketing System\n                    <\/li>\n                    </li><li class='\"flex' items-center gap-3 text-gray-700 text-sm>\n                        \n                            \n                            \n                        \n                        WooCommerce Integration\n                    <\/li>\n                    </li><li class='\"flex' items-center gap-3 text-gray-700 text-sm>\n                        \n                            \n                            \n                        \n                        White-Labeling\n                    <\/li>\n                    </li><li class='\"flex' items-center gap-3 text-gray-700 text-sm>\n                        \n                            \n                            \n                        \n                        Priority Support\n                    <\/li>\n                    </li><li class='\"flex' items-center gap-3 text-gray-900 font-bold text-sm>\n                        \n                            \n                            \n                        \n                        Up to 5 Websites\n                    <\/li>\n                <\/ul>\n                <a rel='\"nofollow\"' href="%5C%22https:%5C/%5C/app.siteskyline.com%5C/product%5C/intellichat-pro%5C/?add-to-cart=1258&variation_id=1260&attribute_sites=5%20Sites%5C%22" class='\"block' w-full py-3 px-4 bg-brand text-white font-semibold text-center rounded-lg hover:bg-brand-hover transition-colors shadow-md hover:shadow-lg>\n                    Choose Plan\n                <\/a>\n            <\/div>\n\n            <!-- Plan 3 -->\n            <div class='\"bg-white' rounded-2xl border border-scandi-border p-8 flex flex-col hover:shadow-lg transition-shadow duration-300>\n                <h3 class='\"text-xl' font-semibold text-gray-900 mb-2>20 Sites License<\/h3>\n                </h3><p class='\"text-scandi-muted' text-sm mb-6>For agencies and power users.<\/p>\n                </p><div class='\"mb-6' border-b border-scandi-border pb-6>\n                    <span class='\"text-4xl' font-bold text-gray-900>$149<\/span>\n                    <span class='\"text-scandi-muted\"'>\/Year<\/span>\n                <\/div>\n                <ul class='\"space-y-4' mb-8 flex-1>\n                    <li class='\"flex' items-center gap-3 text-gray-700 text-sm>\n                        \n                            \n                            \n                        \n                        Multi-Provider Models (OpenAI, Anthropic)\n                    <\/li>\n                    </li><li class='\"flex' items-center gap-3 text-gray-700 text-sm>\n                        \n                            \n                            \n                        \n                        AI Ticketing System\n                    <\/li>\n                    </li><li class='\"flex' items-center gap-3 text-gray-700 text-sm>\n                        \n                            \n                            \n                        \n                        WooCommerce Integration\n                    <\/li>\n                    </li><li class='\"flex' items-center gap-3 text-gray-700 text-sm>\n                        \n                            \n                            \n                        \n                        White-Labeling\n                    <\/li>\n                    </li><li class='\"flex' items-center gap-3 text-gray-700 text-sm>\n                        \n                            \n                            \n                        \n                        Priority Support\n                    <\/li>\n                    </li><li class='\"flex' items-center gap-3 text-gray-900 font-bold text-sm>\n                        \n                            \n                            \n                        \n                        Up to 20 Websites\n                    <\/li>\n                <\/ul>\n                <a rel='\"nofollow\"' href="%5C%22https:%5C/%5C/app.siteskyline.com%5C/product%5C/intellichat-pro%5C/?add-to-cart=1258&variation_id=1261&attribute_sites=20%20Sites%5C%22" class='\"block' w-full py-3 px-4 bg-brand-light text-brand font-semibold text-center rounded-lg hover:bg-brand hover:text-white transition-colors>\n                    Choose Plan\n                <\/a>\n            <\/div>\n        <\/div>\n\n        <!-- Trust Badges -->\n        <div class='\"mt-8' flex flex-col sm:flex-row items-center justify-center gap-6 text-sm text-scandi-muted>\n            <div class='\"flex' items-center gap-2>\n                \n                    \n                \n                <span class='\"font-medium' text-gray-700>14-Day Money-Back Guarantee<\/span>\n            <\/div>\n            <div class='\"hidden' sm:block w-1.5 h-1.5 bg-gray-300 rounded-full><\/div>\n            <div class='\"flex' items-center gap-2>\n                \n                    \n                \n                <span class='\"font-medium' text-gray-700>Payments Protected by Stripe<\/span>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- ==========================================\n         6. FREE VERSION CTA\n    =========================================== -->\n<section class='\"py-20' bg-white border-b border-scandi-border text-center>\n    <div class='\"max-w-3xl' mx-auto px-4 sm:px-6 lg:px-8>\n        <h2 class='\"text-3xl' md:text-4xl font-bold text-gray-900 mb-6>Not ready for Pro yet?<\/h2>\n        </h2><p class='\"text-lg' text-scandi-muted mb-8 leading-relaxed>\n            Try our free version first to see how easy it is to set up an AI chatbot for your website, trained on your exact content.\n        <\/p>\n        </p><div class='\"flex' flex-col items-center justify-center gap-4>\n            <a rel='\"nofollow\"' href="%5C%22https:%5C/%5C/wordpress.org%5C/plugins%5C/intellichat-ai-chatbot%5C/%5C%22" target='\"_blank\"' class='\"inline-flex' justify-center items-center px-8 py-4 text-base font-semibold text-gray-700 bg-white border-2 border-gray-200 hover:border-gray-300 hover:bg-gray-50 rounded-lg shadow-sm hover:shadow-md transition-all duration-200>\n                \n                    \n                \n                Download Free Version\n            <\/a>\n            <p class='\"text-sm' text-gray-500 mt-3 font-medium>\n                </p></a></div></div></section></span></div></div></span></div></div></a></li></ul></span></span></div></div></a></li></ul></span></span></div></div></div></a></li></ul></span></span></div></div></div></div></div></section></a></div></div></div></div></div></div></div></div></div></div></div></span></div></div></section></strong></span></div></div></li></strong></span></div></div></li></strong></span></div></div></li></ul></span></h2></div></div></div></span></div></div></div></div></div></span></div></div></div></div></div></span></div></div></div></div></div></div></span></span></div></div></div></div></div></div></div></div></section></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></span></span></div></div></li></span></span></div></div></li></span></span></div></div></li></ul></span></h2></div></div></div></section></strong></span></div></div></li></strong></span></div></div></li></strong></span></div></div></li></ul></span></h2></div></span></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></section></p></div></div></div></div></div></div></div></div></div></div></div></section></div></button></div></div></div></div></div></span></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></button></a></div></h2></span></h1></span></div></div></div></div></div></section></p>
