> ## 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.

# Integración de plantillas

> Añade el botón de Kleep, el seguimiento en el proceso de pago y el seguimiento de confirmación a tus plantillas SFRA

<Note>
  Todos los cambios a continuación ya están incluidos en `int_kleep_sfra`. Si has sobreescrito estas plantillas en tu cartucho de marca personalizado, puedes eliminar las versiones de Kleep de `int_kleep_sfra/cartridge/templates/default`.
</Note>

## Botón Kleep (PDP + Seguimiento de producto)

Añade a ambos:

* `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" />
```

Coloca **justo antes de**:

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

Puedes duplicar la etiqueta `<isinclude>` en cualquier parte de la PDP — todos los botones comparten un único iframe/modal.

## Seguimiento en el proceso de pago

Añade a tu plantilla de pago:

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

Coloca **justo después de**:

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

## Seguimiento de confirmación

Añade a `app_custom_brand/.../checkout/confirmation/confirmation.isml`:

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

Coloca **justo después de**:

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