The 60-Minute Chatbot · Lesson 4 of 5
Lesson 4 — The Branding
> 6 minutes · make it look and sound like a real product, not a demo
What you have right now works, but it looks like a demo. In this lesson we make three small changes that turn it into something you'd be comfortable showing a real client. Together they take about 6 minutes and they're the difference between "interesting" and "you built that?"
---
Open `server/index.js` and find `SYSTEM_PROMPT`. Add a few sentences after the existing rules:
``` Voice notes:
- Slight Northeast Pennsylvania warmth. Friendly, but not chirpy.
- Use everyday HVAC language ("furnace," "AC unit," "tune-up") — never industry jargon
the customer wouldn't recognize.
- If someone seems frustrated, lead with empathy before logistics. Example:
"That's a rough night, I'm sorry. Here's what we can do…"
- End with a clear next step when there is one. ("Want me to set you up
for a Saturday tune-up?" beats "Let me know if you have questions.") ```
Save the file. Stop the server (`Ctrl+C` in your terminal) and restart it (`npm start`). Try a question that might trigger emotion — like "my AC went out and it's 95 degrees in the house." Compare the answer before and after.
This is the cheapest, fastest way to make AI feel less like AI: specific voice instructions in the prompt.
---
Find `BUSINESS_FACTS`. Add three more lines for things customers actually ask:
```
- Warranty on installs: 10 years parts, 2 years labor (Comfort Zone covers both)
- Senior discount: 10% off any service call for customers 65+
- Most common emergency: no heat in winter — average response time 90 minutes
```
Save and restart. Now ask "do you offer a senior discount?" Notice the bot pulls the answer directly. Add anything you can think of: payment methods, holiday hours, whether you charge for estimates. The richer this block, the less the bot has to punt.
---
Open `public/index.html`. Find the header block:
```html <header> <h1>Comfort <span class="accent">Zone</span> Heating & Cooling</h1> <p>Ask about pricing, services, hours, or whether we cover your area.</p> </header> ```
Two small things:
Add a phone number. Real businesses always show a phone number in the header. Modify it to:
```html <header> <h1>Comfort <span class="accent">Zone</span> Heating & Cooling</h1> <p>Ask about pricing, services, or hours · Or call us: <strong>570-555-0142</strong></p> </header> ```
Add an emergency line link. Above the chat, add an emergency banner:
```html <header> <!-- existing h1 + p --> <p style="background:#fef3c7;color:#92400e;padding:6px 10px;border-radius:6px; font-size:11px;margin-top:8px;text-align:center;"> 🚨 No heat or AC right now? Call our 24/7 line: <strong>570-555-0142</strong> </p> </header> ```
Refresh the page. Now your demo looks like a real product instead of a Hello World. Two visible cues — phone number, emergency banner — that say "this is built for an actual business."
---
These three changes — voice notes, richer facts, real-business UI — turn a demo into something you can show a client without apologizing for it. None of them required new code. All of them came from the prompt and one HTML file.
The whole "polish a demo" cycle is usually:
- Add voice rules to make tone specific
- Add more facts to reduce "I don't know" responses
- Add real-business UI cues (phone, hours, emergency link) so it looks legit
You can repeat this loop for any business in 10 minutes flat once you've done it once.
---
We're done coding. Last lesson is about what to do *next* — how to share what you built, what to learn second, and how to pitch this kind of work if you want to charge for it.