The AI Chatbot is the most advanced “surface” in the kit, turning your website from a static page into an intelligent assistant. By bridging your site with world-class models like Google Gemini, Claude, or GPT-4, you can provide 24/7 support that actually understands your business.
1. The “Unified AI” Architecture #
Surface Kit uses a Secure Proxy System. Instead of forcing your visitors’ browsers to talk directly to AI providers (which exposes your API keys), the plugin handles the heavy lifting on your server.
- Multi-Model Support: Switch between Gemini, Claude, and OpenAI with a single click.
- Privacy-First: Conversation logs and history stay on your server.
- Zero-Bloat: The chat interface is part of the 50KB unified asset, ensuring no impact on page speed.
2. Setting Up Your First Bot #
Step 1: Secure API Integration #
Navigate to Surface Kit → AI Settings.
- Provider Selection: Choose your preferred AI engine (e.g., Google Gemini).
- API Key: Paste your key into the secure field.
- Model Selection: Choose specific versions like
gemini-1.5-flashfor speed orgpt-4ofor complex reasoning.
Step 2: Grounding & Personality (RAG) #
To prevent the AI from hallucinating, you must “ground” it in your business data:
- System Prompt: Define the persona (e.g., “You are a helpful support agent for Surface Kit. Be concise and professional.”).
- Custom Context (Pro): Upload your FAQs, pricing, or documentation. The bot will prioritize this information when answering user queries.
3. Visual & UI Customization #
Match the chat interface to your premium brand aesthetic:
- Trigger Style: Use a minimalist sparkle icon or a “Chat with us” pill button.
- Brand Colors: Set the bubble colors to match your theme (e.g., your signature teal gradient).
- Chat Layout: Choose between a full-height sidebar or a classic bottom-corner popup window.
- Welcome Message: Set a custom greeting to initiate the conversation (e.g., “Hi! How can I help you optimize your website today?”).
4. Advanced Interaction Features #
| Feature | Description | Benefit |
| LocalStorage Persistence | Remembers the conversation even if the user refreshes the page. | Seamless user experience. |
| Lead Capture | Asks for an email address before starting the chat. | Turns support into sales. |
| Smart Triggers | Opens the chat automatically after a specific time or on specific pages. | Proactive engagement. |
| Handoff Logic | Provides a WhatsApp or Email button if the AI can’t resolve the issue. | Prevents user frustration. |
5. Performance & Analytics #
Monitor how your AI is performing through the Surface Kit Dashboard:
- Resolution Rate: See how many chats ended without a manual handoff.
- Token Usage: Keep an eye on your API consumption.
- Top Queries: Identify common pain points your customers are asking about.
Pro Tip: For a truly “Unified” experience, use your Floating Action Hub to house the AI Chat button alongside your WhatsApp and Call links. This keeps all your communication surfaces in one elegant, non-cluttered space.
