Icecat LIVE – Manual For Granular Calls of Open Icecat Content

By
Manual

Icecat LIVE is a (free) service that enables you to insert real-time product content from some 300 major brands or manufacturers into your website, with just a few lines of JavaScript in your HTML template. Icecat provides customers with the ability to insert product data into their websites. In this post, you will find a manual for granular calls of Open Icecat content. Other available interfaces are:

Access to Icecat

In order to access Open Icecat, you will need a username and password, provided by Icecat. If you don’t have these, please register online for Open Icecat. The Open Icecat catalog is free and contains millions of product data sheets.

Tip: During the registration you need to choose for the URL or Data (XML) version. If you want to make use of XML, make sure you choose the “Open Icecat Data” subscription. You can always change this afterwards, or create a second subscription for the URL (links to hosted data-sheets) download format.

If you need more product data coverage, you will need to upgrade to Full Icecat. You can make your request via our contact page.

Access to the product information of Full Icecat is protected. If you want to access Full Icecat product information, we will need to unblock your IP address. Fill in the IP-address(es) of your server(s) and office in the “Allowed IP addresses” field. If you don’t know your office IP addresses, visit What is my IP to find your (office) IP. For you server IP address, please ask your system operator or provider.

You can fill in several IP addresses, separated by a space.

Please, note that some brands have a restrictive syndication policy, in which they allow access to certain digital assets or other product data only to authorized resellers. In general, it is therefore good to request authorization from brands with which you have established formal relations via the Icecat website.

Popular web shop software Add-ons

If you are searching for a way to connect your web shop and integrate Icecat product information, check the most popular Icecat Add-ons.

What is Icecat LIVE /html?

Icecat LIVE is a (free) service that enables you to insert real-time product content from some 300 major brands or manufacturers into your web site. With just a few lines of JavaScript in your HTML template.

In this manual, we provide a quick guide on how to easily embed product information into your website.

If you plan to integrate Icecat LIVE, we advise you first to integrate free Open Icecat Live and evaluate it for your purposes. And then, plan the next step by upgrading your interface to Full Icecat.

What is Icecat LIVE? Icecat LIVE is basically a JavaScript (JS) service, providing real-time inserts of product data into your websites. Icecat LIVE enables seamless insertion of a product data-sheet in individual content assets, without the need to use frames or iframes. The LIVE/HTML version is the easy integration where -in case of Full Icecat- all authorization and security is handled at the Icecat server side.

Type of content that will be available for granular call:

Type
Definition for call
Brand and Product nametitle
  • Essential information
    • Brand
    • Product family
    • Product series
    • Product name
    • Product code
    • EAN/UPC code
essentialinfo
Marketing textmarketingtext
Manuals (PDF’s, leaflets, etc)manuals
Reasons to buyreasonstobuy
Reviewsreviews
Specificationsfeaturegroups
Image gallerygallery
Feature logosfeaturelogos
3d tourstours3d
Videosvideos
Product Storyproductstory

Technically, the Icecat LIVE JS (JavaScript) interface calls product data in JSON (JavaScript Object Notation) format and transforms that into HTML. The JS makes it very easy for channel partners to embed the product information into their websites with just a few lines of code in an HTML template or app. The JS itself can also be adapted to fit the specific purposes of the Partner’s app.

Please, note that some Open Icecat brands, such as Philips, make certain rich media assets (e.g., video) only available for their Authorized Resellers. Please, contact us in case you see on the Icecat website more assets than that you can access through Icecat LIVE.

3. Embedding Icecat LIVE JS into your website

Below you may find the data flow diagram of Icecat LIVE JS integration:

schema 1

Icecat LIVE JS API

Icecat LIVE refers to a program code written in JavaScript (JS) that is embedded in a web page and executed by the browser of your site visitor when a page is downloaded by the respective visitor, or in response to an event triggered by you as a Partner.

JS allows creating a bridge between a webshop and the Icecat catalog, which makes it possible to incorporate product information (descriptions, leaflets, multimedia objects) into merchant webshops. Moreover, Icecat LIVE uses Document Object Model (DOM), which allows updating content dynamically.

Examples:
1. The Regular call of datasheet – Brand in combination with Partcode
<html>
    <head>
    </head>
<body>
<div id="Container"></div>
<script>
    window.addEventListener('liveload', function() {
        IcecatLive.getDatasheet('#Container', {
            Brand: 'Philips',
            PartCode: 'DS8900/10',
            UserName: 'openicecat-live'
        }, 'en')               
    });
