---
title: "대시보드에서 웹 위젯 만들기"
description: "Web Widgets 페이지에서 사이트용 클릭 투 토크 위젯을 설정하세요. API 호출은 필요하지 않습니다."
---

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

## 위젯 만들기

<Steps>
  <Step title="새 위젯을 클릭하고 모드를 선택합니다">
    - **에이전트 모드** — 위젯은 드롭다운에서 선택한 하나의 에이전트를 항상 실행합니다.
      가장 간단한 설정입니다.
    - **Webhook 모드** — 위젯 세션마다 ThunderPhone이
      웹훅 URL을 호출하고 서버가 해당 방문자의 에이전트 구성을
      반환합니다(페이지별 라우팅, 로그인한 사용자, 롤아웃).
      조직의 기본 웹훅을 사용하려면 URL을 비워 두십시오.
      새 URL을 입력하면 조직 기본값으로도 설정할 수 있습니다.
  </Step>
  <Step title="허용된 도메인을 나열합니다">
    하나 이상의 도메인이 필요하며, 브라우저는 나열한 호스트 이름에서만
    세션을 시작할 수 있습니다. `*.example.com`과 같은 하위 도메인 와일드카드는
    허용됩니다(하위 도메인과 일치하며, 루트 도메인과는 일치하지 않음).
    `*`와 같은 단독 와일드카드는 거부됩니다. 이 목록은 다른 사이트에서 키를
    임의로 재사용하는 것을 방지하지만 인증 수단은 아닙니다. 브라우저 외부의
    스크립트는 어떤 `Origin` 헤더든 전송할 수 있습니다. 프로덕션 환경에서는
    `localhost`가 자동으로 허용되지 않습니다. 프로덕션 API를 대상으로 로컬에서
    테스트하려면 목록에 추가하십시오.
  </Step>
  <Step title="브라우저 재정의를 선택합니다">
    페이지에서 전송하는 각 세션 설정을 선택하십시오. **페이지 컨텍스트**,
    **변수**, **음성**, **언어**입니다. 새 위젯은 어떤 설정도 허용하지 않으며,
    비활성화된 설정을 포함한 세션 요청은 `400` 오류로 실패합니다.
    키는 공개되므로 사용하는 항목만 허용하십시오. 자세한 내용은
    [브라우저 재정의](/ko/guides/embed-web-widget)를 참조하십시오.
  </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>