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

# 대시보드에서 웹 위젯 만들기

> Web Widgets 페이지에서 사이트용 클릭 투 토크 위젯을 설정하세요. API 호출은 필요하지 않습니다.

**Web Widgets** 페이지(`/dashboard/web-widgets`)에서 ThunderPhone의 삽입형 음성 위젯을 구동하는
게시 가능 키를 생성하고 관리합니다. 이 가이드의 [API 버전](/ko/guides/embed-web-widget)에서
cURL로 수행하는 모든 작업을 이 페이지에서는 양식으로 수행할 수 있으며, 임베드
코드도 생성해 줍니다.

## 위젯 만들기

<Steps>
  <Step title="새 위젯을 클릭하고 모드를 선택합니다">
    * **에이전트 모드** — 위젯은 드롭다운에서 선택한 하나의 에이전트를 항상 실행합니다.
      가장 간단한 설정입니다.
    * **웹훅 모드** — 위젯 세션마다 ThunderPhone이 웹훅 URL을 호출하고,
      서버는 해당 방문자에 대한 에이전트 구성을 반환합니다(페이지별 라우팅, 로그인한 사용자, 롤아웃).
      조직의 기본 웹훅을 사용하려면 URL을 비워 두세요. 새 URL을 입력하면
      조직 기본값으로도 설정할 수 있습니다.
  </Step>

  <Step title="허용 도메인을 나열합니다">
    게시 가능 키는 오리진으로 제한됩니다. 도메인을 하나 이상 지정해야 하며,
    위젯은 나열한 호스트 이름에서만 작동합니다. `*.example.com`과 같은
    서브도메인 와일드카드를 사용할 수 있습니다(서브도메인과 일치하며,
    루트 도메인과는 일치하지 않음). `*`와 같은 루트 와일드카드는 거부됩니다.
    `localhost` 및 `127.0.0.1`은 항상 허용되므로, 나열하지 않아도
    로컬 개발이 가능합니다.
  </Step>

  <Step title="이름을 지정하고 활성화한 후 생성합니다">
    **위젯 활성화** 토글은 키가 세션을 허용할지 제어합니다.
    비활성화된 위젯을 생성한 뒤 출시 시 활성화할 수 있습니다.
  </Step>
</Steps>

## 임베드 코드 가져오기

생성 직후 또는 각 행의 **임베드** 버튼을 통해 임베드
대화 상자에서 게시 가능 키가 채워진 즉시 붙여 넣을 수 있는 코드를
생성합니다.

* **React** — 번들러 앱용 `<ThunderPhoneWidget />` 스니펫입니다.
* **스크립트 태그** — 모든 사이트용 CDN `<script>` + 스타일시트 쌍입니다.

대화 상자에서는 제목, 기본 색상, 모서리 위치, 라이트/다크 테마 등
기본 모양 옵션도 미리 볼 수 있으며, 선택한 설정이 스니펫에 적용됩니다.
전체 prop 참조, 스타일링 훅 및 헤드리스 옵션은 [위젯 SDK 문서](/ko/widget/overview)를
참조하세요.

<Note>
  게시 가능 키(`pk_live_…`)는 공개하도록 설계되었으므로 프런트엔드 코드에
  포함해도 안전합니다. 언제든지 해당 행의 복사 버튼으로 키를 복사할 수 있습니다.
</Note>

## 목록에서 위젯 관리하기

각 행에서 바로 편집할 수 있습니다.

* **모드 / 에이전트** — 인라인 선택 메뉴로 에이전트 모드와 웹훅 모드 간에 전환하거나
  에이전트를 변경합니다.
* **도메인** — 칩으로 허용 도메인을 추가하거나 제거합니다.
* **활성화/비활성화** — 위젯별 스위치입니다. 비활성화된 위젯은 즉시
  세션 수락을 중지합니다.
* **조직으로 이전** — 소속된 다른 조직으로 위젯을 복사하거나 이동합니다
  (이동하면 여기에서 제거됩니다).
* **삭제** — 게시 가능 키를 폐기합니다. 모든 도메인에서 위젯이 즉시
  작동을 중지합니다. 이 작업은 되돌릴 수 없습니다.

위젯 세션은 전화 통화와 동일한 트랜스크립트, 녹음 및 평가 정보와 함께
[통화 기록](/ko/guides/review-calls)에 표시됩니다.

## 다음 단계

<CardGroup cols={2}>
  <Card title="위젯 SDK 참조" icon="window-maximize" href="/ko/widget/overview">
    React 컴포넌트, 헤드리스 훅 및 CDN 스크립트 세부 정보입니다.
  </Card>

  <Card title="웹훅 모드 라우팅" icon="bolt" href="/ko/guides/dynamic-call-config">
    서버에서 방문자별 에이전트 구성을 반환합니다.
  </Card>
</CardGroup>