Surface Kit – The All in One Engagement Platform. Sticky Headers, Floating Buttons, AI Chatbot, Popups vs Popups for Divi

Surface Kit is the unified engagement platform for WordPress. Instead of installing separate plugins for sticky headers, floating buttons, popup builders, and AI chat activate only the features you need from one centralized dashboard. Designed for marketers, agencies, and site owners who want to increase conversions without plugin bloat, Surface Kit combines the most-requested engagement features into a lightweight, high-performance toolkit. Why Surface Kit Stands Out Most engagement plugins make you choose. You want a sticky header? Install one plugin. You want floating buttons? Install another. You want an AI chatbot? That’s a third plugin plus monthly API costs. Surface Kit eliminates that friction. One plugin. One dashboard. One place to activate, customize, and analyze visitor engagement. Compare what Surface Kit replaces: * Traditional sticky header plugins (free/paid variants) * Floating action button builders * Notification and popup platforms * Separate AI chatbot services * Analytics from multiple tools Surface Kit bundles all of this functionality into a single installation with unified analytics. AI Chatbot – Your 24/7 Sales and Support Machine Multi-model AI support means you’re never locked into one provider. Seamlessly switch between OpenAI, Anthropic Claude, and Google Gemini or use multiple models for different purposes. Key Features: * Select your preferred AI provider (OpenAI, Anthropic, Google Gemini) * Secure API proxy routes requests through WordPress to protect API keys * Customizable system instructions and brand voice * Smart trigger controls: auto-open on scroll, exit-intent, or manual * Conversation history persistence across sessions * Built-in conversation logging and analytics * Mobile-responsive chat widget with custom styling * Page-level visibility rules for precise targeting * Rate limiting and cost controls The chatbot learns from your site context. Provide documentation, FAQs, or custom knowledge the AI delivers responses grounded in your actual content. Sticky Navigation – Keep Navigation Accessible Sticky headers improve UX and reduce bounce. Surface Kit’s implementation is universal: works with any theme (Elementor, Divi, Genesis, custom themes), any page builder, and any WordPress setup. Features: * Automatic sticky activation when users scroll past original position * Scroll-aware fade-in and smooth animations * Optional bottom border and drop shadow styling * Scroll progress indicator bar (optional) * Device-specific visibility (show/hide on mobile, tablet, desktop) * Page-level rules: apply sticky to all pages, selected pages, or exclude specific pages * Minimal CSS/JS footprint protects Core Web Vitals * Real-time visual preview in the admin dashboard No CSS selectors required. Point-and-click setup works with any navbar structure. Floating Action Buttons – Direct Communication Channels 11+ button types keep visitors connected to your most important channels. Configure up to 3 active buttons displayed together, or use the orbital hub mode for expandable menus. Supported Actions: * Click-to-Chat (WhatsApp, Messenger, Telegram, Instagram, Facebook, X/Twitter) * Click-to-Call phone integration * Email shortcuts * Scroll-to-top with progress indicator * Custom URL buttons * Messenger/SMS workflows * Social media links Features: * Multi-button orbital hub with custom ordering * Trigger-based display (scroll depth, time delay, exit-intent) * Device targeting and scheduling windows * Page-level include/exclude rules * Custom styling: colors, icons, animations, sizing * Analytics: track opens, clicks, and conversions per button * Pre-filled messages for click-to-chat * Responsive design for all screen sizes Smart Popups – Exit-Intent, Targeted Offers, Lead Capture Display high-converting offers exactly when visitors are ready to act or about to leave. Features: * Exit-intent detection (trigger when cursor moves toward browser exit) * Display triggers: immediate, scroll-based (%, distance), time-delayed * Smart scheduling: set display windows (date ranges, specific times) * Cookie-based frequency control (show once per session, daily, weekly) * Page-level targeting: include/exclude specific pages and post types * Device-specific display rules * Custom form builder for lead capture * Pre-built templates for discounts, lead magnets, announcements Built-in Analytics Dashboard All engagement metrics in one place. No external tools required. Metrics Tracked: * AI Chatbot: message count, conversation duration, resolution rate * Floating Buttons: click-through rate, channel breakdown, conversion source * Popups: impressions, click-through rate, form submissions, conversion rate * Sticky Navigation: scroll depth, interaction patterns * Time ranges: 7 days, 30 days, 90 days, all-time * Device breakdown: desktop, tablet, mobile * Detailed event logs: timestamps, user actions, conversion sources Performance & Security Built for speed and privacy. Lightweight asset delivery: minimal CSS/JS adds <50KB to page weight Lazy loading: engage code only loads when feature is triggered Core Web Vitals optimized: no impact on LCP, INP, or CLS API key security: keys proxied through WordPress backend, never exposed to browser Local storage: all analytics and settings stored in your WordPress database GDPR-friendly: conversation history and analytics remain fully private No external data requests unless explicitly configured Cross-Theme & Builder Compatibility Works with every WordPress theme and page builder. Tested with: * Elementor (Pro & Free) * Divi * GeneratePress * Astra * OceanWP * Beaver Builder * WPBakery * Gutenberg (Block Editor) * Custom themes What’s Included in Free vs Pro Free Version: * Sticky navigation * 1 floating button (limited channels) * Basic popup builder * Keyword-based chatbot (no AI) * 90-day analytics retention * Essential support Pro Features (Premium): * Unlimited floating buttons * Multi-model AI chatbot (OpenAI, Anthropic, Google Gemini) * Conversation history and RAG context * Unlimited analytics retention * Page-level visibility rules for all features * Custom CSS injection * Priority support Real-World Use Cases E-commerce stores: AI chatbot answers product questions, sticky checkout button increases conversions, exit-intent discount popup recovers abandoned carts. SaaS applications: Sticky navigation keeps features accessible, floating chat button reduces support tickets, popups promote feature adoption. Marketing agencies: One dashboard controls engagement for multiple client sites, unified analytics proves ROI to stakeholders. Service businesses: Click-to-call buttons convert visitors, AI chatbot qualifies leads 24/7, sticky booking button is always visible. Content sites & blogs: Exit-intent email capture grows your list, sticky navigation improves content discovery, floating button links to your best-performing content. External Services & API Dependencies Surface Kit integrates with third-party AI services only when you enable the chatbot and provide your own API keys. No data is sent to external servers without explicit configuration. OpenAI API (optional, for chatbot) * Endpoint: https://api.openai.com/v1/chat/completions * Data sent: model selection, system instructions, conversation messages, API key * When: only when enabled and chatbot messages are sent * Terms: https://openai.com/policies/terms-of-use * Privacy: https://openai.com/policies/privacy-policy Anthropic Messages API (optional, for chatbot) * Endpoint: https://api.anthropic.com/v1/messages * Data sent: model selection, system instructions, conversation messages, API key * When: only when enabled and chatbot messages are sent * Terms: https://www.anthropic.com/legal/commercial-terms * Privacy: https://www.anthropic.com/legal/privacy Google Gemini API (optional, for chatbot) * Endpoint: https://generativelanguage.googleapis.com/v1beta/models * Data sent: model selection, system instructions, conversation messages, API key * When: only when enabled and chatbot messages are sent * Terms: https://developers.google.com/terms * Privacy: https://policies.google.com/privacy No requests are made to these services unless the chatbot is explicitly enabled and configured. Privacy & Data Collection To provide proper support and ensure plugin compatibility, Surface Kit may collect limited technical data when you choose to “Verify” your installation or provide feedback during deactivation. This process is optional and helps us improve the user experience. Data we may collect includes: Contact Information: Admin email address for support-related correspondence. Site Identity: Site URL and environment details to troubleshoot compatibility issues. Direct Interactions: Feedback, survey responses, and error reports provided during plugin usage or deactivation. Technical Logs: User agent, PHP/WordPress versions, and installation timestamps to identify bugs and performance bottlenecks. We do not track individual user behavior or share this data with third parties for marketing purposes. Support & Documentation For detailed documentation, setup guides, and troubleshooting, visit: https://getsurfacekit.com/docs Need help? Open a support ticket: https://wordpress.org/support/plugin/surface-kit/ Contributors Special thanks to the WordPress community for feedback and testing. License Surface Kit is released under the GPLv2 or later. See license.txt in the plugin folder or https://www.gnu.org/licenses/gpl-2.0.html for details.

