Contents

Reccodo – Getting Started Guide

This document will describe the structure of the product feed as well as provide guidelines on how to embed the Reccodo script to your website.

PRODUCT FEED INFORMATION

The product feed from your website, will provide Reccodo with accurate information about your product range and will enable an effective content analysis.

The feed should be in either XML or JSON format. Please find examples at the end of the present document.

General Requirements

In general, your file must meet the following criteria:
• It must be available online, publicly accessible and retrievable by a HTTP GET request.
• It must match the structure described below and all required fields should be filled in.
• There should not be any duplicate products. Duplicates may affect the quality of the
results. Products are identified by their unique_id.
• Prices should include V.A.T.
• If you support multiple languages under the same domain, please
contact us.
 
You can use our product feed validator to check for errors and compliance issues. The error report will provide good indications on how to fix your errors.
 
Important! All products in the product feed may be recommended to the customer.
 
 

Attributes

The table below analyzes all the attributes that are accepted for each product by Reccodo. Optional fields, although not affecting the functionality of our recommendation algorithms, can significantly improve their performance if provided.

NAME
TYPE
LENGTH
REQUIRED
EXAMPLE
COMMENTS
unique_id
String
255
Yes
4567321
title
String
255
Yes
SuperGlasses X3 Black
Short description of the product
image
String
200
Yes
http://www.mystore.com/product/45673
The most representative image of the product
price_with_vat
Decimal
Yes
134.66
Don’t include currency sign
url
String
200
Yes
http://www.mystore.com/prod/4567321
category
String
255
Yes
Eyewear > Smart Devices
Demonstrate Category tree with “>”
category_id
String
255
No
1567,1567SF, …
Comma Separated Values. If applicable, will enable category recommendations
in_stock
Boolean
No
{true, false}
manufacturer
String
70
No
SuperGlasses
mpn
String
100
No
ZHD321
manufacturer identifier of the product
ean
String
13
No
9780471117094
international article number (EAN) used for the identification of retail products
weight
Integer
No
140
color
String
50
No
XL, L, M, S
All the available sizes for the product.
old_price_with_vat
Decimal
No
185, 99
If product on offer, this is the original price.
optional_note
String
50
No
On offer until 2/3

EMBED TRACKING SCRIPT

The embed script enables the data exchange between your website and Reccodo. The script
needs to be present on every page similarly to analytics scripts such as Google’s, hence we
suggest including it in a main page template, if one is available.


We recommend placing the code in <head> section of the site or at least on top of the <body>
so that it is loaded before a page renders on a browser. The script will load asynchronously and will not affect your page load time.


Please copy & paste the following:

<script>(function(d, s, id) {
    var js, sjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.type = 'text/javascript';
    js.async = true;
    js.src = "https://app.reccodo.com/static/js/reccodo.min.js";
    sjs.parentNode.insertBefore(js, sjs);
    }(document, 'script', 'reccodo-js'));
</script> 
0 M
Shopping moments personalized

BASKET TRACKING

Tagging shopping cart aims to improve overall recommendation performance, analyze and produce frequent item sets to increase basket value and track abandoned carts to retarget customers.

On each page that is containing a shopping cart – including the mini-shopping cart modal usually placed on the top right-hand corner – you should add the following snippet, with the products that are currently in the basket. Basket tracking should be activated after the submission of the product feed.

<div class="scibyl_cart" style="display:none">
   <div class="scibyl_cart_item">
   <span class="product_id">XXXXXX</span>
   <span class="quantity">2</span>
   <span class="unit_price">501.30</span>
   <span class="currency_code">EUR</span>
   <span class="size">M</span>
   </div>
   <div class="scibyl_cart_item">
   <span class="product_id">YYYYYY</span>
   <span class="quantity">3</span>
   <span class="unit_price">61.50</span>
   <span class="currency_code">EUR</span>
   <span class="size">M</span>
   </div>
   ..
