Manual: How to Embed Product Stories into Your Website?

This Product Story manual provides a quick guide on easily embedding product information into your website via Icecat Live (JavaScript). The Product Story is a new type of enhanced content that combines various multimedia assets and follows a brand’s look and feel. The main advantage is that it helps partners to optimize product page conversion according to their commercial insights. Thus, it increases product sales as it adopts a trusted brand’s rich content messaging. Especially, when a consumer gets the messaging directly from reknown brands like LEGO, Huawei, and DELL, which already adopt Product Stories.

In short, All Open Icecat and Full Icecat users can use this new type of asset to enrich their product pages. See below the example of a LEGO Product Story.

Icecat Live integration example using Product Story, Marketing text, Reasons to buy, Video and Specification containers

To sum up, you want to consider integrating Product Story if you want to:

Above all, boost sales – Enhanced content is a proven tool to raise conversion rates.
Increase consumer engagement – Product Stories contain interactive elements like hotspots, carousels, videos, galleries, 360s.
Deliver brand-consistent content – your product pages will have a look & feel that follows the brand’s visual guidelines.
Use brand-approved message – convincing main selling points and advantages that define the unique market position of the product.
It is also easy to integrate – Product Story is integrated by adding just a few JavaScript code lines into the HTML template. In addition, it is 100% compatible with our classic XML/JSON integration and has a responsive design that adapts to visitor screen resolutions.
Most important, it is FREE and can be used immediately after registration.

Embedding Product Stories via Icecat Live into your website

In conclusion, you can integrate Product Story as one of the Icecat Live containers using the Icecat Live Granular Call method. This method delivers content to your web-page in real-time. Furthermore, it will only require a couple of lines of Javascript code in your HTML template.

You can request Product Story using three types of product identifiers:

Firstly, via Brand + Part code (SKU, MPN)
Secondly, via GTIN (EAN, UPC)
Thirdly, via the Icecat ID (the unique identifier of a product in Icecat DB)

See examples of all three Product Story request codes below:

1. Call for Product Story via Brand + Part code:

<html>
    <head>
    </head>
<body>

<div id="container1"></div>

<script>
    window.addEventListener('liveload', function() {
        IcecatLive.getDatasheet(
            {
                'productstory':'#container1'
            }, 
            {
             Brand: 'DELL',
             PartCode: 'GHHXD',
            UserName: 'openicecat-live'
        }, 'en')               
    });
</script>
<script src="https://live.icecat.biz/js/live-current-2.js"></script>

</body>
</html>

2. GTIN:

<html>
    <head>
    </head>
<body>

<div id="container1"></div>

<script>
    window.addEventListener('liveload', function() {
        IcecatLive.getDatasheet(
            {
                'productstory':'#container1'
            }, 
            {
            GTIN: '5397184333648',
            UserName: 'openicecat-live'
        }, 'en')               
    });
</script>
<script src="https://live.icecat.biz/js/live-current-2.js"></script>

</body>
</html>

3. Icecat ID:

<html>
    <head>
    </head>
<body>

<div id="container1"></div>

<script>
    window.addEventListener('liveload', function() {
        IcecatLive.getDatasheet(
            {
                'productstory':'#container1'
            }, 
            {
            IcecatProductId: '76472360',
            UserName: 'openicecat-live'
        }, 'en')               
    });
</script>
<script src="https://live.icecat.biz/js/live-current-2.js"></script>

</body>
</html>

Description of the parameters:

Value	Explanation
UserName	Icecat User Name
Brand	The brand name of the product
PartCode	The brand’s product code or manufacturer part number, uniquely identifying the product in combination with the brand name.
GTIN	The GTIN: EAN (European Article Number ), UPC (Universal Product Code) or JAN (Japan Article Number)
IcecatProductId	Icecat’s Internal numerical product identifier. Only to be used by advanced users that (already) make use of the Icecat index files.

Please, contact us in case of questions or comments via your Icecat account manager or contact us via the website.

Read further: Manuals, Icecat Live, increase conversion, manuals, product story

Eugene Ignatenko

Next 4 Alexa Alternatives for Website Ranking and Traffic Analysis »

Previous « German and Swedish Webshops Share the Most Sustainability Content

View Comments

Gonzalo says:

August 31, 2021 at 9:03 pm

At point number 1, when i change other items, example:
Brand: 'DELL',
PartCode: '6225-0850 '

don't show information, only show a white page
Katerina Kadlecova says:

September 1, 2021 at 10:04 am

Dear Gonzalo,
A responsible country manager will contact you.
Best regards,
Katerina
S, A&C says:

October 15, 2021 at 9:24 am

Is there a possible way of hiding certain segments and/or re-ordering different elements?

For example, we already have an (Icecat) image-gallery & (Icecat) product specs listed on the website (which are integrated into our productfilters).Thus it would not be necessary for us to show these elements in the 'Product story'
- Wouter Maatman says:
  
  October 15, 2021 at 2:50 pm
  
  Dear Simon,
  Thanks, a responsible country manager will contact you soon.
  Regards,
  Wouter