Customization

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:

dark themed widget

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>