---
title: Placing Strands recommendations on a page
related:
  - https://docs.kentico.com/k9/integrating-3rd-party-systems/strands-recommender-integration.md
  - https://docs.kentico.com/k9/developing-websites/loading-and-displaying-data-on-websites/writing-transformations.md
  - https://docs.kentico.com/k9/integrating-3rd-party-systems/strands-recommender-integration/customizing-how-products-are-categorized-in-the-strands-integration.md
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

You can recommend products on pages using Strands via a widget or a web part. The recommendations are displayed based on the behavior of the users visiting the site.

There are currently five types of [recommendations](http://recommender.strands.com/tpl/website/) that you can make the web part display:

- **Home** - displays recommendations from the _Home_ category. The web part can display these recommendations on any type of pages.
- **Category** - displays recommendations from the category named _Category_. The web part displays recommendations of the same product category (determined by page type by default—you can [customize how products are categorized](https://docs.kentico.com/k9/integrating-3rd-party-systems/strands-recommender-integration/customizing-how-products-are-categorized-in-the-strands-integration.md)) as the product the user is currently viewing. If there are no other products in the category, no recommendations are displayed.
- **Product Detail** - displays recommendations from the _Product detail_ category. The web part can display these recommendations on pages that are set to [represent a product type](https://docs.kentico.com/k9/e-commerce-features/configuring-your-store/configuring-product-page-types.md).
- **Shopping Cart / Wishlist** - displays recommendations from the _Shopping Cart / Wishlist_ category. The recommendations are displayed only to users who have a product in their shopping cart. The web part can display these recommendations on any type of pages.
- **Order Confirmation** - displays recommendations from the _Order Confirmation_ category. The recommendations are based on the user's last purchase. The web part can display these recommendations on any type of pages.

  ![A Strands recommendation web part placed on a product](https://docs.kentico.com/docsassets/k9/placing-strands-recommendations-on-a-page/strands_widget_displayed_on_page.png "A Strands recommendation web part placed on a product")

  _**A Strands recommendation web part placed on a product**_

> **Note:** 
>
> - Make sure you configure the [Strands recommendation](https://docs.kentico.com/k9/integrating-3rd-party-systems/strands-recommender-integration.md) integration before placing a **Strands recommendation** widget or web part.

## Placing Strands recommendations widget on a page

1. Open the **Pages** application.
2. Choose the page on which you want to place the widget.
3. On the **Page** tab, open the [widget](https://docs.kentico.com/k9/managing-website-content/adding-page-content-through-widgets.md) zone menu ().
4. Click **Add new widget**.

   ![Adding a new widget on a page](https://docs.kentico.com/docsassets/k9/placing-strands-recommendations-on-a-page/adding_widget.png "Adding a new widget on a page")
5. Choose **Strands recommender -> Strands recommendations** and click **Select**.
6. Under **Template**, use the **Choose a template** drop-down list to choose the _Strands recommender widget_ that you want to display.
7. (Optional) If you want to adjust how the recommendations look on the page further than what is offered on the [Strands recommender website](http://recommender.strands.com/tpl/website/), specify a transformation in the **Custom layout** field.

   ![Choosing a strands recommender widget](https://docs.kentico.com/docsassets/k9/placing-strands-recommendations-on-a-page/choosing_strands_widget.png "Choosing a strands recommender widget")
8. (Optional) [Specify](https://docs.kentico.com/k9/developing-websites/developing-websites-using-the-portal-engine/using-and-configuring-web-parts.md#configuring-web-parts) the rest of the widget properties.
9. Click **Save & Close**. The system places the widget on the page.
10. **Save** the page.

You have configured the **Strands recommendations** widget to display recommendations based on visitor behavior.

## Placing Strands recommendations web part on a page

1. Open the **Pages** application.
2. Choose the page on which you want to place the web part.
3. Switch to the **Design** tab.
4. [Place](https://docs.kentico.com/k9/developing-websites/developing-websites-using-the-portal-engine/using-and-configuring-web-parts.md) the **Strands recommendations** web part on the page.
5. Under **Template**, use the **Choose a template** drop-down list to choose the _Strands recommender widget_ that you want the web part to display.
6. (Optional) If you want to adjust how the recommendations look on the page further than what is offered on the [Strands recommender website](http://recommender.strands.com/tpl/website/), specify a transformation in the **Custom layout** field.

   ![Choosing a strands recommender widget](https://docs.kentico.com/docsassets/k9/placing-strands-recommendations-on-a-page/choosing_strands_widget.png "Choosing a strands recommender widget")
7. (Optional) [Specify](https://docs.kentico.com/k9/developing-websites/developing-websites-using-the-portal-engine/using-and-configuring-web-parts.md#configuring-web-parts) the rest of the web part properties.
8. Click on **OK** to confirm. The system places the web part on the page.
9. **Save** the page.

You have configured the **Strands recommendations** web part to display recommendations based on visitor behavior.

## Custom Strands recommendations layout

By using a transformation to define a custom layout in the **Strands recommendations** web part, you can fully control the way the recommendations are displayed on the page. You only need to specify the amount of items you wish to display and the logic of the recommendation on the [Strands recommender website](http://recommender.strands.com/tpl/website/). You can handle the rest by the transformation. You can create your own transformation or edit one of the two predefined transformation:

- _StrandsRecommender.Transformations.StrandsDefault_ - a transformation imitating the default recommendation template from the [Strands recommender website](http://recommender.strands.com/tpl/website/).
- _StrandsRecommender.Transformations.StrandsList_ - a transformation displaying the recommendations in a vertical list.

> **Info:** Note that Strands recommendations transformations need to be of **jQuery type**. A jQuery transformation consists of HTML code and **template tags** that dynamically insert values of the object that is currently being processed. There are also tags that control the flow of the transformation. You can find more information on using jQuery transformations in Kentico in a [topic describing their use](https://docs.kentico.com/k9/community-features/chat/customizing-chat-appearance/writing-transformations-for-chat.md) in the Chat application.

### Example transformation

One of the Strands recommendations transformations predefined in the system is the _StrandsRecommender.Transformations.StrandsList_ transformation.

```xml title="The StrandsRecommender.Transformations.StrandsList transformation"

<div class="strandsLinkTemplate">
  <h1 class="uiLight">
    Recommendation title
  </h1>
  <ul>
    {{each(i, rec) recommendations}}
    <li>
      <a href="${rec.metadata.link}" onclick="SBS.Tracking.onRecClick('${rec.itemId}','${tpl}','${rrq}');return true;" >
        <img src="${rec.metadata.picture}" alt="${rec.metadata.name}" />
        <h2 class="uiLight">${rec.metadata.name}</h2>
      </a>
      <span clas="price">{% ECommerceContext.CurrentCurrency != null ? string.FormatString(ECommerceContext.CurrentCurrency.CurrencyFormatString, "${rec.metadata.price}") : "${rec.metadata.price}" #%}</span>
    </li>
    {{/each}}
  </ul>
</div>

```

The transformation displays recommendations in a vertical list. The CSS that you use with the transformation is automatically inserted on the page.

You can find detailed documentation of the parameters of the methods used in the transformation in the [official documentation](http://recommender.strands.com/developers/javascript/#advRenderer).