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:
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.
If you are searching for a way to connect your web shop and integrate Icecat product information, check the most popular Icecat Add-ons.
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:
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.
Below you may find the data flow diagram of Icecat LIVE JS integration:
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.
<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>
<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>
<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>
<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>
<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>
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.
<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>
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.
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.
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
www.user.com/home/mystyle.css
<html>
<head>
</head>
<body>
<div id=
"Container"
></div>
<script>
window.addEventListener(
'liveload'
, function() {
IcecatLive.applyCustomCSS(
'www.user.com/home/mystyle.css'
;
)
})
</script>
<script src=
"https://live.icecat.biz/js/live-current-2.js"
></script>
</body>
</html>
IcecatLive.applyDefaultCSS()
"Container1"
"Container2"
"Container3"
"Container4"
"Container5"
"Container6"
"Container7"
"Container8"
"Container9"
"Container10"
"Container11"
"Container12"
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'
);
});
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
Read further: Manuals, Full Icecat, Icecat, Icecat Live, JavaScript, JSON
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).
Hi, have you publish it yet?
Your email address will not be published. Required fields are marked *
Comment *
Name *
Email *
Website
Δ