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.
New to widgets? Start with the complete getting started guide.
Browse all widget documentation, APIs, and references.
Having issues? Check the troubleshooting guide.
| 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 |