Hands-on tutorials covering common integration patterns, advanced techniques, and real-world scenarios.
Add custom loading states while widgets initialize. Learn the onTrack callback and improve perceived performance.
Manage widget visibility in carousels and sliders. Two approaches: preserve space or collapse layout.
Show widgets only when they load successfully. Perfect for tab interfaces and dynamic UIs.
Automatically rotate through multiple matches. Includes pause/resume and manual navigation.
Advanced: Integrate widgets inside Shadow DOM with proper styling and event handling.
Configure widgets for US markets: 12-hour clock, team positioning, score separators.
Customize tab appearance, icons, alignment, and behavior to match your design.
| Tutorial | Difficulty | Key Topics |
|---|---|---|
| Loading Indicators | onTrack, loading states, data_change event | |
| Visibility Control | display, visibility, resize events | |
| Conditional Display | Error handling, DOM manipulation | |
| Widget Rotation | addWidget, removeWidget, intervals | |
| US Integration | Regional settings, configuration | |
| Tab Customization | CSS customization, tab configuration | |
| ShadowDOM Integration | Shadow DOM, MutationObserver |
New to widgets? Start with the complete getting started guide.
Browse all widget documentation, APIs, and references.
Having issues? Check the troubleshooting guide.