Skip to main content

Breville Decision Tool (widgets) Integration

Background

Breville | Sage Appliances have a number of guided product selection tools to help customer choose the right appliance for their needs. These tools have been made available for retail partners to easily integrate into their retail websites. This guide provides the technical details of how this can be achieved and what widgets and products are available / need to be mapped with to your (the retailers) prices and product landing pages. Demonstrations for each widget can be found at https://prod-widgets.breville.com

 

Solution

The breville-widget is a general Web Component that allows to host a Breville Widget inside an iFrame on your (3rd party/retailer) website. The code is necessary to control an iframe and create a communication bridge to pass critical information to the widget around pricing, styling and product pages. The widget also sends back information to resize the height of the iframe appropriately. Once the widget is placed on your site, the:

  1. breville-widget renders an iFrame with a link to a Breville / Sage Appliances Decision tool that is hosted on https://prod-widgets.breville.com
  2. breville-widget uses postMessage calls to configure the widget inside an iFrame and to pass widget configuration for locale/language, styling, product range, product page URL’s, and prices to the widget.
  3. A domain white-listing policy has been applied to minimise the risk of improper use of the decision tool and thus you (the retailer) must ask to be added to that whitelist
  4. The breville-widget has been designed with security in mind to reduce the attack surface and the possibility of a widget somehow breaking the retailers site. All the widget code run inside an iframe and the breville-widget is just the glue to ensure the iframe is correctly setup and resized on the retailer’s site and to ensure it does not block the rest of the page from loading.


 

Installation

There is a 3 step installation process

 

1. Contact Breville and ensure that your domain has been properly whitelisted so that the component is allowed to run on your site/domain. If you do not do this it will not work.

2. breville-widget JavaScript to the bottom of your page.

 

1<!--====== Breville Widget js ======-->
2<script src="//widgets.breville.com/etc/designs/bvl-widgets/bridge-widget/js/app.js"></script>

