Learn how to correctly add the widget to your page and what configuration parameters you have to set
How to add the widget to your page
The OUTTRA brand widget for product detail pages is a JavaScript HTML tag which loads a button. It has to be added to the html of the product detail page at the place where you want the button to appear. You will have to ensure that the script-tag is executed by the browser either by adding the tag to the HTML you return from the server or by adding it after load through the Document.createElement() method (see https://developer.mozilla.org/de/docs/Web/API/Document/createElement) or equivalent.
Staging environment
We recommend that you test the implementation in a staging environment before adding the widget to your production environment.
If your staging environment uses a different domain than your production environment please let us know at support-en@outtra.com. This way we can add your staging domain to our allow list.
Configuration of the widget
The script tag has some configuration parameters in the form of data-attributes. How you use them depends on the way you want to tell the script what product data to load.
There are two ways to give this info to the script: either by submitting an EAN or GTIN or by submitting the grouping product identifier and a size and manufacturer color.
Common for both implementations are the following mandatory configuration variables:
- $BRAND and $BRAND_ID will be given to you by OUTTRA. For example this could be "sports-brand" and "12345".
- $LANG is the ISO 3166-1 alpha-2 country code of the language you want to load for the widget (for example "de" for German or "en" for English).
Recommended Implementation: If you choose to submit an EAN or GTIN:
<script src="https://brandwidgets.outtra.com/js/$BRAND/button-widget.js" data-outtrabrand_id="$BRAND_ID" data-gtins="$GTIN" data-lang="$LANG" async></script>
- $GTIN is a numeric value of 13 or 14 characters, usually starting with a zero. This value identifies any variant of any product world wide and has to be part of the product data file which was submitted to OUTTRA by your brand.
If you choose to submit a product identifier:
<script src="https://brandwidgets.outtra.com/js/$BRAND/button-widget.js" data-outtrabrand_id="$BRAND_ID" data-product_identifier="$PRODUCT_IDENTIFIER" data-manufacturer_color="$MANUFACTURER_COLOR" data-size="$SIZE" data-lang="$LANG" async></script>
- $PRODUCT_IDENTIFIER is the grouping identifier for a product. Not to be mixed up with an article number that identifies a variant within a product. We group products based on the product data file submitted to us by your brand. If you are unsure how this $PRODUCT_IDENTIFIER might look like for your products feel free to reach out to support-en@outtra.com.
- $MANUFACTURER_COLOR is the color value of the product you want the widget to load, for example "space grey"
- $SIZE is the size value of the product you want the widget to load, for example "S" or "xl"
- Important: If you choose to implement the widget via a product identifier it is highly recommended to thoroughly test in a staging environment as for example even slight typographical changes to the $MANUFACTURER_COLOR can result in wrong results
Keeping the widget in sync with user interactions
You should always keep the data-attributes in sync with the size and color selection a user makes on your website. For example if a user selects the size "S" and you are using the EAN / GTIN implementation of the OUTTRA widget, you should update the data-gtins attribute value of the script-tag accordingly. If you are not using the EAN / GTIN implementation, you should update the data-size attribute value.
If you have any questions regarding the technical implementation of the widget, feel free to reach out to support-en@outtra.com