Customization
Country specific offers
Your account api-key comes with a limited list of allowed countries. The widget detects the country where your visitors are coming from and shows offers relevant to that country. In case a visitor is located in a country that is not enabled for your api-key the widget will show offers from a default country. The default country is chosen when the api-key is generated and it is changeable at any point. If you want to set a different country as default, please contact us at partner-support@justwatch.com.
Language settings
The widget automatically detects the language set in the browser of the user and translates the Monetization Type (buy, rent, etc.). If you prefer the widget to always show one language independently from the user who visits your page, you can add the data-language
attribute to the widget code.
Example:
<div data-jw-widget
data-api-key="insert your unique API key. Leave the quotes"
data-object-type="movie"
data-id="tt0125439"
data-id-type="imdb"
data-language="de"
></div>
Changing the labels below streaming service logos
By default, the widget displays the monetization type of the offers as a label below the icons.
These can be “Buy”, “Rent”, “Subs”, “Ads” or “Free” or the equivalents in other languages.
If you want to display prices or no labels at all instead, use the data-offer-label
attribute.
Possible values are price
and none
Example:
<div data-jw-widget
data-api-key="insert your unique API key. Leave the quotes"
data-object-type="movie"
data-id="tt0125439"
data-id-type="imdb"
data-offer-label="price"
></div>
Changing the message in case of no offers or title not found
In case we have no offers for the requested title or we could not find the title you requested a message will be displayed to the visitor.
If for any reason you would like to show a different message you can use the data-no-offers-message
and data-title-not-found-message
attributes.
data-no-offers-message
optionally accepts a {{title}}
placeholder that will be replaced by the title of the movie/show, for which we couldn’t find an offer.
Example:
<div data-jw-widget
data-api-key="insert your unique API key. Leave the quotes"
data-object-type="movie"
data-id="tt0125439"
data-id-type="imdb"
data-no-offers-message="Oopsy daisy, no offers for {{title}} at this time!"
data-title-not-found-message="Oopsy daisy, no offers at this time!"
></div>
Changing the maximum number of streaming services
The maximum number of streaming services displayed by the widget can be reduced by using the attribute data-max-offers
. The value of the attribute defines how many services will be visible.
Example:
<div data-jw-widget
data-api-key="insert your unique API key. Leave the quotes"
data-object-type="movie"
data-id="tt0125439"
data-id-type="imdb"
data-max-offers="3"
></div>
Theme
The widget comes with two theme options “light” and “dark”. These options are meant to be used on websites with lighter or darker backgrounds respectively. Use them to improve the visibility of the provider icons on your website. The attribute name is data-theme
and the allowed values are “light” or “dark”.
Example:
<div data-jw-widget
data-api-key="insert your unique API key. Leave the quotes"
data-object-type="movie"
data-id="tt0125439"
data-id-type="imdb"
data-theme="dark"
></div>
How it will look:
Adjusting the widget size
The widget can be scaled down or up in size by choosing a factor between 0.6 and 2. The default size of the widget is 1, the factor will decrease/increase the widget proportionally. The attribute to scale the widget is data-scale
.
Example:
<div data-jw-widget
data-api-key="insert your unique API key. Leave the quotes"
data-object-type="movie"
data-id="tt0125439"
data-id-type="imdb"
data-scale="0.8"
></div>