UConn AI Club
Would you
rather…?
Pick a theme. Get two ridiculous choices. Defend your answer.
Try the floating chat window or open the full-page layout. Try built-in replies, or connect your own key using the instructions in the chat.
Full-page AI chat · Back
How this floating chatbot works
Close the floating window to explore the code. Copy the HTML into your page, then include the CSS and both scripts below. Keep the same element IDs so the buttons connect to the script.
The password field receives a key only while the page is open. Never write your API key into these files.
1. HTML — the chat button, key field, and message panel
Loading source…2. CSS — widget appearance and mobile layout
Loading source…3. JavaScript — key handling, messages, and API request
Loading source…4. Markdown — format the AI reply
Loading source…File order: load chat.css in the head; put the widget HTML in the body; load markdown.js before chat.js at the end. Adjust file paths to match your folders. The shared CSS also supports the full-page route.