---
title: Client-side API integration
slug: commerce-connect-14/docs/client-side-api-integration
docTags:
createdAt: 2026-07-23T10:25:33.361Z
---
:::hint{type="info"}
**Note**
Sample code in this article is taken from Quicksilver templates. The *Quicksilver* Commerce Connect sample site and installation instructions are available for [download from GitHub](https://github.com/episerver/Quicksilver).
:::
## Preparation
See [Commerce Connect API overview](docId\:LOvzm1RHzESfoLYq1oJA2) for the initialization steps. Then, continue with the steps below.
### 1. Define the recommended sections
In the `Views/Shared/_Layout.cshtml` view, add following sections:
- `recommendations-upper`
- `recommendations-left`
- `recommendations-right`
- `recommendations-bottom`
Example:
```csharp
...
@RenderBody()
...
```
### 2. Add the client-side tracking script
To the `Views/Shared/_Layout.cshtml` view, add following `@using` statement to the top of file.
```csharp
@using EPiServer.Personalization.Commerce.Extensions
```
Then, add `@Html.LoadTrackingAPI()` to the `` tag, like this.
```csharp
...
...
@Html.LoadTrackingAPI()
...
```
### 3. Set up the template engine to render recommended data
This section provides an example of using the `mustache.js` template engine to render recommended data. The following code resides inside a partial view named `_Views/Shared/__RecommendationsTemplates.cshtml`.
```javascript
```
### 4. Render recommendation templates
In the `Views/Shared/_Layout.cshtml` view, render the templates created in step 3.
```csharp
...
@Html.Partial("_RecommendationsTemplates")
...
```
### 5. Render the page tracking script
To the `Views/Shared/_Layout.cshtml` view, add following code to render the page tracking script.
```javascript
@RenderSection("Tracking", false)
```
After that, the page should look like this.
```xml
...
@Html.Partial("_RecommendationsTemplates")
@RenderSection("Tracking", false)
```
## Track with custom attributes
This section explains how to create, send, and then consume recommendations on a page with custom attributes. This integration is applied to a Product package page.
### 1. Create product tracking data
```csharp
var refCode = '@Model.Package.Code';
var packageTrackingData = TrackingDataFactory.createProductTrackingData(refCode);
```
### 2. Add a custom attribute
```javascript
packageTrackingData["customAttributes"] = { 'marketId': Market.getSelectedMarketId() };
```
### 3. Send a tracking request and receive recommendations
```csharp
epiRecommendations.track(
packageTrackingData,
null,
Recommendations.render, {
sectionMappings: [{
area: "productAlternativesWidget",
selector: ".recommendations-right",
numberOfItemsToRender: 2
},
{
area: "productCrossSellsWidget",
selector: ".recommendations-bottom"
}
]
});
```
In the view `Views/Packages/Index.cshtml`, use these settings to render more than one recommendation section.
```csharp
@section Tracking {
<
script >
$(document).ready(function () {
var refCode = '@Model.Package.Code';
var packageTrackingData = TrackingDataFactory.createProductTrackingData(refCode);
packageTrackingData["customAttributes"] = {
'marketId': Market.getSelectedMarketId()
};
epiRecommendations.track(
packageTrackingData,
null,
Recommendations.render, {
sectionMappings: [{
area: "productAlternativesWidget",
selector: ".recommendations-right",
numberOfItemsToRender: 2
},
{
area: "productCrossSellsWidget",
selector: ".recommendations-bottom"
}
]
});
}); <
/script>
}
```
The section mapping defines options to render the recommended data.
- The first section mapping:
- Type of `productAlternativesWidget`
- Maximum items are 2
- The HTML tag with the CSS class is `recommendations-right`
- The second section mapping:
- Type of `productCrossSellsWidget`
- No maximum
- The HTML tag with the CSS class is `recommendations-bottom`