Recommendations Widget

The recommendation widget is perfect for surfacing relevant products that suit each customer’s tastes and preferences across all their touch-points. The personalized recommendations widget dynamically adapts to your customer behavior and changes in variables like assortment, pricing, and special offers.

This section describes how to integrate personalized product recommendations in your website by using the MorphL Recommendations Widget. You can see it in action here.

Prerequisites

Recommendations ML Model

This guide assumes that the Recommendations ML model was already activated from the MorphL Dashboard and predictions are available via the MorphL API.

Add the widget in the page

The widget's ID can be retrieved from the MorphL dashboard.

  1. Add the below code in the <head> section of your website.

    <script type="text/javascript">
        (function () {
            var ldr = document.createElement("script");
            ldr.type = "text/javascript";
            ldr.async = true;
            ldr.src = "https://storage.googleapis.com/morphl-widgets/{widget-id}/script.js";
    
            var stylesheet = document.createElement("link");
            stylesheet.rel = "stylesheet";
            stylesheet.type = "text/css";
            stylesheet.href = "https://storage.googleapis.com/morphl-widgets/{widget-id}/style.css";
    
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(stylesheet, s);
            s.parentNode.insertBefore(ldr, s);
        })();
    </script>
    
  2. Add the <div> container in the <body> section of your website, where you would like the recommendations to appear.

    <div class="morphl-widget" id="morphl-widget-1937101"></div>

Customize the widget's appearance

The widget has minimal styling and exposes CSS class names for each element. This allows you to customize its appearance to fit the design of your website.

CSS Class Name Scope
morphl-widget Main widget container
morphl-widget-title Section title
morphl-item Container for an item / product
morphl-link Link to the product's details. Contains image and meta info.
morphl-image-wrap Image container
morphl-image Product image
morphl-info-wrap Meta info (title, brand, price, etc) container
morphl-brand Product brand
morphl-title Product name
morphl-description Product description
morphl-price-wrap Product price container
morphl-price Product price
morphl-old-price Original product price
morphl-actions-wrap Actions (add to cart) container
morphl-add-to-cart Add to cart button