Building an AI Chat Widget That Actually Converts Visitors

You know that feeling when someone lands on your portfolio and leaves in 10 seconds? Yeah, I was tired of it too.

I'd been watching my analytics for months, seeing decent traffic but terrible engagement. People would hit my homepage and bounce faster than a bad date. Something had to change.

That's when I decided to build an AI chat widget. Not one of those generic "How can I help you?" things that everyone ignores, but something that would actually start conversations about my work.

Why Most Chat Widgets Fail (And What I Did Differently)

Here's the thing about most portfolio chat widgets – they're built backwards. They wait for visitors to ask questions instead of proactively engaging with what people actually want to know.

I spent a week analyzing the emails and messages I get from potential clients. Turns out, 90% of them ask the same five questions: - What's your experience with [specific technology]? - How long would a project like [their idea] take? - What's your typical project process? - Can you show me similar work you've done? - What are your rates?

So instead of building a reactive chat bot, I built one that anticipates these questions and steers conversations toward them naturally.

The Technical Stack (Keep It Simple)

I went with a surprisingly minimal setup:

// Core dependencies
{
  "@anthropic-ai/sdk": "^0.20.0",
  "next": "^14.0.0",
  "react": "^18.0.0",
  "framer-motion": "^10.16.0"
}

Yeah, that's it. No complex state management, no fancy chat libraries. Just Claude's API, Next.js for the backend route, and Framer Motion for smooth animations.

The widget itself is a floating button that expands into a chat interface. I've seen too many widgets that take over the entire screen – nobody wants that.

const ChatWidget = () => {
  const [isOpen, setIsOpen] = useState(false)
  const [messages, setMessages] = useState([
    {
      role: 'assistant',
      content: "Hey! I'm Ibrahim's AI assistant. I know pretty much everything about his work and experience. What would you like to know?"
    }

const sendMessage = async (content) => { const newMessages = [...messages, { role: 'user', content }] setMessages(newMessages) const response = await fetch('/api/chat', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: newMessages }) }) const data = await response.json() setMessages([...newMessages, { role: 'assistant', content: data.message }]) }

return ( {/ Chat interface implementation /} ) } `

Crafting the AI Personality

This was honestly the hardest part. I wanted the AI to sound helpful but not overly formal, knowledgeable but not like it was showing off.

After dozens of iterations, here's the system prompt that works:

Key personality traits: - Conversational and friendly, like a helpful colleague - Enthusiastic about Ibrahim's work but not salesy - Direct and honest about capabilities and limitations - Always try to connect questions back to Ibrahim's actual experience

When visitors ask technical questions, reference specific projects from his portfolio. If they're interested in working together, guide them toward the contact form or scheduling a call.

Keep responses concise but informative. If someone asks something you can't answer, suggest they reach out to Ibrahim directly. `

I also fed it detailed information about all my projects, tech stack preferences, and typical project processes. The goal was to make it feel like talking to someone who actually knows my work, not a generic chatbot.

The Backend Magic

The API route is straightforward but does a few clever things:

// /api/chat.js

const anthropic = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY })

export default async function handler(req, res) { const { messages } = req.body // Add system context about Ibrahim's work const systemMessage = { role: 'system', content: IBRAHIM_CONTEXT // My detailed background info } try { const response = await anthropic.messages.create({ model: 'claude-3-sonnet-20240229', max_tokens: 300, // Keep responses concise messages: [systemMessage, ...messages] }) // Log conversations for analysis (anonymized) await logConversation(messages, response.content) res.json({ message: response.content[0].text }) } catch (error) { res.status(500).json({ error: 'Something went wrong' }) } } `

I'm logging conversations (with personal info stripped) to understand what people are really asking about. This data has been goldmine for improving both the AI responses and my portfolio content.

What I Learned About AI Conversations

After three months of real conversations, here's what actually works:

People want specific examples. Generic responses kill engagement. When someone asks about React experience, the AI mentions specific projects from my portfolio with actual details.

Timing matters more than content. The widget waits 30 seconds before showing a subtle pulse animation. Too early and it's annoying, too late and people have already left.

Questions beat statements. Instead of "I can help you with your project," responses like "What kind of app are you thinking of building?" get much better engagement.

Admit limitations quickly. When the AI doesn't know something, it says so immediately and suggests contacting me directly. People respect honesty.

The Results (And Some Surprises)

Since launching the chat widget: - Average session duration up 40% - Contact form submissions up 25% - But here's the weird part – most people don't actually send messages

Turns out, just having an intelligent chat option makes the whole site feel more approachable. Even visitors who never open the widget seem to browse longer.

I've had conversations turn into actual projects three times now. Not bad for a weekend side project that cost me $12 in API calls last month.

Quick Wins You Can Implement Today

• Start with a simple floating button – don't overthink the design • Write your system prompt in your own voice, then make it slightly more helpful • Log conversations to understand what people actually want to know • Set a reasonable token limit to keep responses focused • Test the timing – when does the widget appear and how does it get attention? • Make it mobile-friendly from day one (60% of my conversations happen on mobile)

Building this chat widget taught me more about my potential clients than any analytics dashboard ever could. Sometimes the best way to understand your audience is just to start a conversation.

What would you want to ask an AI about someone's portfolio? I'm curious if your questions would be different from what I'm seeing.