Widgets Overview
While basic container shape and label layers are static, **Widgets** are specialized web components that connect directly with live stream telemetry and event loops. Adding a widget instantly binds dynamic functionalities—like a live chat box, subscriber counters, or Text-to-Speech players—directly into your canvas composition.
Core Built-in Widgets
Scraplet features five first-class pre-engineered stream widgets that can be configured right inside the properties inspector:
Renders incoming Kick, Twitch, or YouTube messages directly on your overlay canvas.
- Custom Badges: Show or hide subscriber, moderator, and VIP icons.
- Theme Matching: Toggle glassmorphic bubbles, solid backdrops, or minimal text lists.
- Automated Fading: Automatically transition messages to transparent after a configurable timeout (e.g. `15` seconds) to keep your canvas uncluttered.
Handles the execution and sorting of incoming follower/sub/donation events.
- Queue Sorting: Prevents overlapping events by queueing and playing them sequentially.
- Media Sync: Instantly pair custom webm videos or gifs with uploaded audio tracks.
Display progress bars representing target follower counts, active subscriber milestones, or donation tips.
- Auto Increment: Real-time incrementing ticks without manual dashboard adjustments.
- Flexible Layouts: Choose between classic horizontal filling bars, vertical pills, or simple percentage gauges.
Integrates directly with the Scraplet high-fidelity text-to-speech vocal API.
- Spam Guard Filter: Automatically skips excessively long strings or repetitive emoji characters.
- Voice Varieties: Supports numerous localized natural voices and robotic filters.
2. Adding Widgets to the Canvas
To inject any dynamic widget into your overlay layout:
- Click the Widgets menu option on the primary editor tool header.
- Select the widget type you want (e.g., Chat Box Overlay).
- The widget will spawn at the center of your canvas. You can drag to position it or drag its boundary nodes to resize.
- Once placed, a custom **Widget Settings** panel appears in your right-hand inspector, allowing you to configure parameters unique to that widget instance.