How to Build a Custom Chatbot (No Code Guide)
Using Claude Code / GPT Codex to generate a chat widget, then connecting to n8n via webhook.
How to Build a Custom Chatbot (No Code Guide)
You need a chatbot that qualifies leads while you sleep. Not a generic "How can I help you?" widget that visitors close in three seconds, but a conversation engine that captures contact details, identifies high-intent prospects, and routes them to the right partner.
This guide shows you how to build one in 90 minutes using Claude's API and n8n's workflow automation. No developers required.
What You're Building
A chat widget embedded on your website that:
- Asks qualifying questions based on practice area (litigation, tax advisory, M&A, etc.)
- Captures name, email, company, and budget range
- Sends qualified leads directly to your CRM CRMCustomer Relationship Management software. The system of record for contacts, deals, and client communication. Examples: HubSpot, Salesforce, Pipedrive. or Slack
- Stores conversation transcripts for follow-up
Total cost: $20-40/month for typical professional services traffic (500-1000 conversations).
What You Need Before Starting
Claude API APIApplication Programming Interface. The connection point that lets two pieces of software exchange data. How n8n talks to your CRM. Access
Sign up at console.anthropic.com. You'll get $5 in free credits. Upgrade to a paid plan once you're live. Cost: ~$0.02 per conversation.
n8n Account
Create a free cloud account at n8n.io or self-host (Docker setup takes 10 minutes). Cloud plan starts at $20/month for 2,500 workflow executions.
Chatbase Account (for the widget)
Sign up at chatbase.co. Free plan allows 30 messages/month. Paid plan ($19/month) gives you 2,000 messages and removes branding.
Website Access
You need permission to add a JavaScript snippet to your site footer. If you're on WordPress, Webflow, or Squarespace, this takes 60 seconds.
Step 1: Design Your Qualification Flow
Open a text editor and map out exactly what your chatbot needs to learn about each visitor.
Example for a law firm:
- What brings you here today? (Practice area identification)
- What type of organization are you with? (Company size/type)
- What's your timeline for needing help? (Urgency scoring)
- What's your name and email? (Contact capture)
Example for an accounting firm:
- What service are you looking for? (Tax, audit, advisory, fractional CFO)
- What's your annual revenue range? (Budget qualification)
- Are you currently working with another firm? (Competitive intel)
- Best email to send our service overview? (Lead capture)
Write this out as a simple numbered list. This becomes your system prompt in Step 3.
Step 2: Set Up Your n8n Webhook
Log into n8n and create a new workflow.
Add a Webhook WebhookA way for one app to send real-time data to another the instant an event happens. Example: DocuSign pings n8n the moment a contract is signed. node:
- Click the "+" button, search for "Webhook"
- Select "Webhook" from the list
- Set HTTP Method to "POST"
- Set Path to "/chatbot-lead" (or any unique identifier)
- Click "Execute Node" - this generates your webhook URL
- Copy this URL. It looks like:
https://yourinstance.app.n8n.cloud/webhook/chatbot-lead
Add a Claude node:
- Click "+" after the Webhook node
- Search for "HTTP Request" (we'll call Claude's API directly)
- Set Method to "POST"
- Set URL to
https://api.anthropic.com/v1/messages - Under Authentication, select "Header Auth"
- Add header:
x-api-keywith your Claude API key - Add header:
anthropic-versionwith value2023-06-01 - Add header:
content-typewith valueapplication/json
Configure the request body:
In the Body section, select "JSON" and paste:
{
"model": "claude-3-5-sonnet-20241022",
"max_tokens": 1024,
"messages": [
{
"role": "user",
"content": "`{{ $json.body.message }}`"
}
],
"system": "You are a lead qualification assistant for [YOUR FIRM NAME]. Your job is to ask visitors these questions in a natural conversation: 1) What service do they need? 2) What's their company size? 3) What's their timeline? 4) Their name and email. Keep responses under 40 words. Be professional but conversational."
}
Replace [YOUR FIRM NAME] with your actual firm name.
Add a response node:
- Add another "Respond to Webhook" node after the HTTP Request
- Set Response Body to
{{ $json.content[0].text }}
Click "Execute Workflow" to test. Your webhook is now live.
Step 3: Create the Chat Widget in Chatbase
Log into Chatbase and click "New Chatbot."
Connect to your n8n webhook:
- Select "Custom API" as your data source
- Paste your n8n webhook URL from Step 2
- Set Request Method to "POST"
- Under "Message Field," enter
message - Under "Response Field," enter the JSON path to Claude's response (this varies - test and adjust)
Configure the widget appearance:
- Go to Settings > Widget
- Set your brand color (use your firm's primary color)
- Upload your logo (square format, 200x200px minimum)
- Set initial message: "Hi, I'm here to help you find the right [service type] for your needs. What brings you here today?"
- Set suggested prompts: "I need tax help," "Tell me about your services," "I want to schedule a call"
Set up lead capture:
- Go to Settings > Lead Collection
- Enable "Collect email before chat" (optional but recommended)
- Add custom fields: Name, Company, Phone (mark as optional)
Step 4: Add Lead Routing to n8n
Go back to your n8n workflow. After the Claude response node, add routing logic.
Add a conditional node:
- Insert an "IF" node after the Respond to Webhook node
- Set condition:
{{ $json.content[0].text }}contains "email" - This triggers when the visitor provides their email
Add a CRM node (true branch):
For HubSpot:
- Add "HubSpot" node
- Select "Create or Update Contact"
- Map fields: Email =
{{ $json.body.email }}, Name ={{ $json.body.name }} - Add custom property: "Lead Source" = "Website Chatbot"
For Salesforce:
- Add "Salesforce" node
- Select "Create Lead"
- Map fields similarly
For a simple solution, add a "Send Email" node:
- Add "Send Email" node
- To: your intake email
- Subject: "New Chatbot Lead:
{{ $json.body.name }}" - Body: Include all captured fields
Add a Slack notification (optional):
- Add "Slack" node on the true branch
- Select your channel (create a #leads channel if needed)
- Message: "New qualified lead from chatbot:
{{ $json.body.email }}"
Step 5: Embed the Widget on Your Site
In Chatbase, go to Settings > Embed.
Copy the JavaScript snippet. It looks like:
<script>
window.embeddedChatbotConfig = {
chatbotId: "YOUR_CHATBOT_ID",
domain: "www.chatbase.co"
}
</script>
<script src="https://www.chatbase.co/embed.min.js" defer></script>
For WordPress:
- Go to Appearance > Theme File Editor
- Open footer.php
- Paste the snippet before the closing
</body>tag - Save
For Webflow:
- Go to Project Settings > Custom Code
- Paste in Footer Code section
- Publish
For Squarespace:
- Go to Settings > Advanced > Code Injection
- Paste in Footer section
- Save
Test by visiting your site in an incognito window. The chat widget should appear in the bottom right corner.
Step 6: Test the Complete Flow
Run through a full conversation:
- Open your website
- Click the chat widget
- Answer the qualification questions
- Provide your email
- Check that the lead appears in your CRM or email
- Verify the Slack notification fired (if configured)
Common issues:
- Widget doesn't appear: Check browser console for JavaScript errors. Verify the snippet is in the footer, not header.
- Webhook fails: Check your n8n execution log. Verify the Claude API key is correct.
- Leads not routing: Check the IF condition logic. Add a "Set" node before the IF to inspect the exact data structure.
Improving Response Quality
Your chatbot will sound generic at first. Refine the system prompt in your n8n HTTP Request node.
Better system prompt template:
You are a lead qualification assistant for [FIRM NAME], a [practice area] firm serving [target market].
Your goal: Determine if the visitor needs [service 1], [service 2], or [service 3], then collect their contact info.
Ask these questions in order:
1. What challenge are you trying to solve?
2. What's your company's annual revenue? (Options: Under $5M, $5M-$20M, $20M+)
3. What's your timeline? (Options: Urgent - within 2 weeks, Soon - within 2 months, Exploring options)
4. What's your name and best email?
Rules:
- Keep each response under 35 words
- If they ask about pricing, say: "Our fees depend on scope. Let's get you connected with the right partner to discuss specifics."
- If they ask about credentials, mention: [your key differentiator - e.g., "We're a top 50 firm with 15 years in M&A tax"]
- Never make up information about services you don't offer
Test variations. Check your conversation logs in Chatbase to see where visitors drop off.
What This Costs at Scale
500 conversations/month:
- Chatbase: $19/month
- n8n: $20/month
- Claude API: ~$10/month
- Total: $49/month
2,000 conversations/month:
- Chatbase: $99/month
- n8n: $50/month (higher tier)
- Claude API: ~$40/month
- Total: $189/month
Compare this to a full-time intake coordinator ($50k+ annually) or a enterprise chatbot platform ($500-2000/month).
Next Steps
Once your chatbot is live and collecting leads:
- Review conversation logs weekly. Identify questions the bot handles poorly.
- A/B test different opening messages. "What brings you here?" vs. "Looking for tax help or advisory services?"
- Add a calendar booking link for qualified leads. Use Calendly's API in n8n to auto-schedule.
- Create separate chatbots for different practice areas with unique qualification flows.
You now have a 24/7 lead qualification system that costs less than one business lunch per month.
Frequently Asked Questions
How do I build an AI chatbot for my website without coding? The fastest no-code path: (1) Create an n8n webhook that calls Claude or GPT-4o. (2) Create a chat widget in Chatbase pointing at your n8n webhook. (3) Embed the Chatbase JavaScript snippet in your site footer. Total setup time: 90 minutes. Total monthly cost: ~$49 for 500 conversations.
What should my AI chatbot ask website visitors? Collect four things in order: (1) what service brings them to your site. (2) company size or relevant qualifying attribute. (3) timeline urgency. (4) name and email. Design this as a natural 4-question flow, not a form. Most visitors will answer all four if the first question is open-ended and friendly.
How much does an AI website chatbot cost? At typical professional services traffic: Chatbase $19/month, n8n $20/month, AI API $10-30/month. Total: $49-69/month for 500-2,000 conversations. Compare to a full-time intake coordinator at $50,000+/year or enterprise chatbot platforms at $500-2,000/month.
How do I route chatbot leads to my CRM? In your n8n workflow, after the AI response node, add an IF node that checks for email presence. When the email is present, connect a CRM node to create or update the contact record with conversation context and a 'Lead Source: Chatbot' property. Add a Slack notification node to alert your team in real time.
Related Resources
Bland Voice Agent Setup Guide
Set up Bland AI as your outbound and inbound voice agent - account configuration, voice and script tuning, latency calibration, and n8n webhook integration for lead routing.
Calendar Integration: n8n + Google / Outlook
Checking availability, booking meetings, sending calendar invites from n8n.
Lead Qualification Criteria Template
Fill-in template: 5 qualifying signals, 5 disqualifying signals, confidence thresholds.
The full system, end to end.
Looking to build your AI workforce? Get the comprehensive guide for professional services - the 12 plays, the frameworks, and the field-tested playbooks.
Buy on Amazon
Reviewed by Revenue Institute
This guide is actively maintained and reviewed by the implementation experts at Revenue Institute. As the creators of The AI Workforce Playbook, we test and deploy these exact frameworks for professional services firms scaling without new headcount.
Get the Book
Need help turning this guide into reality?
Revenue Institute builds and implements the AI workforce for professional services firms.
Work with Revenue Institute