Day 07 of 07
Add it to all pages, set a usage alert, and share it
Goal: Today you finish the challenge. You add the chatbot to every page on your site, set a usage alert, test it like a first-time visitor, and share the finished thing.
What to do
Add the chatbot to every HTML page
Open each HTML page in your project other than index.html. Add the same three blocks you added on Day 3: CSS link in the head section, widget HTML before the closing body tag, and the script tag before the closing body tag. If your site only has an index.html, skip this step.
<!-- In <head> of every page -->
<link rel="stylesheet" href="chatbot.css">
<!-- Just before </body> of every page -->
<button id="chatbot-button" aria-label="Open chat">💬</button>
<div id="chatbot-window" class="hidden">
<div id="chatbot-header">
<span>Chat with us <small style="opacity:0.65;font-size:11px;font-weight:normal;">· Powered by Claude</small></span>
<button id="chatbot-close" aria-label="Close chat">✕</button>
</div>
<div id="chatbot-messages"></div>
<div id="chatbot-input-row">
<input id="chatbot-input" type="text" placeholder="Type a message..." maxlength="300" />
<button id="chatbot-send">Send</button>
</div>
</div>
<script src="chatbot.js"></script>Set a usage spending alert
Go to the Anthropic console, then Billing or Usage settings, and set an email alert so you get notified before usage surprises you. The exact menu labels can change over time, so use the current console path rather than relying on the exact wording in the lesson.
Final test in a private browser window
Open your live site in a private or incognito window. This simulates a brand-new visitor with no cached files. Click the chat button, send a message, confirm Claude responds in character, then close and reopen and confirm the chat history resets.
Share the prototype for review
You built a chatbot prototype for your website. Share a limited review URL with someone you trust and ask them to test normal, abusive, and out-of-scope prompts. Do not imply that the chatbot is production-ready or professional advice.
Expected result
Your chatbot prototype is available for a controlled review. You have a usage alert set and have tested it as a first-time visitor, including errors and misuse. You have documented the remaining safety and privacy checks.
Key takeaway
- You did not just add a chat widget. You built a full API integration with a secure backend, a custom persona, mobile support, and error handling.