</script>

<script src="https://live.icecat.biz/js/live-current-2.js"></script>
</body>
</html>
Regular call of datasheet – GTIN
<html>
    <head>
    </head>
<body>
<div id="Container"></div>
<script>
    window.addEventListener('liveload', function() {
        IcecatLive.getDatasheet('#Container', {
            'GTIN': '4002515758205',
            UserName: 'openicecat-live'
        }, 'en')               
    });
</script>

<script src="https://live.icecat.biz/js/live-current-2.js"></script>
</body>
</html>
Regular call of datasheet – IcecatProductId
<html>
    <head>
    </head>
<body>
<div id="Container"></div>
<script>
    window.addEventListener('liveload', function() {
        IcecatLive.getDatasheet('#Container', {
            'IcecatProductId': '18253015',
            UserName: 'openicecat-live'
        }, 'en')               
    });
</script>

<script src="https://live.icecat.biz/js/live-current-2.js"></script>
</body>
</html>
Granular call of Title and Essential Info
<html>
    <head>
    </head>

<body>
<div id="Container1"></div>
<div id="Container2"></div>

<script>
    window.addEventListener('liveload', function() {
        IcecatLive.getDatasheet(
			{
				'title':'#Container1',
				'essentialinfo': '#Container2'
			}, 
			{
            Brand: 'Philips',
            PartCode: 'DS8900/10',
            UserName: 'openicecat-live'
        }, 'en')               
    });
</script>

<script src="https://live.icecat.biz/js/live-current-2.js"></script>
</body>
</html>
Granular call of all info from datasheet in separate containers
<html>
    <head>
    </head>

<body>
<div id="Container1"></div>
<div id="Container2"></div>
<div id="Container3"></div>
<div id="Container4"></div>
<div id="Container5"></div>
<div id="Container6"></div>
<div id="Container7"></div>
<div id="Container8"></div>
<div id="Container9"></div>
<div id="Container10"></div>
<div id="Container11"></div>
<div id="Container12"></div>

<script>
    window.addEventListener('liveload', function() {
        IcecatLive.getDatasheet(
			{
				'title':'#Container1',
				'essentialinfo':'#Container2',
				'marketingtext':'#Container3',
				'manuals':'#Container4',
				'reasonstobuy':'#Container5',
				'reviews':'#Container6',
                'featuregroups':'#Container7',
                'gallery':'#Container8', 
                'featurelogos':'#Container9', 
                'tours3d':'#Container10',
                'videos':'#Container11',
                'productstory':'#Container12'
			}, 
			{
            Brand: 'Philips',
            PartCode: 'DS8900/10',
            UserName: 'openicecat-live'
        }, 'en')               
    });
</script>

<script src="https://live.icecat.biz/js/live-current-2.js"></script>
</body>
</html>

Smart Call

Icecat also allows users to combine two types of requests in one call: MPN + Brand and GTIN. In this case, the system first checks MPN+Brand and if they do not match then we check content based on GTIN.

Example: Granular call of Video container using Smart Call
<div id="Container1"></div>
<script>
    window.addEventListener('liveload', function() {
        IcecatLive.getDatasheet(
{
'videos': '#Container1'
},
{
            Brand: ‘brand',
            PartCode: ‘MPN',
            'GTIN': ‘EAN',
            UserName: ‘username'
        }, 'en')
    });
</script>
<script src="https://live.icecat.biz/js/live-current-2.js"></script>

Description of the parameters:

ValueExplanation
UserNameIcecat User Name
BrandThe brand name of the product
PartCodeThe brand’s part code or manufacturer part number, uniquely identifying the product in combination with brand name. Also called manufacturer part code.
GTINThe GTIN: EAN (European Article Number ), UPC (Universal Product Code) or JAN (Japan Article Number)
IcecatProductIdIcecat’s Internal numerical product identifier. Only to be used by advanced users that (already) make use of the Icecat index files.

LIVE API multilingual calls

The Icecat Live API supports multilingual calls to retrieve digital assets related to multiple locales.

In case a user wants to retrieve a specific container or the whole Icecat Live block for a product in one preferred language, but it’s not available, a user can apply a backup language. To implement this logic a user just needs to pass the list of language codes as an array. For example, [‘en’, ‘fr’] where UK English (en) is the preferred language and France French (fr) is the backup language. In this case, fr content will be retrieved if the en content is not available.

