---
spec_name: "AI Website Receptionist Bot"
version: 1.0
description: "A spec for Claude Code to build a custom lead-qualifying chatbot for a website, mirroring the Hugging Face robot receptionist. This bot will greet visitors, ask qualifying questions, and route them to the correct resource or calendar."
author: "Mike Kwal"
date: "2026-05-29"
---

## 1. The Goal

Create a self-contained, lightweight chatbot widget for a website. The bot's job is to act as a digital receptionist, engaging visitors on key pages to qualify them as potential leads and direct them appropriately. This should be a single HTML file with inline CSS and JavaScript for easy implementation.

## 2. Core Logic Flow

The bot should follow this conversational logic tree:

1.  **Initiation:**
    *   The chat widget remains as a small icon in the bottom-right corner.
    *   After a user has been on a page (e.g., `/pricing` or `/contact`) for 10 seconds, the widget should expand with a greeting: "Hey there! Have a quick question about our services?"

2.  **Initial Response & Triage:**
    *   Provide two buttons: "Yes, I do" and "Just browsing."
    *   If "Just browsing," respond with: "No problem! I'm here if you need me." and collapse the window.
    *   If "Yes, I do," proceed to qualification.

3.  **Qualification Questions:**
    *   **Question 1:** "Great! To point you in the right direction, are you looking for help with a new project or support for an existing one?" (Buttons: "New Project", "Support")
    *   **If "Support"**: Respond with: "Got it. The best place for support questions is our help center at [link to help center] or via email at support@example.com. Can I help with anything else?"
    *   **If "New Project"**: Proceed to the next question.

    *   **Question 2:** "Excellent. What's the approximate size of your team?" (Buttons: "1-10 people", "11-50 people", "50+ people")

4.  **Routing based on Qualification:**
    *   **If "1-10 people"**: Respond with: "Perfect. Our packages for teams your size are detailed on our pricing page. You can get started there directly. Here's the link: [link to pricing page]. Let me know if you have other questions!"
    *   **If "11-50 people" or "50+ people"**: This is a qualified lead. Respond with: "That's a great fit. The next step would be a brief strategy call to see how we can help. You can book a time that works for you directly on my calendar here: [link to Calendly/booking page]."

## 3. The Prompt for Claude

```
You are an expert front-end developer specializing in vanilla JavaScript, HTML, and CSS. Your task is to build a self-contained chatbot widget based on a specific logic flow.

**Requirements:**

1.  **Single File Output:** Generate a single HTML file (`chatbot.html`) that contains all the necessary HTML structure, CSS styles, and JavaScript logic. No external dependencies.
2.  **UI/UX:**
    *   The chatbot should live in a fixed-position container in the bottom-right of the screen.
    *   It should start as a circular icon. On hover, the icon can have a subtle animation.
    *   When opened (either by click or automatically after a delay), it should expand into a clean, professional-looking chat window (approx. 350px wide, 500px tall).
    *   The conversation should display messages from the bot and buttons for the user's response.
3.  **Functionality:**
    *   Implement the exact conversational logic flow detailed in the 'Core Logic Flow' section above.
    *   The initial greeting should trigger automatically 10 seconds after the page loads.
    *   User responses should be handled by clicking buttons, not by text input.
    *   Ensure all links (e.g., to a booking page or help center) are clearly marked and functional placeholders.
4.  **Code Quality:**
    *   The code should be well-commented so a non-expert can easily change the text content or links.
    *   Use modern, clean CSS for styling. Make it easy to change the primary brand color.

Now, generate the complete `chatbot.html` file.
```

## 4. Implementation

1.  Copy the complete HTML code generated by Claude.
2.  **For WordPress:** Use a plugin like "Insert Headers and Footers" or "WPCode" to paste the chatbot code into the footer section of your site. Configure it to only show on specific pages if desired.
3.  **For Webflow/HTML sites:** Paste the code into a custom embed block just before the closing `</body>` tag on the pages where you want the bot to appear.
4.  Update the placeholder links (`[link to help center]`, `[link to Calendly/booking page]`, etc.) with your actual URLs.