> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kleep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Malliintegraatio

> Lisää Kleep-painike, kassan seuranta ja tilausvahvistuksen seuranta SFRA-malleihisi

<Note>
  Kaikki alla olevat muutokset sisältyvät jo `int_kleep_sfra`:aan. Jos olet korvannut nämä mallit mukautetussa brändi-cartridgessasi, voit poistaa Kleep-versiot kohdasta `int_kleep_sfra/cartridge/templates/default`.
</Note>

## Kleep-painike (PDP + tuotteen seuranta)

Lisää molempiin:

* `app_custom_brand/.../experience/components/dynamic/product/productDetails.isml`
* `app_custom_brand/.../product/productDetails.isml`

```html theme={null}
<iscomment> CUSTOM KLEEP </iscomment>
<isinclude template="product/components/kleepButton" />
```

Sijoita **heti ennen**:

```html theme={null}
<!-- Attributes and Quantity -->
<isinclude template="product/components/mainAttributes" />
```

Voit monistaa `<isinclude>`-tagin mihin tahansa PDP:ssä — kaikki painikkeet jakavat yhden iframen/modaalin.

## Kassan seuranta

Lisää kassamalliisi:

```html theme={null}
<iscomment> CUSTOM KLEEP </iscomment>
<isinclude template="common/kleepTracking" />
```

Sijoita **heti jälkeen**:

```html theme={null}
<!-- Step 3: Payment and Billing-->
<isinclude template="checkout/billing/billing" />
```

## Tilausvahvistuksen seuranta

Lisää kohtaan `app_custom_brand/.../checkout/confirmation/confirmation.isml`:

```html theme={null}
<iscomment> CUSTOM KLEEP </iscomment>
<isinclude template="checkout/confirmation/kleepCheckoutCompletedTracking" />
```

Sijoita **heti jälkeen**:

```jsx theme={null}
<isscript>
var assets = require('*/cartridge/scripts/assets.js');
assets.addCss('/css/checkout/checkout.css');
assets.addJs('/js/checkoutRegistration.js');
</isscript>
```