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.

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>

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