diff --git a/content/guide/features/loyalty-system.md b/content/guide/features/loyalty-system.md index 0cc9a34..8cf0f90 100644 --- a/content/guide/features/loyalty-system.md +++ b/content/guide/features/loyalty-system.md @@ -4,7 +4,134 @@ menu: guides: parent: features weight: 100 -draft: true --- -TODO +The loyalty system in strimertül allows your viewer to accrue points by just sticking around and chatting to then spend them on rewards and community goal. It's pretty much a third party implementation to Twitch Channel point system, but does not require you to sign into affiliate. + +Compared to Twitch channel points: + +- ⭕ Does not require Twitch Affiliate or Partner +- ⭕ You can check and edit the balance of every viewer at any time +- ❌ There is no UI for viewers to easily check all rewards and claim them outside of chat +- ❌ Points are accrued not based on watch time but chat activity (for technical reasons) + +Some other current limitations that might be fixed in the future include: + +- Points are linked to usernames and not user IDs, which means viewers will lose their points when changing their name +- There is only a per-prize cooldown option, eg. no way to limit number of redemptions per stream +- There is no daily cap on contributing to goals +- Points contributed to goals cannot be refunded + +If these limits feel acceptable to you, here's how to set the loyalty system up and running in your streams. + +To access the loyalty system configuration, locate its section in the side menu. + +{{< figure src="../media/loyalty/menu.png" class="guide-pic" alt="The loyalty system configuration pages in the side bar" >}} + +## Configuration + +The configuration page lets you turn on or off the entire loyalty system, along some settings on how points are awarded to users. + +The most important settings are "How often to give wishes" and "Bonus points". The first sets how often and how many points to give to any user currently logged into chat, while the latter is an extra amount of points added to the former (using the same interval) that is awarded specifically to users who have written at least one chat message during said interval. + +It is heavily recommended to keep the interval in the minutes range. This alleviates load on strimertül (since every interval there's some awarding logic and Twitch API calls to execute) and makes sure the bonus points are awarded properly. A good setting would be "10 points every 10 minutes, with 10 bonus points". + +Viewers are never notified of gaining points, or if they received extra points. It is up to you to make this logic public or not. + +## Rewards and goals + +### Rewards tab + +The rewards page lets you set up rewards that viewers can redeem and goals for them to contribute towards. + +These rewards are currently only visible to you, so you have to take care to inform your viewers that they exist and what they are. + +{{< figure src="../media/loyalty/reward-overview.png" class="guide-pic" alt="The loyalty system rewards page" >}} + +You can create rewards by clicking the "Create reward" button, or toggle/edit/delete them with the buttons in the top right of each reward entry. + +{{< figure src="../media/loyalty/redeem-create.png" class="guide-pic" alt="The dialog to create and edit rewards" >}} + +Rewards have a multitude of properties but for most people only the ID (used by viewers to redeem them) and name (used by the bot to describe it) are really important, everything else (description/icon) are not exposed to users. + +The cooldown property is a per-reward cooldown and not per-user, so claiming a reward will lock it out for that amount of time from anyone. + +Rewards can be refunded (see the following section in Points and redeems). + +### Goals tab + +The goals page works almost exactly to the rewards one, with a few exceptions since goals work a bit differently. + +{{< figure src="../media/loyalty/goal-overview.png" class="guide-pic" alt="The loyalty system goals page" >}} + +Goals work by setting a target amount of points to reach. Any viewer can contribute any amount of points to goals at any time (provided they have enough). + +{{< figure src="../media/loyalty/goal-dialog.png" class="guide-pic" alt="The dialog to create and edit goals" >}} + +Like in rewards, only the goal ID and name are user facing by default, so fields like icon and description can be omitted. + +The target point goal can be modified while a goal is active (even after it's been reached) but this should only be done very carefully. + +Unlike rewards, there is no way to refund contributed points to a goal.; + +## Points and redeems + +### Redeem queue + +In the redeem queue page you can check out all pending redeems from viewers. + +{{< figure src="../media/loyalty/redeem-queue.png" class="guide-pic" alt="The redeem queue page" >}} + +Redeems can be accepted or refunded. If accepted the redeem simply disappears from the list while a refund will remove the redeem while also giving back the points to the viewer that claimed the reward. + +### Manage points + +The point management page gives you a full list of everyone who has been assigned loyalty points at any point. You can sort it by name or balance and have full control over anyone's balance! + +{{< figure src="../media/loyalty/point-list.png" class="guide-pic" alt="The point management page" >}} + +To edit someone's balance, find the entry in the table (you can use the search field to narrow down results) then click the "Edit" in the far right to open up the dialog to modify their balance, set the new balance then click "Save". + +{{< figure src="../media/loyalty/edit-balance.png" class="guide-pic" alt="Dialog to modify someone's point balance" >}} + +If the viewer you're looking for is not in the list, click the "Give points" button instead, then put in their username and wanted balance. If you use this method on a viewer with an existing balance, those points will be added to their existing balance. + +{{< figure src="../media/loyalty/give-points.png" class="guide-pic" alt="Dialog to give someone points" >}} + +## Chat commands + +When activated, the loyalty system adds a few commands to the chatbot: + +#### !redeem + +The `!redeem` command lets viewers redeem a reward. The syntax is `!redeem REWARD-ID`. + +{{< figure src="../media/loyalty/chat-redeem.png" class="guide-pic" alt="Using the !redeem command" >}} + +If the reward requires viewer info, it becomes `!redeem REWARD-ID extra info here`. + +#### !balance + +The `!balance` command lets viewers check their current balance. + +{{< figure src="../media/loyalty/balance.png" class="guide-pic" alt="Using the !balance command" >}} + +#### !goals + +The `!goals` command lets viewers check what goals are currently active. + +{{< figure src="../media/loyalty/goals-list.png" class="guide-pic" alt="Using the !goals command" >}} + +#### !contribute + +The `!contribute` command lets viewers contribute points to a community goal. This command has one main syntax and several shortcuts. + +The main syntax is `!contribute POINTS GOAL-ID`. + +{{< figure src="../media/loyalty/contribute-chat.png" class="guide-pic" alt="Using the !contribute command with the full syntax" >}} + +There are several shortcuts for this. You can use `!contribute POINTS` to contribute to the first available goal (since most of the time you're going to have only one goal anyway) or `!contribute GOALID` to contribute 100 points to the specified goal id. + +You can combine both by just using `!contribute` to contribute 100 points to the first available goal. + +{{< figure src="../media/loyalty/contribute-shortcut.png" class="guide-pic" alt="Using the !contribute shortcuts" >}} diff --git a/content/guide/features/media/chatbot/alert-overview.png b/content/guide/features/media/chatbot/alert-overview.png index 42ba62e..155cb30 100644 Binary files a/content/guide/features/media/chatbot/alert-overview.png and b/content/guide/features/media/chatbot/alert-overview.png differ diff --git a/content/guide/features/media/chatbot/menu.png b/content/guide/features/media/chatbot/menu.png index 7c82816..3d26e50 100644 Binary files a/content/guide/features/media/chatbot/menu.png and b/content/guide/features/media/chatbot/menu.png differ diff --git a/content/guide/features/media/chatbot/messagebox.png b/content/guide/features/media/chatbot/messagebox.png index 7194fa1..299e621 100644 Binary files a/content/guide/features/media/chatbot/messagebox.png and b/content/guide/features/media/chatbot/messagebox.png differ diff --git a/content/guide/features/media/chatbot/page-overview.png b/content/guide/features/media/chatbot/page-overview.png index 8f3cec5..81531f0 100644 Binary files a/content/guide/features/media/chatbot/page-overview.png and b/content/guide/features/media/chatbot/page-overview.png differ diff --git a/content/guide/features/media/chatbot/timer-overview.png b/content/guide/features/media/chatbot/timer-overview.png index d04f3a8..9b88742 100644 Binary files a/content/guide/features/media/chatbot/timer-overview.png and b/content/guide/features/media/chatbot/timer-overview.png differ diff --git a/content/guide/features/media/chatbot/timerbox.png b/content/guide/features/media/chatbot/timerbox.png index ed9fd99..c18d74b 100644 Binary files a/content/guide/features/media/chatbot/timerbox.png and b/content/guide/features/media/chatbot/timerbox.png differ diff --git a/content/guide/features/media/loyalty/balance.png b/content/guide/features/media/loyalty/balance.png new file mode 100644 index 0000000..4bd0e71 Binary files /dev/null and b/content/guide/features/media/loyalty/balance.png differ diff --git a/content/guide/features/media/loyalty/chat-redeem.png b/content/guide/features/media/loyalty/chat-redeem.png new file mode 100644 index 0000000..2ae33a3 Binary files /dev/null and b/content/guide/features/media/loyalty/chat-redeem.png differ diff --git a/content/guide/features/media/loyalty/contribute-chat.png b/content/guide/features/media/loyalty/contribute-chat.png new file mode 100644 index 0000000..87f80de Binary files /dev/null and b/content/guide/features/media/loyalty/contribute-chat.png differ diff --git a/content/guide/features/media/loyalty/contribute-shortcut.png b/content/guide/features/media/loyalty/contribute-shortcut.png new file mode 100644 index 0000000..c84f146 Binary files /dev/null and b/content/guide/features/media/loyalty/contribute-shortcut.png differ diff --git a/content/guide/features/media/loyalty/edit-balance.png b/content/guide/features/media/loyalty/edit-balance.png new file mode 100644 index 0000000..7524084 Binary files /dev/null and b/content/guide/features/media/loyalty/edit-balance.png differ diff --git a/content/guide/features/media/loyalty/give-points.png b/content/guide/features/media/loyalty/give-points.png new file mode 100644 index 0000000..f4b5672 Binary files /dev/null and b/content/guide/features/media/loyalty/give-points.png differ diff --git a/content/guide/features/media/loyalty/goal-dialog.png b/content/guide/features/media/loyalty/goal-dialog.png new file mode 100644 index 0000000..1f76b91 Binary files /dev/null and b/content/guide/features/media/loyalty/goal-dialog.png differ diff --git a/content/guide/features/media/loyalty/goal-overview.png b/content/guide/features/media/loyalty/goal-overview.png new file mode 100644 index 0000000..9b44cf3 Binary files /dev/null and b/content/guide/features/media/loyalty/goal-overview.png differ diff --git a/content/guide/features/media/loyalty/goal-reached-chat.png b/content/guide/features/media/loyalty/goal-reached-chat.png new file mode 100644 index 0000000..2928051 Binary files /dev/null and b/content/guide/features/media/loyalty/goal-reached-chat.png differ diff --git a/content/guide/features/media/loyalty/goals-list.png b/content/guide/features/media/loyalty/goals-list.png new file mode 100644 index 0000000..a140497 Binary files /dev/null and b/content/guide/features/media/loyalty/goals-list.png differ diff --git a/content/guide/features/media/loyalty/menu.png b/content/guide/features/media/loyalty/menu.png new file mode 100644 index 0000000..905b469 Binary files /dev/null and b/content/guide/features/media/loyalty/menu.png differ diff --git a/content/guide/features/media/loyalty/point-list.png b/content/guide/features/media/loyalty/point-list.png new file mode 100644 index 0000000..23deadf Binary files /dev/null and b/content/guide/features/media/loyalty/point-list.png differ diff --git a/content/guide/features/media/loyalty/redeem-create.png b/content/guide/features/media/loyalty/redeem-create.png new file mode 100644 index 0000000..facf08c Binary files /dev/null and b/content/guide/features/media/loyalty/redeem-create.png differ diff --git a/content/guide/features/media/loyalty/redeem-queue.png b/content/guide/features/media/loyalty/redeem-queue.png new file mode 100644 index 0000000..d22a9a5 Binary files /dev/null and b/content/guide/features/media/loyalty/redeem-queue.png differ diff --git a/content/guide/features/media/loyalty/reward-overview.png b/content/guide/features/media/loyalty/reward-overview.png new file mode 100644 index 0000000..2cb6ab9 Binary files /dev/null and b/content/guide/features/media/loyalty/reward-overview.png differ diff --git a/content/guide/getting-started/media/first-time-setup/event-auth.png b/content/guide/getting-started/media/first-time-setup/event-auth.png index 93babe6..5ccc53f 100644 Binary files a/content/guide/getting-started/media/first-time-setup/event-auth.png and b/content/guide/getting-started/media/first-time-setup/event-auth.png differ diff --git a/content/guide/getting-started/media/first-time-setup/event-complete.png b/content/guide/getting-started/media/first-time-setup/event-complete.png index 084efcc..bcb0b30 100644 Binary files a/content/guide/getting-started/media/first-time-setup/event-complete.png and b/content/guide/getting-started/media/first-time-setup/event-complete.png differ diff --git a/content/guide/getting-started/media/first-time-setup/event-status.png b/content/guide/getting-started/media/first-time-setup/event-status.png index bc0a90a..8c0965f 100644 Binary files a/content/guide/getting-started/media/first-time-setup/event-status.png and b/content/guide/getting-started/media/first-time-setup/event-status.png differ diff --git a/content/guide/getting-started/media/first-time-setup/event-ui.png b/content/guide/getting-started/media/first-time-setup/event-ui.png index 90acbc7..20e1e1a 100644 Binary files a/content/guide/getting-started/media/first-time-setup/event-ui.png and b/content/guide/getting-started/media/first-time-setup/event-ui.png differ diff --git a/content/guide/getting-started/media/first-time-setup/first-page.png b/content/guide/getting-started/media/first-time-setup/first-page.png index f93d33c..76b01f1 100644 Binary files a/content/guide/getting-started/media/first-time-setup/first-page.png and b/content/guide/getting-started/media/first-time-setup/first-page.png differ diff --git a/content/guide/getting-started/media/first-time-setup/onboarding-end.png b/content/guide/getting-started/media/first-time-setup/onboarding-end.png index 00404a8..9ecc970 100644 Binary files a/content/guide/getting-started/media/first-time-setup/onboarding-end.png and b/content/guide/getting-started/media/first-time-setup/onboarding-end.png differ diff --git a/content/guide/getting-started/media/first-time-setup/twitch-1.png b/content/guide/getting-started/media/first-time-setup/twitch-1.png index 0390749..730bca9 100644 Binary files a/content/guide/getting-started/media/first-time-setup/twitch-1.png and b/content/guide/getting-started/media/first-time-setup/twitch-1.png differ diff --git a/content/guide/getting-started/media/first-time-setup/twitch-2.png b/content/guide/getting-started/media/first-time-setup/twitch-2.png index 9be1aae..8e5fb1d 100644 Binary files a/content/guide/getting-started/media/first-time-setup/twitch-2.png and b/content/guide/getting-started/media/first-time-setup/twitch-2.png differ diff --git a/content/guide/getting-started/media/first-time-setup/twitch-copy.png b/content/guide/getting-started/media/first-time-setup/twitch-copy.png index 63ca3c9..b049858 100644 Binary files a/content/guide/getting-started/media/first-time-setup/twitch-copy.png and b/content/guide/getting-started/media/first-time-setup/twitch-copy.png differ diff --git a/content/guide/getting-started/media/first-time-setup/twitch-create.png b/content/guide/getting-started/media/first-time-setup/twitch-create.png index e4a914c..278cb1f 100644 Binary files a/content/guide/getting-started/media/first-time-setup/twitch-create.png and b/content/guide/getting-started/media/first-time-setup/twitch-create.png differ diff --git a/content/guide/getting-started/media/first-time-setup/twitch-error.png b/content/guide/getting-started/media/first-time-setup/twitch-error.png index 6ef4ab1..b2da55d 100644 Binary files a/content/guide/getting-started/media/first-time-setup/twitch-error.png and b/content/guide/getting-started/media/first-time-setup/twitch-error.png differ diff --git a/content/guide/getting-started/media/first-time-setup/twitch-list.png b/content/guide/getting-started/media/first-time-setup/twitch-list.png index 3487e3e..5186e1a 100644 Binary files a/content/guide/getting-started/media/first-time-setup/twitch-list.png and b/content/guide/getting-started/media/first-time-setup/twitch-list.png differ diff --git a/content/guide/getting-started/media/first-time-setup/twitch-new-sec.png b/content/guide/getting-started/media/first-time-setup/twitch-new-sec.png index c4439b8..6e59dde 100644 Binary files a/content/guide/getting-started/media/first-time-setup/twitch-new-sec.png and b/content/guide/getting-started/media/first-time-setup/twitch-new-sec.png differ diff --git a/static/script/toc.js b/static/script/toc.js index ab73e55..7ac8e7a 100644 --- a/static/script/toc.js +++ b/static/script/toc.js @@ -1,10 +1,12 @@ const toc = document.getElementById("TableOfContents"); -const getId = (el) => { +const getHeaderId = (el) => { do { - const id = el.getAttribute("id"); - if (id) { - return id; + if (el.nodeName === "H1" || el.nodeName === "H2" || el.nodeName === "H3") { + const id = el.getAttribute("id"); + if (id) { + return id; + } } el = el.previousElementSibling; } while (el); @@ -15,14 +17,15 @@ if (toc) { } else { const observer = new IntersectionObserver((entries) => { const filtered = entries.filter( - (i) => getId(i.target) && i.intersectionRatio > 0 + (i) => getHeaderId(i.target) && i.intersectionRatio > 0 ); if (filtered.length > 0) { toc .querySelectorAll(`li.active`) .forEach((entry) => entry.classList.remove("active")); + filtered.forEach((entry) => { - const id = getId(entry.target); + const id = getHeaderId(entry.target); toc .querySelector(`li a[href="#${id}"]`) .parentElement.classList.add("active");