> For the complete documentation index, see [llms.txt](https://docs.salesmap.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.salesmap.kr/ai-sdr-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를 설치해 주세요.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.salesmap.kr/ai-sdr-sea/setting-sea/sea-install.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