It is possible to add up to 5 languages to the array. Please, find more info and an example script in this article.

Integrating videos via Play Button

Icecat Live allows users to integrate videos into their product pages by creating a custom video play button that opens videos in a modal window. More information and examples of implementation can be found in this article.

Look & Feel customization

Open Icecat Live is responsive by design and adapts to your own CSS. You can apply your own CSS for example in: www.user.com/home/mystyle.css

Several examples:
Applying CSS for 1 container
<html>
    <head>
    </head>
 
<body>
 
<div id="Container"></div>
 
<script>
    window.addEventListener('liveload', function() {
        IcecatLive.applyCustomCSS(
            'www.user.com/home/mystyle.css';
            )
        })
</script>
 
</body>
</html>
Applying CSS to 1 container through URI
<html>
    <head>
 
    </head>
 
<body>
 
<div id="Container"></div>
 
<script>
    window.addEventListener('liveload', function() {
        IcecatLive.applyDefaultCSS()
        })
</script>
 
</body>
</html>
Using ApplyCSS with Granular Call
<html>
    <head>
 
    </head>
 
<body>
 
<div id="Container1"></div>
<div id="Container2"></div>
<div id="Container3"></div>
<div id="Container4"></div>
<div id="Container5"></div>
<div id="Container6"></div>
<div id="Container7"></div>
<div id="Container8"></div>
<div id="Container9"></div>
<div id="Container10"></div>
<div id="Container11"></div>
<div id="Container12"></div>
 
<script>
    window.addEventListener('liveload', function() {
        IcecatLive.getDatasheet(
            {
                'Title':'#Container1';
                'EssentialInfo':'#Container2';
                'MarketingText':'#Container3';
                'Manuals':'#Container4';
                'RTB':'#Container5';
                'Reviews':'#Container6';
                'Specifications':'#Container7';
                'ImageGallery':'#Container8';
                'FeatureLogos':'#Container9';
                '3dTours':'#Container10';
                'Videos':'#Container11';
'Productstory':'#Container12'
            },
            {
            Brand: 'Philips',
            PartCode: 'DS8900/10',
            UserName: 'openicecat-live'
        }, 'en');
 
     IcecatLive.applyCustomCSS(
            'www.user.com/home/mystyle.css';
            )             
    });
</script>
 
</body>
</html>

Please, contact us in case of questions or comments via your Icecat account manager or via the website:  https://www.icecat.biz/en/menu/contacts/index.html

  • commented on September 29, 2019 by Jimmy

    Would it be possible to get the source code?
    is it available on github, npm? Would like to contribute and try and reduce the dependencies.

    1.1MB js isn’t acceptable…

    it also conflict with my own webpack dynamic import…

    • Thx Jimmy. I asked a colleague to look into it: to publish the Live JS on github as open source.
      Anyway, if you want full code freedom, just use the Data interfaces (XML, JSON).

Leave a Reply

Your email address will not be published. Required fields are marked *

Icecat xml

Open Catalog Interface (OCI): Manual for Open Icecat XML and Full Icecat XML

This document describes the Icecat XML method of Icecat's Open Catalog Inte...
 November 3, 2019
Manual

Manual for Icecat Live: Real-Time Product Data in Your App

Icecat Live is a (free) service that enables you to insert real-time produc...
 June 10, 2022
Manual for Icecat CSV Interface

Manual for Icecat CSV Interface

This document describes the manual for Icecat CSV interface (Comma-Separate...
 September 28, 2016
 October 4, 2018
LIVE JS

How to Create a Button that Opens Video in a Modal Window

Recently, our Icecat Live JavaScript interface was updated with two new fun...
 November 3, 2021
Addons plugins

Icecat Add-Ons Overview. NEW: Red Technology

Icecat has a huge list of integration partners, making it easy for clients ...
 October 27, 2023
Manual

Manual for Open Icecat JSON Product Requests

JSON (JavaScript Object Notation) is an increasingly popular means of trans...
 September 17, 2018
 January 20, 2020
New Standard video thumbnail

Autheos video acquisition completed

July 21, Icecat and Autheos jointly a...
 September 7, 2021
Manual

Manual Personalized Interface File and Catalog from Icecat

With Icecat, you can generate personalized or customized CSV or Excel files...
 May 3, 2022