---
title: Client-side API integration
slug: commerce-connect-15/docs/client-side-api-integration
docTags:
createdAt: 2026-07-30T20:34:40.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 to [download from GitHub](https://github.com/episerver/Quicksilver).
:::
1. See [Commerce Connect API overview](docId\:EduzotMOvnW9kbAZ3b8eo) for the initialization steps.
2. Define the recommended sections. In the `Views/Shared/_Layout.cshtml` view, add the following sections:
```html
...
@RenderBody()
...
```
3. Add the client-side tracking script. In the `Views/Shared/_Layout.cshtml` view, add the following `@using` statement to the top of the file.
```csharp
@using EPiServer.Personalization.Commerce.Extensions
```
4. Then add `@Html.LoadTrackingAPI()` to the `` tag:
```html
...
...
@Html.LoadTrackingAPI()
...
```
5. Set up the template engine to render recommended data. This example uses the `mustache.js` template engine. The following code resides in a partial view named `Views/Shared/_RecommendationsTemplates.cshtml`:
```html
```
6. Render recommendation templates. In the `Views/Shared/_Layout.cshtml` view, render the templates you created:
```html
...
@Html.Partial("_RecommendationsTemplates")
...
```
7. Render the page tracking script. In the `Views/Shared/_Layout.cshtml` view, add the following code to render the page tracking script:
```csharp
@RenderSection("Tracking", false)
```
The page now looks like the following:
```html
...
@Html.Partial("_RecommendationsTemplates")
@RenderSection("Tracking", false)
```
## Track with custom attributes
This section explains how to create, send, and consume recommendations on a page with custom attributes. The integration is applied to a product package page.
1. Create product tracking data:
```javascript
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:
```javascript
epiRecommendations.track(
packageTrackingData,
null,
Recommendations.render, {
sectionMappings: [
{
area: "productAlternativesWidget",
selector: ".recommendations-right",
numberOfItemsToRender: 2
},
{
area: "productCrossSellsWidget",
selector: ".recommendations-bottom"
}
]
}
);
```
4. In the `Views/Packages/Index.cshtml` view, use these settings to render more than one recommendation section:
```csharp
@section Tracking {
}
```
The section mapping defines options to render the recommended data:
- First section mapping:
- Type: `productAlternativesWidget`
- Maximum items: 2
- Target HTML element with CSS class `recommendations-right`
- Second section mapping:
- Type: `productCrossSellsWidget`
- Maximum items: none
- Target HTML element with CSS class `recommendations-bottom`