---
title: Client-side API integration
slug: commerce-connect-13/docs/client-side-api-integration
docTags:
createdAt: 2026-07-23T09:44:50.000Z
---
:::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 [Customized Commerce API overview](docId\:L46ZYnXYmBbJ8lnogp0d5) 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.
```javascript
@using EPiServer.Personalization.Commerce.Extensions
```
Then, add @Html.LoadTrackingAPI() to the \ tag, like this.
```csharp
...
...
@Html.LoadTrackingAPI()
...
```
### 3. Configure 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, 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
{
}
```
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