</div> 
In the order confirmation page (the page where the user lands after a successful purchase), you should replace it with the following snippet to confirm the purchase.
<div class="scibyl_cart_purchased" style="display:none">
   <div class="scibyl_cart_item">
   <span class="product_id">XXXXXX</span>
   <span class="quantity">2</span>
   <span class="unit_price">501.30</span>
   <span class="currency_code">EUR</span>
   <span class="size">M</span>
   </div>
   <div class="scibyl_cart_item">
   <span class="product_id">YYYYYY</span>
   <span class="quantity">3</span>
   <span class="unit_price">61.50</span>
   <span class="currency_code">EUR</span>
   <span class="size">M</span>
   </div>
   . .
</div> 

If the webpage is built as a single page application, or the cart is changing dynamically you may update the basket by calling the following JS function:

<script>
    var b = new Basket();
    b.basket_update();
</script> 

EMBED WIDGET

Upon creating your account at Reccodo, you should configure the recommendations widgets.
There are several widget types that you can choose from, each of them carrying a separate
configuration.

1. Homepage recommendations
2. Product-Related Recommendations
3. Category Recommendations (*category_id should be present in product feed)
4. Frequent Item set (Bundles)
5. Checkout page recommendations

For each of them you should reserve a space in your website for Reccodo to present them. This is done by adding a snippet like the following in the HTML.
The exact snippet will be autogenerated in the dashboard, when you create a widget.

<div id="sbl_recommendations" data-widget-uid="……" data-widget-type="……"></div> 

XML EXAMPLE

<?xml version="1.0" encoding="UTF-8"?>
<store>
   <products>
      <product>
         <unique_id>322233A</unique_id>
         <title>MadBiker 600</title>
         <image>http://www.mystore.com/product/322233A.jpg</image>
         <price_with_vat>322.33</price_with_vat>
         <url>http://www.mystore.com/product/322233A</url>
         <category>Sports &gt; Extreme Sports</category>
         <category_id>category_id1,category_id2</category_id>
         <manufacturer>SuperGlasses</manufacturer>
         <mpn>ZHD332A</mpn>
         <ean>9780471117094</ean>
         <weight>360</weight>
         <lang>en</lang>
         <color>Black</color>
         <old_price_with_vat>413.45</old_price_with_vat>
         <optional_note>On Offer until 2/3</optional_note>
      </product>
      <product>
         <unique_id>322233B</unique_id>
         <title>MadBiker 613</title>
         <image>http://www.mystore.com/product/322233B.jpg</image>
         <price_with_vat>345.13</price_with_vat>
         <url>http://www.mystore.com/product/322233B</url>
         <category>Sports &gt; Extreme Sports</category>
         <category_id>category_id1,category_id2</category_id>
         <manufacturer>SuperGlasses</manufacturer>
         <mpn>ZHD332B</mpn>
         <ean>9780471117095</ean>
         <weight>460</weight>
         <color>Black</color>
         <lang>en</lang>
         <old_price_with_vat>433.45</old_price_with_vat>
         <optional_note>On Offer until 2/3</optional_note>
      </product>
   </products>
</store> 

JSON EXAMPLE

{
   "store": {
      "products": [
         {
            "product": [
               {
                  "unique_id": "322233",
                  "title": "MadBiker 600",
                  "image": "http://www.mystore.com/product/322233.jpg",
                  "price_with_vat": 322.33,
                  "url": "http://www.mystore.com/product/322233",
                  "category": "Sports > Extreme Sports",
                  "category_id": "category_id1,category_id2",
                  "manufacturer": "SuperGlasses",
                  "mpn": "ZHD332",
                  "ean": "9780471117094",
                  "weight": 360,
                  "color": "Black",
                  "lang": "en",
                  "old_price_with_vat": 433.45,
                  "optional_note": "On Offer until 2/3"
               },
               {
                  "unique_id": "322233B",
                  "title": "MadBiker 613",
                  "image": "http://www.mystore.com/product/322233B.jpg",
                  "price_with_vat": 345.13,
                  "url": "http://www.mystore.com/product/322233B",
                  "category": "Sports > Extreme Sports",
                  "category_id": "category_id1,category_id2",
                  "manufacturer": "SuperGlasses",
                  "mpn": "ZHD332B",
                  "ean": "9780471117095",
                  "weight": 460,
                  "color": "Black",
                  "lang": "en",
                  "old_price_with_vat": 433.45,
                  "optional_note": "On Offer until 2/3"
               }
            ]
         }
      ]
   }
} 

Reccodo – Magento Getting Started Guide

MODULE INSTALATION

To add module to your store:
1.Copy all extension files to the Magento root category.
2.Clean caches.

CONFIGURATION

Reccodo configuration lies on System -> Configuration -> Reccodo.

In the settings you may enable or disable the script. The default Reccodo tracking code is in place, so no further steps are essential. 

In the “Feed Links”, there are the product feeds for all the available store views. Please copy them to Reccodo Dashboard (https://app.reccodo.com). 

Click “Save Configuration” and clean caches.

ADD WIDGET

Go to CMS -> Widgets. 

In the top right part of the page click “Add New Widget Instance” and follow the steps:

1. Add New Widget Instance

  • In “Type” select Reccodo and in the “Design Package/ Theme” select your store theme, that the widget will display.
  • Click “Continue”.

2. Frontend Properties

  • For your reference you must give a name to your Widget instance, in the “Widget Instance Title”.
  • “Assign to Store Views” – select the store views you want to assign. It is important to select only one, since the widget is specific to one language.
  • In Layout Updates specify the place to show the widget.

Note: In this example the widget will be shown only on homepage on the top of the page.

3. Widget Options

In the widget options tab, you are pasting the HTML code that it is autogenerated from the Reccodo dashboard.

Example code:

<div id="sbl_recommendations" data-widget-uid="......" data-widget-type="......"></div> 

Important: For multilingual websites, please contact support@reccodo.com.

Reccodo Search – Getting Started

This document is a continuation of “Reccodo Getting Started Guide” and describes the additional steps that should be taken in order to integrate your Online Shop with Reccodo Search functionality.

PRODUCT FEED INFORMATION

The product feed from your website will provide Reccodo with accurate information about your product range and will enable an effective content analysis. 

The feed should be in either XML or JSON format. Please refer to “Reccodo Getting Started Guide” for more information. 

Important! Products that are not in the product feed will not be indexed and therefore will not appear on the search bar.

EMBED SEARCH SCRIPT

The embedded script enables the data exchange between your website and Reccodo. The script needs to be present on every page with search functionality, hence we suggest including it in a main page template, if one is available.

We recommend placing the code on the <head> section of the site or at least on top of the <body> so that it is loaded before a page renders on a browser. The script will load asynchronously and will not affect your page load time. 

The code will be provided by Reccodo team.

SEARCH INPUT TAGGING TRACKING

In your search input field add the class “sbl-search-input” and the tag data-sbl-lang=”<language_code>” (Or any other language identifier for the respective product feed, if many languages).

Respectively, you may add data-sbl-tag=”<feed_tag>”for different pricelists. 

For example:

<input data-sbl-lang="en" class="sbl-search-input"> 

Add the following div as a sibling to yoursearch input field:

<div data-widget-type="searchbar-recommendations" data-widget-uid="<your_widget_uid>" class="sbl-searchsbl-search-wrapper"></div> 

SEARCH CUSTOM CSS

Τhe last step is to add a link for the custom CSS, like the following, at a place where it is not overridden by other CSS files. The actual link will be provided by Reccodo Team.

<link href="https://app.scibyl.com/static/css/<your_brand_name>_scibyl_search.css" rel="stylesheet" type="text/css" />