---
title: "Widget Integration Examples & Tutorials"
canonical_url: "https://apidocs.sportradar.com/resources/widgets/docs/tutorials/examples"
markdown_url: "https://apidocs.sportradar.com/resources/widgets/docs/tutorials/examples.md"
last_updated: "2026-03-26T11:26:38Z"
---

# Widget Integration Examples & Tutorials

Hands-on tutorials covering common integration patterns, advanced techniques, and real-world scenarios.

***

## Essential Integration Patterns

### Loading Indicators

Add custom loading states while widgets initialize. Learn the `onTrack` callback and improve perceived performance.

[Widget Loading](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/examples/example-widget-loading.md)

### Visibility Control

Manage widget visibility in carousels and sliders. Two approaches: preserve space or collapse layout.

[Carousel Scrollers](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/examples/example-widget-carousels-scrollers-sliders.md)

### Conditional Display

Show widgets only when they load successfully. Perfect for tab interfaces and dynamic UIs.

[onTrack Error](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/examples/example-widget-ontrack-error.md)

***

## Widget Communication & Advanced Patterns

### Widget Rotation

Automatically rotate through multiple matches. Includes pause/resume and manual navigation.

[Widget Rotator](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/examples/example-widget-rotator.md)

### ShadowDOM Integration

Advanced: Integrate widgets inside Shadow DOM with proper styling and event handling.

[Shadowdom Mutationobserver](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/examples/example-shadowdom-mutationobserver.md)

***

## Customization & Regional Settings

### US Sports Configuration

Configure widgets for US markets: 12-hour clock, team positioning, score separators.

[US Integration](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/examples/example-us-integration.md)

### Tab Customization

Customize tab appearance, icons, alignment, and behavior to match your design.

[Customizing Tabs](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/examples/customizing-tabs.md)

***

## Quick Reference

| Tutorial                                                                                                                                     | Difficulty                                    | Key Topics |
| -------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | ---------- |
| [Loading Indicators](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/examples/example-widget-loading.md)                     | `onTrack`, loading states, data\_change event |            |
| [Visibility Control](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/examples/example-widget-carousels-scrollers-sliders.md) | `display`, `visibility`, resize events        |            |
| [Conditional Display](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/examples/example-widget-ontrack-error.md)              | Error handling, DOM manipulation              |            |
| [Widget Rotation](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/examples/example-widget-rotator.md)                        | `addWidget`, `removeWidget`, intervals        |            |
| [US Integration](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/examples/example-us-integration.md)                         | Regional settings, configuration              |            |
| [Tab Customization](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/examples/customizing-tabs.md)                            | CSS customization, tab configuration          |            |
| [ShadowDOM Integration](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/examples/example-shadowdom-mutationobserver.md)      | Shadow DOM, MutationObserver                  |            |

***

## Need More Help?

### Getting Started

New to widgets? Start with the complete getting started guide.

[Getting Started](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/getting-started.md)

### Main Documentation

Browse all widget documentation, APIs, and references.

[Integration Tutorials](https://apidocs.sportradar.com/resources/widgets/docs/tutorials.md)

### Troubleshooting

Having issues? Check the troubleshooting guide.

[Troubleshooting](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/troubleshooting.md)