Pogly interactive widget template

This is a barebone template to create interactive widgets for Pogly utilizing TMI.js and React. You can find all logic in App.tsx.

Noteable things

The project url is by default ../example/?channel=. You need to edit vite.config.ts to change the example.

Examples of usage

• Twitch collection log popup overlay
• Twitch word guessing overlay
• Twitch chat plays ocarina overlay
• Twitch chat plays snake overlay
• Twitch chat plays tetris overlay
• Twitch chat poll overlay
• Twitch chat soundboard overlay

Widget code template

{"widgetName":"Widget example","widgetWidth":650,"widgetHeight":800,"headerTag":"","bodyTag":"<iframe src=\"{widget_url}\" allowtransparency=\"true\"></iframe>","styleTag":"* {\n            margin: 0;\n            padding: 0;\n            border: 0;\n            overflow: hidden!important;\n        }\n        html, body {\n            width: 100%;\n            height: 100%;\n            overflow: hidden!important;\n            background-color: rgba(0,0,0,0);\n        }\n        iframe {\n            width: 100%;\n            height: 100%;\n            border: none;\n            overflow: hidden!important;\n            display: block;\n            background-color: rgba(0,0,0,0);\n        }","scriptTag":"","variables":[{"variableName":"channel","variableType":1,"variableValue":"bobross"},{"variableName":"widget_url","variableType":1,"variableValue":"http://localhost:5173/example/?channel={channel}"}]}