After the plugin is activated, the Visual Builder displays a new tab called “Popup” in the Section Settings modal. In the “Popup” tab, you can turn a regular Section into a Popup! It’s super simple, as you can see on the plugins Demo Page: divimode.com/divi-popup/demo ℹ️ How it works First, activate the plugin (no configuration needed!) Open up your Visual Builder and edit a Section – you’ll see a new “Popup” tab in the Section Settings. Toggle the option “This is a Popup” and set the “Popup ID” to something (e.g., “newsletter-optin“). Close the Section Settings. Add a Button Module somewhere else on the page and set the “Link URL” to your Popup ID, with a leading “#” hash (e.g. “#newsletter-optin“) That’s all. Save the page and exit the Visual Builder! Click on the button, and you’ll see your Popup. Congratulations! ⭐️ Additional details Check out the Plugin website for more details. You’ll find: Examples CSS class options JS API documentation WP filter documentation Tested in all major browsers on Windows and Mac: Chrome, Firefox, Safari, IE 11, Edge! Popups for Divi Course During the past years, we’ve added a ton of features and have created a stable and powerful marketing plugin. To celebrate the anniversary, we have created a six-day course that teaches you everything about the plugin. It walks you through the basics of creating your first Popup, shows possible ways to customize your Popup layouts and goes into advanced techniques and usages of the plugin. “The instruction emails really helped me to understand how to use the plugin correctly!” The course is available in your wp-admin Dashboard right after you install and activate the plugin. Check out the screenshots to see the form. Also, have a look in the FAQ section, if you want to disable this feature. 🥳 Want more? If you want to get the most out of Divi, you need to have a look at Divi Areas Pro to get additional features: An admin UI to create and configure your popups Choose between 4 Area Types: Popup, Inline, Fly-in, Hover A beautiful UI that blends in perfectly with Divi Add advanced triggers to your Areas: On click On hover On scroll After delay On Exit Customize the Area Display Show on certain pages Show on certain devices Show for certain user roles or guests Customize Area Behavior Show/Hide the Close button Display the Area once per hour, day, week, … Flexible position for Inline Areas Replace/extend the page header or Footer or Comment section or actually any Divi section inside the page content It comes with an extended version of the JS API Great documentation built into the plugin and an online knowledge base and much more… 👉 Learn more about Divi Areas Pro (with screenshots!)