3. Add breville-widget-v1 snippet on the page and configure it. The breville-widget-v1 Web Component accepts the following parameters:

  • type- The type of widget. - a list of widget types in provided within this document
  • locale - The widget locale - a list of applicable locales is provided within this document
  • topoffset - At times the widget will need to scroll up to relieve the top of the widget. If you have a sticky header, your header may overlap the widget. In such case, provide the number of pixels the header takes up so the top of the widget is below the bottom of your sticky header.
  • JSON script element “<script type="application/json">“ that must have:
    • env - URL where widget is hosted (this should always be set to prod-widgets.breville.com
    • props with
    • an optional styles property to style the widget
    • a mpns property to send product mappings, prices, and availability information to the widget. This is a mandatory property to configure where each recommended product resides on your site, it’s price and availability. Each entry is defined by the Breville product parent SKU on the Breville website, but will eventually be the official manufacture product number (MPN). Please refer to specific widget examples for products and structure.

  • Migration from Legacy Widgets

    For a migration from legacy widgets env property should be changed to

    http://prod-widgets.breville.com (instead of http://widgets.breville.com ):


    1"env": "prod-widgets.breville.com ",

    Configuration examples

    Configuration example for Espresso is shown below. This structure is also applicable for Tea, Waves, Smart Ovens, Air & Water decision tools, but requires different type and mpns.


    1<breville-widget-v1 type="espresso-widget" locale="us/en">
    2<script type="application/json">
    3{
    4"env": "prod-widgets.breville.com",
    5"props": {
    6"mpns": {
    7"BES500": {
    8"url": "https://www.your_site.com/your_BES500_product_page/",
    9"price": "$9111.11"
    10},
    11"BES840": {
    12"url": "https://www.your_site.com/your_BES840_product_page/",
    13"default": 1,
    14"price": "$9222.22"
    15},
    16"BES870": {
    17"url": "https://www.your_site.com/your_BES870_product_page/",
    18"default": 2,
    19"price": "$9333.33"
    20},
    21"BES878": {
    22"url": "https://www.your_site.com/your_BES878_product_page/",
    23"price": "$9444.44"
    24},
    25"BES880": {
    26"url": "https://www.your_site.com/your_BES880_product_page/",
    27"price": "$9555.55"
    28},
    29"BES920": {
    30"url": "https://www.your_site.com/your_BES920_product_page/",
    31"price": "$9666.66"
    32},
    33"BES980": {
    34"url": "https://www.your_site.com/your_BES980_product_page/",
    35"price": "$9777.77"
    36},
    37"BES990": {
    38"url": "https://www.your_site.com/your_BES990_product_page/",
    39"price": "$9888.88"
    40}
    41}
    42}
    43}
    44</script>
    45</breville-widget-v1>

    Configuration example for the “Colour Me Healthy” (Blend, Juice or Bluice) shown below.


    Note: the inclusion of product categories, must be maintained. If no products are ranged by the retailer then the category (bluicing, blender etc) should be left empty to avoid warning in the console log.


    1<breville-widget-v1 type="cmh-widget" locale="us/en">
    2<script type="application/json">
    3{
    4"env": "prod-widgets.breville.com",
    5"props": {
    6"mpns": {
    7"bluicing": {
    8"BJB815": {
    9"url": "https://www.breville.com/us/en/products/bluicers/bjb815.html",
    10"price": "$1111.01"
    11}
    12},
    13"blenders": {
    14"BBL920": {
    15"url": "https://www.breville.com/us/en/products/blenders/bbl920.html",
    16"price": "$1111.02"
    17},
    18"BBL820": {
    19"url": "https://www.breville.com/us/en/products/blenders/bbl820.html",
    20"price": "$2222.02"
    21},
    22"BBL620": {
    23"url": "https://www.breville.com/us/en/products/blenders/bbl620.html",
    24"price": "$3333.02"
    25},
    26"BPB610": {
    27"url": "https://www.breville.com/us/en/products/blenders/bpb610.html",
    28"price": "$4444.02"
    29},
    30"BBL002": {
    31"url": "https://www.breville.com/us/en/products/blenders/bbl002.html",
    32"price": "$5555.02"
    33}
    34},
    35"fast_juicers": {
    36"BJE820": {
    37"url": "https://www.breville.com/us/en/products/juicers/bje820.html",
    38"price": "$1111.03"
    39},
    40"BJE830": {
    41"url": "https://www.breville.com/us/en/products/juicers/bje830.html",
    42"price": "$2222.03"
    43},
    44"800JE": {
    45"url": "https://www.breville.com/us/en/products/juicers/800je.html",
    46"price": "$3333.03"
    47},
    48"BJE530": {
    49"url": "https://www.breville.com/us/en/products/juicers/bje530.html",
    50"price": "$4444.03"
    51},
    52"BJE430": {
    53"url": "https://www.breville.com/us/en/products/juicers/bje430.html",
    54"price": "$5555.03"
    55},
    56"JE98XL": {
    57"url": "https://www.breville.com/us/en/products/juicers/je98xl.html",
    58"price": "$6666.03"
    59},
    60"BJE200": {
    61"url": "https://www.breville.com/us/en/products/juicers/bje200.html",
    62"price": "$77777.03"
    63}
    64},
    65"slow_juicers": {
    66"BJS700": {
    67"url": "https://www.breville.com/us/en/products/juicers/bjs700.html",
    68"price": "$1111.04"
    69}
    70},
    71"citrus_presses": {
    72"800CP": {
    73"url": "https://www.breville.com/us/en/products/juicers/800cp.html",
    74"price": "$1111.05"
    75},
    76"BCP600": {
    77"url": "https://www.breville.com/us/en/products/juicers/bcp600.html",
    78"price": "$2222.05"
    79}
    80}
    81}
    82}
    83}
    84</script>
    85</breville-widget-v1>

    Configuration example for the Your Perfect Brew tool shown below.


    1<breville-widget-v1 type="your-perfect-brew" locale="au/en">
    2<script type="application/json">
    3{
    4"env": "prod-widgets.breville.com",
    5"props": {
    7"link": {
    8"title": "View More",
    9"url": "https://breville.com/"
    10},
    11"}
    12</script>
    13</breville-widget-v1>

    How to override a product’s description


    Example of a product’s description (the burlywood background part)


    If a retailer wishes to provide their own description for a specific product, add description’s value to that product’s mpn, for example:

    1"mpns": {
    2"BES500": {
    3"url": "https://www.your_site.com/your_BES500_product_page/",
    4"price": "$9111.11",
    5"description": "<p>this is the new description <strong>yo check this out</strong><p>"
    6},
    7...

    You can use just simple text strings or rich text strings for description.



    Decision tool type and locale parameters

    The following widget types and locales are currently supported.

     Espresso
    type="espresso-widget"    		Tea
    type="tea-widget"    		Waves
    type="wave-widget"    		Smart Ovens
    type="smart-ovens"    		Air
    type="air-widget"    		Water
    type="water-widget"    		Blend, Juice, Bluice
    type="cmh-widget"    		Perfect Brew
    type="brewer-widget"
    United States - Englishlocale="us/en"locale="us/en"locale="us/en"locale="us/en"contact Breville / Sage Appliancescontact Breville / Sage Applianceslocale="us/en"locale="us/en"
    Canada - Englishlocale="ca/en"locale="ca/en"locale="ca/en"locale="ca/en"contact Breville / Sage Appliancescontact Breville / Sage Applianceslocale="ca/en"locale="ca/en"
    Canada - Frenchlocale="ca/fr"locale="ca/fr"locale="ca/fr"locale="ca/fr"contact Breville / Sage Appliancescontact Breville / Sage Applianceslocale="ca/fr"locale="ca/fr"
    Australia - Englishlocale="au/en"contact Breville / Sage Applianceslocale="au/en"locale="au/en"locale="au/en"locale="au/en"locale="au/en"locale="au/en"
    New Zealand - Englishlocale="nz/en"contact Breville / Sage Applianceslocale="nz/en"locale="nz/en"locale="nz/en"locale="nz/en"locale="nz/en"locale="nz/en"
    United Kingdom - Englishlocale="uk/en"locale="nz/en"locale="nz/en"locale="nz/en"contact Breville / Sage Appliancescontact Breville / Sage Applianceslocale="nz/en"locale="nz/en"
    Switzerland - Germanlocale="ch/de"contact Breville / Sage Appliancescontact Breville / Sage Appliancescontact Breville / Sage Appliancescontact Breville / Sage Appliancescontact Breville / Sage Applianceslocale="ch/de"locale="ch/de"
    Switzerland - Frenchlocale="ch/fr"contact Breville / Sage Appliancescontact Breville / Sage Appliancescontact Breville / Sage Appliancescontact Breville / Sage Appliancescontact Breville / Sage Applianceslocale="ch/fr"locale="ch/fr"
    Switzerland - Italianlocale="ch/it"contact Breville / Sage Appliancescontact Breville / Sage Appliancescontact Breville / Sage Appliancescontact Breville / Sage Appliancescontact Breville / Sage Applianceslocale="ch/it"locale="ch/it"
    Europe - Germanlocale="eu/de"locale=”eu/de”locale=”eu/de”locale=”eu/de”contact Breville / Sage Appliancescontact Breville / Sage Applianceslocale=”eu/de”locale=”eu/de”
    Europe - Frenchlocale="eu/fr"contact Breville / Sage Applianceslocale="eu/fr"locale="eu/fr"contact Breville / Sage Appliancescontact Breville / Sage Applianceslocale="eu/fr"locale="eu/fr"
    Europe - Spanishlocale="eu/es"contact Breville / Sage Applianceslocale="eu/es"contact Breville / Sage Appliancescontact Breville / Sage Appliancescontact Breville / Sage Applianceslocale="eu/es"locale="eu/es"
    Europe - Dutchlocale="eu/nl"contact Breville / Sage Applianceslocale="eu/nl"contact Breville / Sage Appliancescontact Breville / Sage Appliancescontact Breville / Sage Applianceslocale="eu/nl"locale="eu/nl"
    Europe - Englishlocale="eu/en"contact Breville / Sage Applianceslocale="eu/en"contact Breville / Sage Appliancescontact Breville / Sage Appliancescontact Breville / Sage Applianceslocale="eu/en"locale="eu/en"

    Applicable MPN’s for Each Tool Per locale

    The following MPN’s can be included when setting up the configuration for each decision tool. Simply omit any MPN’s not included in the range on your retail website to avoid that product being recommended.


    For each MPN added to the configuration, make sure both url and price information is provided. The example below shows all information required for each MPN for Espresso, Tea, Waves, Smart Ovens, Air & Water. For the “Blend, Juice or Bluce” (type="cmh-widget" each list of mpn need to be contained in a specific category (see separate example at end of document).


    1"BES500": {
    2"url": "https://www.your_site.com/your_BES500_product_page/,
    3"price": "$9111.11"
    4}

    Espresso

    *MPNs are case insensitive


    NameUSCAAUNZUKEUCH
    The Dual BoilerBES920BES920N/AN/ABES920BES920BES920
    The Barista ExpressBES870BES870BES870BES870BES875N/ABES875
    the Barista Express ImpressBES876BES876BES876BES876BES876N/AN/A
    The InfuserBES840BES840BES840BES840N/AN/AN/A
    The Oracle TouchBES990BES990BES990BES990BES990BES990BES990
    The OracleBES980BES980BES980BES980BES980BES980BES980
    The Barista TouchBES880BES880BES880BES880BES880BES880BES880
    The Duo Temp ProN/AN/AN/AN/ABES810BES810BES810
    The Bambino PlusBES500BES500BES500BES500BES500BES500BES500
    The Barista ProBES878BES878BES878BES878BES878BES878BES878
    The BambinoBES450BES450BES450BES450N/AN/AN/A
    The Dynamic DuoN/AN/ABEP920BEP920N/AN/AN/A
    The Creatista Plus (Nespresso)N/AN/ABNE800BNE800N/AN/AN/A
    Creatista Uno (Nespresso)N/AN/ABNE500BNE500N/AN/AN/A

    Waves

    NameUSCAAUNZUKEUCH
    the Combi Wave™ 3 in 1BMO870BMO870BMO870BMO870BMO870BMO870BMO870
    the Smooth Wave™BMO850BMO850BMO850BMO850N/AN/AN/A
    the Compact Wave™BMO650BMO650BMO650BMO650BMO650BMO650BMO650

    Tea

    NameUSCAUKEU
    The Breville Smart Tea InfuserBTM600BTM600BTM600BTM600
    The IQ Kettle PureBKE830BKE830N/AN/A
    The Tea MakerBTM800BTM800BTM800BTM800
    the Temp SelectBKE720N/AN/AN/A
    the Tea Maker CompactBTM700BTM700BTM700BTM700
    the IQ Kettle™BKE820BKE820N/AN/A
    the Breville Smart Tea Infuser™ CompactBTM500BTM500BTM500BTM500
    the Smart Kettle LuxeBKE845BKE845BKE820BKE820

    Smart Ovens

    NameUSCAAUNZUKEU
    The Smart Oven AirBOV900BOV900N/AN/AN/AN/A
    The Smart Oven Air FryerBOV860BOV860BOV860BOV860SOV860SOV860
    The Smart Oven ProBOV845BOV845BOV845BOV845BOV820BOV820
    The Smart OvenBOV800N/AN/AN/AN/AN/A
    the Joule Oven Air Fryer ProBOV950BOV950N/AN/AN/AN/A
    the Smart Oven PizzaioloBPZ820BPZ820BPZ820BPZ820SPZ820SPZ820
    The Compact Smart OvenBOV650N/AN/AN/AN/AN/A
    The Mini Smart OvenBOV450BOV450N/AN/AN/AN/A
    The Smart Oven Compact ConvectionN/ABOV670N/AN/AN/AN/A

    Air

    NameUSCAAUNZUKEU
    the Easy Air™ Connect PurifierN/AN/ALAP158LAP158N/AN/A
    The Smart Air Viral Protect Compact PurifierN/AN/ABAP208BAP208N/AN/A
    The Smart Air Viral Protect Compact PurifierN/AN/ABAP408BAP408N/AN/A
    the Smart Air™ Plus Connect PurifierN/AN/ALAP508LAP508N/AN/A
    the Smart Air™ Plus PurifierN/AN/ALAP500LAP500N/AN/A
    the Smart Air™ PurifierN/AN/ALAP300LAP300N/AN/A
    the Easy Air™ PurifierN/AN/ALAP150LAP150N/AN/A
    the Smart Dry™ 2-in-1 Viral Protect DehumidifierN/AN/ABAP708BAP708N/AN/A
    the Smart Dry Plus™ Connect DehumidifierN/AN/ABAP308BAP308N/AN/A
    the Smart Dry™ Connect DehumidifierN/AN/ABAD208BAD208N/AN/A
    the Smart Dry Ultimate™ DehumidifierN/AN/ALAD500LAD500N/AN/A
    the All Climate™ DehumidifierN/AN/ALAD250LAD250N/AN/A
    the Smart Mist™ HumidifierN/AN/ALAD400LAD400N/AN/A
    the Smart Mist™ HumidifierN/AN/ALAH300LAH300N/AN/A

    Water

    NameUSCAAUNZUKEU
    the AquaStation™ PurifierN/AN/ALWA100BSSLWA100BSSN/AN/A
    the AquaStation™ Purifier HotN/AN/ALWA200BSSLWA200BSSN/AN/A
    AquaStation Chilled Water FilterN/AN/ALWA300BSSLWA300BSSN/AN/A
    AquaStation Chilled + Hot Water FiIterN/AN/ALWA600BSSLWA600BSSN/AN/A

    Blend, Juice, Bluice

    For each MPN added to the configuration for Blend, Juice, Bluice, make sure all information is provided, and MPN is placed under the correct product category.


    If a product is not ranged, it can be omitted leaving the category blank (with no products) and thus removing causing the widget to never recommend that category. To avoid possible warnings in the console, we recommend to always have the list of categories (i.e bluicing, blenders etc) present even when they are empty.

    *Product category naming must be maintained.


    1{
    2"mpns": {
    3"bluicing": {
    4"BJB815": {
    5"url": "https://www.your_site.com/your_product_page.html",
    6"price": "$1111.01"
    7}
    8},
    9"blenders": {
    10"BBL920": {
    11"url": "https://www.your_site.com/your_product_page.html",
    12"price": "$1111.02"
    13},
    14"fast_juicers": {
    15"BJE820": {
    16"url": "https://www.your_site.com/your_product_page.html",
    17"price": "$1111.03"
    18},
    19"slow_juicers": {
    20"BJS700": {
    21"url": "https://www.your_site.com/your_product_page.html",
    22"price": "$1111.04"
    23}
    24},
    25"citrus_presses": {
    26"800CP": {
    27"url": "https://www.your_site.com/your_product_page.html",
    28"price": "$1111.05"
    29}
    30}
    31}
    32}
    33}
    34}

     NameUSCAAUNZUKEUCH
    BluicersThe 3x Bluicer ProBJB815BJB815BJB815BJB815BJB815BJB815BJB815
     The 3x BluicerN/ABJB615BJB615BJB615 BJB615BJB615
    BlendersThe Super QBBL920BBL920BBL920BBL920BBL920BBL920BBL920
     The BossN/AN/ABBL915N/AN/AN/AN/A
     The QN/ABBL820BBL820BBL820BBL820BBL820N/A
     The Kinetix ProN/AN/ABBL800N/AN/AN/AN/A
     The Fresh & FuriousBBL620BBL620BBL620BBL620BBL620BBL620BBL620
     The Kinetix TwistN/AN/ABBL405BBL405N/ABBL405N/A
     The Breville Boss to Go Sport/PlusBPB610N/AN/AN/AN/ABPB620BPB620
     The Boss to GoN/AN/AN/AN/ABPB550BPB550BPB550
     The Vac QBBL002BBL002BBL002BBL002BBL002BBL002BBL002
    Fast JuicersThe Juice Fountain DuoBJE820N/AN/AN/AN/AN/AN/A
     The Juice Fountain/Nutri Juicer Cold XLBJE830BJE830 BJE830BJE830BJE830BJE830
     The Cold Fountain ProN/AN/ABJE825N/AN/AN/AN/A
     The Juice Fountain Elite800JE800JE N/AN/AN/AN/A
     The Juice Fountain/Nutri Juicer Cold PlusBJE530BJE530BJE530BJE530BJE530N/AN/A
     The Froojie Fountain / Nutri Juicer PlusN/AN/ABJE520N/AN/ABJE520N/A
     The Juice Fountain Multi-SpeedN/ABJE510N/AN/AN/AN/AN/A
     The Juice Fountain/Nutri Juicer ColdBJE430BJE430BJE430BJE430BJE430BJE430BJE430
     The Juice Fountain Plus /Max /Nutri Juicer ClassicJE98XLJE98SIBJE410BJE410N/ABJE410BJE410
     The Juice Fountain CompactBJE200BJE200BJE200N/AN/AN/AN/A
    Slow JuicerThe Big SqueezeBJS700BJS700BJS700N/ABJS700BJS700N/A
    Citrus PressThe Citrus press Pro800CP800CP800CP800CP800CP800CP800CP
     The Citrus pressBCP600BCP600N/AN/ABCP600BCP600BCP600

    Widget Security

    The breville-widget has been designed with following security measures in place


    1. A white-listing policy is applied across all widgets. This prevents any widget from loading unless it can verify that the retail website domain (URL) has been added to the list of acceptable domains under the policy.
    a. To add you website domain(s) to the white-listing policy, please submit a request via email to your regional Breville/Sage Appliances contact stating all retail website domains where the widget / decision tools are intended to be used.

    2. All widgets code runs within an iframe that is embedded on the retailer website via the script provided as part of this implementation guide. The script ensures the iframe is correctly setup to call & display widget content within the retailer site. Minimal code and changes are made to the breville-widget scripts.