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 your chatbot
You built a working AI chatbot for your website in 7 days. Share your live site URL with someone and ask them to use the chatbot. Post: "I just added an AI chatbot to my site. Ask it something!" Include your Day 4 screenshot.
Expected result
Your chatbot is live on every page of your website. You have a usage alert set. You have tested it as a first-time visitor. You have shared it with at least one person.
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.