> For the complete documentation index, see [llms.txt](https://salesmap.gitbook.io/sea/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://salesmap.gitbook.io/sea/setting-sea/sea-install.md).

# 홈페이지에 설치하기

SeA를 홈페이지에 설치하고, 실제 방문자와 대화를 시작할 수 있도록 설정하는 방법을 확인해보세요.

### 1. 설치 코드 준비하기

**설정 › SeA › 설치**에서 설치 코드를 확인하고 `복사`를 클릭합니다. 복사한 **스크립트 한 줄**을 웹사이트의 `<head>` 또는 `<body>` 태그 안에 추가하면 SeA가 홈페이지에 표시됩니다.

```jsx
<script src="<https://salesmap.kr/sdr-widget-v1-2.js>" data-code="019e005b-5794-755d-a457-48f8746841a5" async></script>
```

* **`data-code`**: 워크스페이스마다 다른 고유 코드입니다. 직접 입력하지 말고 **설정 › 설치**에서 `복사`한 코드를 그대로 사용하세요.
* **허용 도메인**: 같은 화면에서 SeA를 작동시킬 도메인을 지정합니다. 비워 두면 모든 도메인에서 작동합니다.
* **제외 페이지**: SeA를 표시하지 않을 페이지의 경로를 지정합니다.

### 2. Google Tag Manager로 설치하기

개발자가 홈페이지에 직접 코드를 추가하기 어렵다면 **Google Tag Manager(GTM)**&#xB97C; 이용해 설치할 수 있습니다.

{% stepper %}
{% step %}
[구글 태그 매니저](https://tagmanager.google.com/)에 접속합니다.
{% endstep %}

{% step %}
**태그** → `새로 만들기`를 클릭합니다.
{% endstep %}

{% step %}
태그 유형에서 **맞춤 HTML**을 선택합니다.
{% endstep %}

{% step %}

```jsx
<script>
  (function(){
    var s = document.createElement('script');
    s.src = '<https://salesmap.kr/sdr-widget-v1-2.js>';
    s.setAttribute('data-code', '내 코드 입력');
    s.async = true;
    document.body.appendChild(s);
  })();
</script>
```

위 설치 코드를 붙여넣습니다.
{% endstep %}

{% step %}
내 코드 입력 부분만 실제 내 코드로 교체합니다.

a. SeA 워크스페이스 - 설정 - 설치

b. 설치 코드 부분에서 data-code 뒤 019e005b-5794-755d-a457-48f8746841a5 형식 문자열만 복사

c. 내 코드 입력 부분만 복사해온 코드로 교체
{% endstep %}

{% step %}
고급 설정에서 태그 실행 옵션을 페이지당 한 번으로 설정합니다.
{% endstep %}

{% step %}
트리거를 새로 만들기로 추가합니다.
{% endstep %}

{% step %}
트리거 유형에서 All Pages(모든 페이지)를 선택합니다.
{% endstep %}

{% step %}
`저장` 후 `제출`로 배포합니다.
{% endstep %}
{% endstepper %}

### 3. 설치 없이 미리 테스트하기 (프록시 데모)

실제 홈페이지에 SeA를 설치하기 전에 **프록시 데모에서 SeA와 대화하며 미리 테스트**할 수 있습니다. 별도로 설치 코드를 추가하지 않아도 테스트할 홈페이지에 SeA를 띄워볼 수 있습니다.

{% stepper %}
{% step %}
[프록시 데모](https://sea-reverse-proxy.vercel.app)에 접속합니다.
{% endstep %}

{% step %}
**대상 사이트 URL**에 테스트할 홈페이지 주소를 입력합니다. (예: `example.com`)
{% endstep %}

{% step %}
**위젯 환경**은 `salesmap.kr`을 선택합니다.
{% endstep %}

{% step %}
**프록시 모드**는 `auto`를 선택합니다. (Wix 등 SPA 사이트는 `SPA 호환`을 선택합니다.)
{% endstep %}

{% step %}
**위젯 data-code**에 내 설치 코드의 `data-code` 값(`019…` 형식)을 입력합니다. (7-1 참고)
{% endstep %}

{% step %}
`실행`을 누르면 프록시된 홈페이지에서 SeA와 실제처럼 대화하며 테스트할 수 있습니다.
{% endstep %}
{% endstepper %}

프록시 데모에서 나눈 대화는 **수신함**에서 확인할 수 있습니다. 단, 실제 홈페이지에 SeA를 설치한 것이 아니므로 **웹 트래킹 데이터(방문 페이지·체류 시간·스크롤 깊이 등)는 수집되지 않습니다.** 방문자 활동 데이터까지 확인하려면 테스트 기간 동안 실제 홈페이지에 SeA를 설치해 주세요.