How to install the JustWatch Sports Competition Widget?
- Add the widget HTML to your page:
<div data-jw-widget
data-api-key="insert your unique API key. Leave the quotes"
data-url-path="/uk/football/world-cup">
</div>
- Add the Javascript (
<script>
) to your page:
<script async src="https://sports-widget.justwatch.com/justwatch_widget.js"></script>
Ideally, you either place the Javascript-script to the <head>
area of your webpage so it applies to all pages directly. Otherwise you have to add the script to every page individually in the <body>
area.
- Replace the value for
data-api-key
with the personal token you received - Configure the widget to choose the competition you want to display data for
- Add the branding below the widget HTML
How to configure the JustWatch Sport Competition Widget?
JustWatch URL path
- You need the JustWatch URL path so the widget knows which league or tournament to display.
- Please only insert the URL path and not the full URL.
- Examples:
- Bundesliga: /uk/football/bundesliga
- World Cup: /us/soccer/World-Cup
- Formula 1: /es/motor/Formula-1
- NBA: /fr/basket/nba
- In the code it is supposed to look like this:
data-url-path="/us/soccer/World-Cup”
The country code in the first slug doesn’t impact the widget for your users. The widget will always display the streaming information as well as times & dates based on the user’s location. Concretely, that means if you configure the widget with a /de/… URL path, a user from the US would still see streaming options for the US.
Branding and Linking to JustWatch
Each partner is required to integrate branded links to the JustWatch website. Please find below an integration guide on how to link to JustWatch:
- Branded link should be displayed on the page for every title (e.g. next to the widget)
- The link should lead to the country-specific sport page on https://www.justwatch.com (e.g. if the majority of your traffic is from the US and you’re showing the NFL widget, please link to: https://www.justwatch.com/us/football)
- The anchor text should be “JustWatch” with JustWatch wrapped in a span tag
- We prefer the JustWatch logo to be in gold, but black or white is fine as well (depending on the background)
- This CodePen has an example of how the title page link should look: