Related Content

Our related content component allows you to display articles and/or products on any page on your website.

Configuration

Here is a complete list of configuration parameters you can use to setup the related content feature on your site.

{
   siteId: 'mysiteid', // the site id of your site (required)
   urlPattern: undefined, // an url pattern the active page has to match in order for the related content component to be initialized (default: initialized on all pages)
   contentBlock: 'article, body, main', // a css selector, the related content component will be appended to the first matching element (default: first of the following elements present on the page - article, main, body)
   querySource: { // the source of the text the related content search should be based on (default: content of the h1 tag)
       type: 'domElement',
       selector: 'h1'
   },
   contentGroups: undefined, // an array of content groups to be included (default: all content groups), e.g. ['Products']
   limit: 3, // the maximum number of related content articles to be displayed (default: 3)
   title: 'Related content', // the title of the related content block (default: Related content)
   themeColor: undefined, // the theme color hex code (used to highlight links, default: #3d8fff)
   showSnippet: true, // whether to show a text snippet
   showDataPoints: true, // whether to show data points (default: true)
   layoutType: 'grid', // the layout, 'grid' or 'list' (default: 'grid')
   resultStyle: 'plain', // how to style the recommendations, 'plain' or 'card' (defalt: 'plain')
   imagePosition: 'top', // the image position, 'top', left' or 'right' (default: 'top' for grid layout, 'left' for list layout)
   grid: {
      sm: 1, // number of grid columns on small resolution (767px and below; default: 1)
      md: 2, // number of grid columns on medium resolution (768px - 991px; default: 2)
      lg: 3, // number of grid columns on large resolution (992px - 1199px; default: 3)
      xl: 3, // number of grid columns on xl resolution (1200px and above; default: 3)
   },
   ecom: false // whether the ecom search api should be used (only for ecommerce projects, default: false)
}

Integration

With the Site Search 360 Search Plugin

If you're using the latest version of our search plugin (v14), you can simply add the configuration object to your ss360Config (the siteId , themeColor and ecom settings will be taken directly from your ss360Config):

window.ss360Config = {
   siteId: 'mysiteid',
   /* ... */
   relatedContent: {
      contentBlock: '#ss360-related-content',
      querySource: {
         type: 'domElement',
         selector: '#ss360-related-content-q'
      }
   }
}

Standalone

If you're using an older version of our search plugin (or aren't using the search plugin at all), you can easily load our standalone related content component, just include the following code right before your closing </body> tag:

<!-- SS360 Related Content -->
<script>
window.ss360RelatedContentConfig = {
   siteId: 'mysiteid',
   contentBlock: '#ss360-related-content',
   querySource: {
      type: 'domElement',
      selector: '#ss360-related-content-q'
   }
};
</script>
<script src="https://cdn.sitesearch360.com/ss360-related-content.min.js" defer></script>
<!-- SS360 Related Content End -->

Query Sources

The text the related content search should be based on can be extracted from the following sources:

DOM Element

The text is extracted from the first DOM element matching a given CSS selector. By default the inner text is extracted. An attribute value can be extracted by providing the attribute name prefixed by the @ character. If a source is given, and it is not prefixed by the @ character, a property of the element will be used (e.g. innerHTML):

{
   type: 'domElement',
   selector: '#ss360-related-content-q',
   source: '@data-query'
}

Query Parameter

The text is extracted from a query parameter:

{
   type: 'urlParam',
   paramName: 'related-query'
}

URL Regex

A regular expression is applied on the URL and the text gets extracted from a matching group:

{
   type: 'urlRegex',
   groupIndex: 0,
   regex: '/blog/(.*)'
}

Getter

The text is provided by a custom function:

{
   type: 'getter',
   getter: function() { return document.getElementById('tags').innerText.split(',')[0]; }
}

DOM Object

The text is extracted from a JSON object that is present in the DOM (inner text of a node), you need to specify a JPath to point to the property you want to extract:

{
   type: 'domJson',
   objectSelector: '#products-json',
   jpath: 'products[0]/name'
}

Window Object

The data is extracted from an object that is attached to the window, you need to specify a JPath to point to the property you want to extract:

{
   type: 'windowJson',
   propertyName: 'Products',
   jpath: 'data/name'
}

Static

The text is a static value:

{
   type: 'static',
   value: 'cheesecake'
}

Integration Example

The following example will display up to 3 related products on your blog pages, up to 3 related blog posts on your blog pages, and no related content on all other website pages. The related content will be resolved based on the text of your h1 heading.

var href = window.location.href;
var isProductPage =  href.indexOf('/p/') !== -1;
var isBlogPage = href.indexOf('/blog/') !== -1;
if (isProductPage || isBlogPage) {
   window.ss360RelatedContentConfig = {
      siteId: 'mysiteid',
      contentBlock: '#ss360-related-content',
      querySource: {
         type: 'domElement',
         selector: 'h1'
      },
      title: isProductPage ? 'Related blog posts' : 'Related products',
      contentGroups: isProductPage ? ['Blog'] : ['Products'],
      limit: 3
   };
   var relatedContentScript = document.createElement('script');
   relatedContentScript.setAttribute('defer', 'defer');
   relatedContentScript.setAttribute('src', 'https://cdn.sitesearch360.com/ss360-related-content.min.js');
   document.querySelector('body').appendChild(relatedContentScript);
}

Live Example