Changed #textBox to #nameBox, for easier recognition. Updated README and TODO

README.md

@@ -13,6 +13,8 @@ A chatbot for Owncast, where viewers earn points which can be redeemed for strea
 * [Rewards Queue](#rewards-queue)
 - [Kofi Integration](#kofi-integration)
 - [Overlays](#overlays)
+- [To-do List](#to-do-list)
+- [Alerts](#alerts)
 - [Support](#support)
 - [Contributing](#contributing)
 - [License](#license)
@@ -124,7 +126,7 @@ Also provided by the install script. The queue will refresh every 30 seconds to
 OwnchatBot accesses Owncast chat room information via a webhook. You'll need to point Owncast at that webhook for things to function.
 1. Go to your Owncast Admin panel -> Integrations -> Webhooks
 2. Click on "Create Webhook"
-3. In the top field, enter OwnchatBot's address and port which you set up in the "Running OwnchatBot" section, with `/chatHook` appended (Example: http://localhost:8081/chatHook).
+3. In the top field, enter OwnchatBot's address and port which you set up in the "Running OwnchatBot" section, with `/chatHook` appended (Example: http://<your.ocb.address>/chatHook).
 4. Click the "Select All" button.
 5. Click "OK"
 
@@ -153,7 +155,7 @@ Integration is accomplished via a webhook triggered by Kofi every time a donatio
 
 Paste the webhook address into Kofi -> More -> API -> Webhooks -> Webhook URL.
   ```
-  https://<your_external.ownchatbot.url>/kofiHook
+  https://<your.ocb.address>/kofiHook
   ```
 
 Click "Update", but stay on this page.
@@ -169,22 +171,70 @@ If a viewer donates/subscribes before entering their email address, OwnchatBot c
 Email addresses are **ONLY** used for Kofi integration. They are not sent to any other individual or company, will not be used to create or send mailing lists of any kind, or for any other purposes. Ever.
 
 ## Overlays
-To display vote and goal progress on-screen, in your stream, you need to create two browser sources in your streaming software.
+To display vote and goal progress on-screen, in your stream, create two browser sources in your streaming software.
 
-Votes: ```http://localhost:8081/votes```
+Votes: ```http://<your.ocb.address>/votes```
 * Recommended width: 420
 * Recommended height: 150
 * In OBS, check "Refresh browser source when scene becomes active"
 
-Goals ```http://localhost:8081/goals```
+Goals ```http://<your.ocb.address>/goals```
 * Recommended width: 610
 * Recommended height: 210
 * In OBS, check "Refresh browser source when scene becomes active"
 
-To-do list ```http://localhost:8081/todo```
-* Recommended width: 225
-* Recommended height: 350
-* Custom CSS can be added in the management panel
+## To-do list
+You can set up a to-do list to display over your stream.
+Add, cross off or remove tasks using the "To-Do list" menu in the management panel.
+To display the list on-screen, create a browser source in your streaming software using the following information.
+
+To-do list ```http://<your.ocb.address>/todo```
+* Recommended width: 420
+* Recommended height: 500
+* In OBS, check "Refresh browser source when scene becomes active"
+  * Use the "Custom CSS" field to spruce up your list with fonts, colors, or anything else you'd like.
+
+#### Example CSS:
+```
+h4 {
+    font-size: 32px;
+    text-decoration: underline;
+    text-align: center;
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+
+ul {
+    margin-top: 0;
+    padding-top: 0;
+}
+
+li {
+    font-size: 30px;
+}
+```
+
+## Alerts
+You can upload custom images and videos to display on your stream when a viewer follows you, or when a goal or milestone is reached.
+To display the list on-screen, create a browser source in your streaming software using the following information.
+
+Follower alert ```http://<your.ocb.address>/alert/follower```
+Milestone alert ```http://<your.ocb.address>/alert/milestone```
+Goal alert ```http://<your.ocb.address>/alert/goal```
+* Recommended width: 200
+* Recommended height: 200
+* In OBS, check "Refresh browser source when scene becomes active"
+  * Use the "Custom CSS" field to set the font and position of viewer names displayed over your alert images.
+
+#### Example CSS:
+```
+#nameBox {
+    top: 50%; /* Vertical position */
+    left: 50%; /* Horizontal position */
+    font-size: 20px; /* Adjust as needed */
+    font-weight: bold; /* Adjust as needed */
+}
+```
 
 ## Support
 For support (a bug, feature request/tweak, question or comment), you can contact DeadTOm via the following methods:

TODO.md

@@ -1,6 +1,5 @@
-* Put followHook info in readme
-* Put full link to each alert source somewhere in the mgmt panel
-* Figure out how to use CSS to center text over alert images
+* See if we can incorporate new follower hook into the standard chatHook
+* Remove Custom CSS from to-do list page, since it can be set in OBS
 * I'm pretty sure this is resolved, so get this out of the logs "[2026-01-21 09:32:15 -0700] [1644] [INFO] <Response [200]>"
 * Make fulfilled rewards disappear at the beginning of stream
 * Add celebration route for OBS overlay, for things like new followers and goals/milestones

ownchatbot/templates/follower.html

@@ -22,7 +22,7 @@ the alert is displayed for ten seconds. -->
         <img id="alertImg" src="{{ url_for('web_panels.alerts', alert_name=alert_name) }}">
     {% endif %}
 
-    <div id="textBox"></div>
+    <div id="nameBox"></div>
 
     <script>
         setInterval(function() {
@@ -32,14 +32,14 @@ the alert is displayed for ten seconds. -->
                     if (data) {
                         const alertVid = document.getElementById('alertVid');
                         const alertImg = document.getElementById('alertImg');
-                        const textBox = document.getElementById('textBox');
+                        const nameBox = document.getElementById('nameBox');
 
                         const followerName = data.name;
 
-                        textBox.innerHTML = `
+                        nameBox.innerHTML = `
                             ${followerName}
                         `;
-                        textBox.style.display = 'block';
+                        nameBox.style.display = 'block';
 
                         alertVid.style.display = 'block';
                         alertImg.style.display = 'block';
@@ -47,7 +47,7 @@ the alert is displayed for ten seconds. -->
                         setTimeout(() => {
                             alertVid.style.display = 'none';
                             alertImg.style.display = 'none';
-                            textBox.style.display = 'none';
+                            nameBox.style.display = 'none';
                         }, 10000); // Visible for 10 seconds
                     }
                 });

ownchatbot/templates/list.html

@@ -6,7 +6,11 @@
     <meta http-equiv="refresh" content="10">
     <title>Today's to-do List</title>
     <style>
-        {{ css | safe }}
+        body {
+            background-color: transparent;
+            color: #ffd39a;
+            width: 400px;
+        }
     </style>
     <script>
       function refreshPage() {

ownchatbot/templates/rgoal.html

@@ -22,7 +22,7 @@ the alert is displayed for ten seconds. -->
         <img id="alertImg" src="{{ url_for('web_panels.alerts', alert_name=alert_name) }}">
     {% endif %}
 
-    <div id="textBox"></div>
+    <div id="nameBox"></div>
 
     <script>
         setInterval(function() {
@@ -32,14 +32,14 @@ the alert is displayed for ten seconds. -->
                     if (data) {
                         const alertVid = document.getElementById('alertVid');
                         const alertImg = document.getElementById('alertImg');
-                        const textBox = document.getElementById('textBox');
+                        const nameBox = document.getElementById('nameBox');
 
                         const alertName = data.name;
 
-                        textBox.innerHTML = `
+                        nameBox.innerHTML = `
                             ${alertName}
                         `;
-                        textBox.style.display = 'block';
+                        nameBox.style.display = 'block';
 
                         alertVid.style.display = 'block';
                         alertImg.style.display = 'block';
@@ -47,7 +47,7 @@ the alert is displayed for ten seconds. -->
                         setTimeout(() => {
                             alertVid.style.display = 'none';
                             alertImg.style.display = 'none';
-                            textBox.style.display = 'none';
+                            nameBox.style.display = 'none';
                         }, 10000); // Visible for 10 seconds
                     }
                 });

ownchatbot/templates/rmilestone.html

@@ -22,7 +22,7 @@ the alert is displayed for ten seconds. -->
         <img id="alertImg" src="{{ url_for('web_panels.alerts', alert_name=alert_name) }}">
     {% endif %}
 
-    <div id="textBox"></div>
+    <div id="nameBox"></div>
 
     <script>
         setInterval(function() {
@@ -32,14 +32,14 @@ the alert is displayed for ten seconds. -->
                     if (data) {
                         const alertVid = document.getElementById('alertVid');
                         const alertImg = document.getElementById('alertImg');
-                        const textBox = document.getElementById('textBox');
+                        const nameBox = document.getElementById('nameBox');
 
                         const alertName = data.name;
 
-                        textBox.innerHTML = `
+                        nameBox.innerHTML = `
                             ${alertName}
                         `;
-                        textBox.style.display = 'block';
+                        nameBox.style.display = 'block';
 
                         alertVid.style.display = 'block';
                         alertImg.style.display = 'block';
@@ -47,7 +47,7 @@ the alert is displayed for ten seconds. -->
                         setTimeout(() => {
                             alertVid.style.display = 'none';
                             alertImg.style.display = 'none';
-                            textBox.style.display = 'none';
+                            nameBox.style.display = 'none';
                         }, 10000); // Visible for 10 seconds
                     }
                 });