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 customers 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 Models

This guide assumes that one of the recommendations ML models (Personalized Recommendations, Related Products or Frequently Bought Together) was already activated from the MorphL Dashboard and recommendations are available via the MorphL API.

Displaying recommended items

Activate & install widget

  1. Log in to your MorphL account.
  2. From the left side menu, go to ML Models.
  3. Choose one of the recommendations ML models (Personalized Recommendations, Related Products or Frequently Bought Together).
  4. Go to the Widget section of the model's details.
  5. Configure widget properties and press the Save and continue button.
    Configure recommendations widget
  6. Copy the generated code from the dashboard and paste it in the source of your website, where you would like the recommendations to be displayed. Below you can see a code sample.

    <div class="morphl-widget"
    id="morphl-widget-*******"
    data-sku="## Your product SKU ##"
    data-add-to-cart-callback="myAddToCartFunction">
</div>

<script type="text/javascript" src="https://storage.googleapis.com/morphl-widgets/*******/personalized-recommendations/widget.js"></script>
<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/morphl-widgets/*******/personalized-recommendations/widget.css" />

<script type="text/javascript">
function myAddToCartFunction(products) {
    products.forEach(element => {
        console.log("The following item should be added to the cart: ", element.sku, element.product_id, element.variant_id);
    });
}
</script>

We recommend placing the widget on:

  • Products details pages for Related Products and Frequently Bought Together;
  • Home page, user profile or shopping cart page for Personalized Recommendations;
  • Products details pages for Personalized Recommendations, when you want to display recommended products for a user in the context of the product that's being viewed.

Set the item SKU

The Related Products and Frequently Bought Together widgets require the data-sku attribute. The value of this attribute is the SKU of the product that is viewed, so make sure to replace the ## Your product SKU ## value with actual product SKUs.

The data-sku attribute should also be used for the Personalized Recommendations widget, when this widget is placed on products details pages.

Activate add to cart action

Use the data-add-to-cart-callback attribute to activate add to cart actions for your items. An add to cart function should be defined in the following cases:

  • For the Frequently Bought Together widget.
  • When you want to enable the add to cart button for each item displayed in your Personalized Recommendations or Related Products widgets. You'll also need to enable the add to cart action for these widgets when configuring them from the MorphL dashboard.

You can rename myAddToCartFunction from the widget's code, while also updating the data-add-to-cart-callback attribute value.

You'll need to add your own code for saving items in the shopping cart. The function will receive a list of items SKUs when the add to cart button is pressed. For the Frequently Bought Together widget, this list will contain 2, 3 or 4 SKUs, depending on the No. items setting configured from the MorphL dashboard. The Personalized Recommendations or Related Products widgets will add to cart a single item at a time.

(Optional) Customize widget title and add to cart button label

The MorphL dashboard allows you to set default values for your widget's title and add to cart buttons labels. If you wish to change these values depending on different sections of your website, you can set the data-title and data-add-to-cart attributes for your widget.

In addition, the Frequently Bought Together widget allows you to set the data-total-title attribute to customize the title displayed in the total section of the widget.

(Optional) Trigger actions after the widget is loaded

After the widget is rendered, it will trigger the morphl-widget-loaded Javascript custom event. You can catch this event and use it to enable different actions in your website.

(Optional) 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. In the CSS file of your website, you can add styling for the following CSS classes:

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-promo-wrap Promotion container
morphl-promo Promotion, appears on top of the image
morphl-info-wrap Meta info (title, brand, price, etc) container
morphl-brand Product brand
morphl-category Product category
morphl-title Product name
morphl-description Product description
morphl-loader Loading spinner

The following CSS classes are used only by the Personalized Recommendations and Related Products widgets:

CSS Class Name Scope
morphl-price-wrap Product price container
morphl-price Product price (includes discounts if the item has one)
morphl-old-price Original product price (before a discount was applied)
morphl-actions-wrap Actions (add to cart) container
morphl-add-to-cart Add to cart button

The following CSS classes are used only by the Frequenly Bought Together widget:

CSS Class Name Scope
morphl-bought-together Container for the items
morphl-total-wrap Container for the total section
morphl-total Container for the total section's title and price
morphl-total-title Total section's title
morphl-total-price-wrap Total section's price container
morphl-total-price Product prices sum (includes discounts if the items have one)
morphl-total-original-price Original prices sum (before discount were applied)
morphl-total-actions-wrap Actions (add to cart) container
morphl-total-add-to-cart Add to cart button
morphl-plus Plus sign that is displayed between items.