What It Does

An AI-powered chat widget embedded directly on my portfolio website — answering visitor questions about my services, booking discovery calls, and relaying messages to me, all without leaving the page. It shares the same knowledge base and behavioral logic as my WhatsApp bot, and it doubles as a live demo: the widget itself is proof that I build working chatbots, not just descriptions of them.

Try It Live

The Problem

A portfolio website that just lists services and a contact form is passive. The visitor reads, maybe bookmarks the page, and moves on. There’s no way to answer their specific question in the moment they’re thinking about it. For someone selling AI automation services, the portfolio site should demonstrate the product — not just describe it. A static page that says “I build chatbots” without offering a chatbot experience is a missed opportunity.

How It Works

The widget uses the same RAG (Retrieval-Augmented Generation) architecture as my WhatsApp bot. Every response starts with a search of a shared 40-entry knowledge base, so the AI only states facts I’ve verified — it can’t make up prices, timelines, or commitments.

When a visitor sends a message:

The widget sends it to my n8n automation server, where the AI sales agent searches the knowledge base, builds a response from the retrieved content, and sends it back. A dedicated formatting step runs before every response, converting all contact addresses (Cal.com, LinkedIn, email, WhatsApp) into properly clickable links — because the AI wraps URLs in markdown inconsistently, and for contact links, “usually works” isn’t acceptable.

Booking, relay, and off-topic handling:

The same logic as the WhatsApp bot — readiness signals trigger a Cal.com booking offer, out-of-scope questions offer a message relay to me, and casual small talk gets a brief redirect. The behavioral rules were already battle-tested on WhatsApp before the widget was built.

The visual design:

The widget’s default appearance (pink toggle, dark navy header) was completely restyled to match my portfolio site’s brand. The toggle is a green “Ask AI ✨” pill with a subtle pulse animation on page load. The header, send button, and user message bubbles all use the site’s brand green. Styling a third-party widget embedded from a CDN required 12 targeted CSS sections — each element had to be inspected in the live browser DOM to find its actual class name, because the widget’s documented CSS variables didn’t match its runtime behavior.

Screenshots

What Makes It Interesting

It’s both the product description and the product.

Most portfolio projects are screenshots and text — the visitor has to trust that the system works. This widget lets the visitor experience the chatbot live while reading about how it was built. The knowledge base even includes an entry explaining what the visitor just used and that the same system can be built for their business. It closes the credibility gap between “I build chatbots” and “here’s one — try it yourself.”

One knowledge base, two channels, zero duplication.

The WhatsApp bot and the website widget query the same knowledge base table. Content is stored format-neutral (plain URLs, no markdown), and each channel applies its own formatting at the output stage — WhatsApp strips markdown, the website wraps URLs in clickable links. When I update a service description or a price, both channels reflect the change instantly. No copy-pasting between systems, no synchronization bugs. Adding a third channel means building a new interface, not recreating the content.

Deterministic formatting where AI consistency falls short.

The AI wraps URLs in markdown correctly most of the time — but “most of the time” means a visitor might occasionally see a plain-text URL instead of a clickable link. Rather than adding more instructions to the AI’s prompt, I built a formatting step that runs after every response and normalizes all contact addresses into correct clickable links. It’s the same principle as adding quality control at the end of a production line: the upstream process is usually right, but the final check catches the exceptions before they reach the customer.

Tech Stack

• June 15, 2026