Manual: How to Embed Product Stories 2.0 Into Your Website?

Avatar for Alexander Velychko
By
Manual: How to Embed Product Stories 2.0 Into Your Website?

A product story 2.0 is a below-the-fold content page with a custom layout of multimedia and messaging assets that give the best product experience to an online shopper. In addition, Product Story 2.0 enables the seamless insert of a full version of the story and the seamless insert of individual content blocks without using frames or iframes like in Product Story 1.0. In other words, you can embed the code (HTML/CSS/JS) on your page with your own fonts and styles, switching off some of the blocks if you don’t want them. Hence customization becomes possible.

For Product Stories, a 2.0 unique lightweight pet framework has been created, including all the necessary plugins. The init script has a size of 5.4kb (gzip). It analyzes blocks used for a particular story page and pulls only the necessary .CSS and JS, which eventually reduces the overall size of the story. Again it’s a significant advantage for SEO. Additionally, the product story 2.0 code will not crash the customer’s site since now we use our own CSS and JS scripts instead of commonly used ones.

Explore some of the benefits of the Icecat Product Story 2.0 solution:

  • Embed Product Stories 2.0 with a few lines of code,
  • Improved performance and loading speed of Product stories 2.0,
  • Advanced customization: applying custom fonts and styles, switching off/on extra modules,
  • Lazy load option for media to improve SEO on product pages,
  • Product stories 2.0 have a responsive design,
  • Icecat hosts Product Stories 2.0, and it’s multimedia assets.

Embed Product Stories via Icecat Live

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 2.0 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:

Brand + SKU (Part code) method:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Product story example</title>
</head>
<body>
  <div id="container1"></div>
  <script>
    window.addEventListener('liveload', function () {
      IcecatLive.getDatasheet({
        productstory: '#container1'
      }, {
        Brand: 'LG',
        PartCode: 'GBB92MCBAP',
        UserName: 'openicecat-live'
      }, 'en')
    })
  </script>
  <script src="https://live.icecat.biz/js/live-current-2.js"></script>
</body>
</html>

GTIN (EAN/UPC/JAN) method:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Product story example</title>
</head>
<body>
  <div id="container1"></div>
  <script>
    window.addEventListener('liveload', function () {
      IcecatLive.getDatasheet({
        productstory: '#container1'
      }, {
        GTIN: '8806091079190',
        UserName: 'openicecat-live'
      }, 'en')
    })
  </script>
  <script src="https://live.icecat.biz/js/live-current-2.js"></script>
</body>
</html>

Icecat ID method:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Product story example</title>
</head>
<body>
  <div id="container1"></div>
  <script>
    window.addEventListener('liveload', function () {
      IcecatLive.getDatasheet({
        productstory: '#container1'
      }, {
        IcecatProductId: '87053244',
        UserName: 'openicecat-live'
      }, 'en')
    })
  </script>
  <script src="https://live.icecat.biz/js/live-current-2.js"></script>
</body>
</html>
ValueDefinition
UserNameIcecat User Name
BrandThe brand name of the product
PartCodeThe original product code, MPN(manufacturer part number), SKU (Stock Keeping Unit)
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.

How to apply custom styles?

To apply custom style guides, simply add respective settings:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Product story example</title>
</head>
<body>
  <div id="container1"></div>
  <style>
    body {
      --pet-font-family: 'Roboto', Arial, Helvetica, sans-serif;
      --pet-font-size: 13px;
      --pet-font-weight: 500;
      --pet-color: #000000;
      --pet-theme-color: #475be9;
    }
  </style>
  <script>
    window.addEventListener('liveload', function () {
      IcecatLive.getDatasheet({
        productstory: '#container1'
      }, {
        Brand: 'LG',
        PartCode: 'GBB92MCBAP',
        UserName: 'openicecat-live'
      }, 'en')
    })
  </script>
  <script src="https://live.icecat.biz/js/live-current-2.js"></script>
</body>
</html>
ValueDefault settingsDefinition
–pet-font-family-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serifFont family. Default fonts from different operating systems
–pet-font-size16pxFont size
–pet-font-weight400Font weight
–pet-line-height1.4Line spacing
–pet-color#212529Text Color
–pet-background#FFFFFFStory background color
–pet-theme-color#939393Color of bullets/arrows/other elements

How to switch on/off modules of Product Story 2.0?

There is a possibility to switch on/off additional modules in product stories (if they are available). By default, they are switched on. To activate them, change respective settings with “true” values.

Product Story modules
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Product story example</title>
</head>
<body>
  <div id="container1"></div>
<script>
    window.petOptions = {
      modules: {
        ugc: true,
        reviews: true
      }
    }
  </script>
  <script>
    window.addEventListener('liveload', function () {
      IcecatLive.getDatasheet({
        productstory: '#container1'
      }, {
        Brand: 'LG',
        PartCode: 'GBB92MCBAP',
        UserName: 'openicecat-live'
      }, 'en')
    })
  </script>
  <script src="https://live.icecat.biz/js/live-current-2.js"></script>
</body>
</html>
ValueDefault settingsDefinition
reviewsfalseTestseek reviews
UGCfalseUser-generated content

The backup logic

Product story version 2.0 will have priority over version 1.0. The backup logic while doing granular calls is the following:

Firstly, by default, the system will send product story version 2.0. If it’s not available, product story version 1.0 will be used instead.

Secondly, by specifying the product story version keys (v1 or v2), a partner can use a particular story version:

  • productStoryVersion: v1 – returns ProductStory v1.0 only
  • productStoryVersion=v2 – returns ProductStory v2.0 only
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Product story example</title>
</head>
<body>
  <div id="container1"></div>
  <script>
    window.addEventListener('liveload', function () {
      IcecatLive.getDatasheet({
        productstory: '#container1'
      }, {
        Brand: 'LG',
        PartCode: 'GBB92MCBAP',
        UserName: 'openicecat-live',
        productStoryVersion: 'v1'
      }, 'en')
    })
  </script>
  <script src="https://live.icecat.biz/js/live-current-2.js"></script>
</body>
</html>
ValueDefault settingsDefinition
productStoryVersionCan have either “v1” or “v2”

Alternative outputs (XML and JSON)

XML/JSON: we publish .txt files with HTML product story 2.0 code:

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

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