n8n Gemini Chatbot for WordPress

A premium floating chatbot assistant for WordPress powered by Google Gemini and orchestrated via n8n workflows.

This plugin connects your WordPress site directly to an n8n webhook workflow. It handles session management, frontend aesthetics, sound cues, light/dark theme toggles, and features deep WooCommerce integration—automatically fetching order status and product lists to inject as conversational context for Gemini.

Key Features

• n8n Integration: Forwards user queries, sessions, and site details directly to your custom n8n webhook URL.
• Google Gemini Powered: Designed to work seamlessly with Gemini models inside n8n node structures.
• WooCommerce Context Injection:
  • Automatically matches expressions like order 17, #17, or just 17 in user chats.
  • Dynamically queries WooCommerce to fetch items, prices, order dates, payment methods, and shipping status.
  • Injects a secure, hidden context prompt behind the scenes, enabling Gemini to answer account/order queries conversationally without exposing your full database or requiring complex API configurations.
• Secure Webhook Handler: Routes queries through a local WordPress REST endpoint (/wp-json/n8n-chatbot/v1/chat) to keep your production n8n webhook URL secure and hidden from the public client.
• Interactive Frontend Chatbot:
  • Customizable title, welcome greeting, and accent color picker.
  • Light / Dark / Auto (respects system preferences) theme selector.
  • Built-in sound effects (uses the browser's Web Audio API synthesizers to sound alert cues without loading heavy static media files).
  • Automatically persists chat history across page transitions in the browser's localStorage.

n8n Workflow Configuration

The plugin includes a workflow template JSON file: n8n-workflow-template.json.

You can import this template directly into your n8n dashboard:

1. Open n8n and create a new workflow.
2. Click the top-right menu and choose Import from File.
3. Select n8n-workflow-template.json.
4. Configure your Google Gemini Chat nodes and copy the generated Production Webhook URL.
5. Paste this URL into the plugin settings inside WordPress.

Installation

1. Clone or download this repository into your WordPress plugins folder:

   cd wp-content/plugins
   git clone https://github.com/ajaychandani003/wp-n8n-gemini-chatbot.git

2. Go to the WordPress Admin Dashboard -> Plugins and activate n8n Gemini Chatbot.
3. Go to Settings -> Gemini Chatbot in the sidebar to configure the webhook connection and colors.

File Structure

wp-n8n-gemini-chatbot/
├── assets/
│   ├── css/
│   │   └── chatbot.css                # Glassmorphism, animations, dark mode rules
│   └── js/
│       ├── admin.js                   # Color picker initializer for settings
│       └── chatbot.js                 # UI toggles, sound synthesis, API fetching, persistence
├── n8n-workflow-template.json         # Includable n8n workflow template JSON
├── wp-n8n-gemini-chatbot.php          # Main plugin bootstrap, REST routes, WooCommerce context builder
└── README.md                          # Documentation

License

GPLv2 or later.