Manual: How to Embed Product Stories into Your Website?

By
Manual

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.

LEGO enhanced content
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:

ValueExplanation
UserNameIcecat User Name
BrandThe brand name of the product
PartCodeThe brand’s product code or manufacturer part number, uniquely identifying the product in combination with the brand name.
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.

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

  • commented on August 31, 2021 by Gonzalo

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

    don’t show information, only show a white page

  • commented on September 1, 2021 by Katerina Kadlecova

    Dear Gonzalo,
    A responsible country manager will contact you.
    Best regards,
    Katerina

  • commented on October 15, 2021 by S, A&C

    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’

    • commented on October 15, 2021 by Wouter Maatman

      Dear Simon,
      Thanks, a responsible country manager will contact you soon.
      Regards,
      Wouter

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