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

# 템플릿 연동

> SFRA 템플릿에 Kleep 버튼, 체크아웃 트래킹, 확인 트래킹 추가하기

<Note>
  아래의 모든 변경 사항은 이미 `int_kleep_sfra`에 포함되어 있습니다. 커스텀 브랜드 카트리지에서 이 템플릿을 재정의한 경우 `int_kleep_sfra/cartridge/templates/default`에서 Kleep 버전을 제거할 수 있습니다.
</Note>

## Kleep 버튼 (PDP + 상품 트래킹)

다음 두 파일 모두에 추가하세요:

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

다음 코드 **바로 앞에** 배치하세요:

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

PDP 내 어느 위치에든 `<isinclude>` 태그를 중복 배치할 수 있습니다 — 모든 버튼은 단일 iframe/모달을 공유합니다.

## 체크아웃 트래킹

체크아웃 템플릿에 추가하세요:

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

다음 코드 **바로 뒤에** 배치하세요:

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

## 확인 트래킹

`app_custom_brand/.../checkout/confirmation/confirmation.isml`에 추가하세요:

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

다음 코드 **바로 뒤에** 배치하세요:

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