삽입 가능한 음성 위젯

몇 줄의 코드로 모든 웹사이트에 음성 AI 에이전트를 추가하세요

ThunderPhone 임베더블 음성 위젯을 사용하면 웹사이트 방문자가 브라우저에서 직접 AI 에이전트와 대화할 수 있습니다. 전화 통화는 필요하지 않습니다 -- 사용자가 버튼을 클릭하면 ThunderPhone으로 구동되는 실시간 음성 대화가 시작됩니다.

이 위젯은 밝은 테마와 어두운 테마에 맞춰 조정되는 글래스모피즘 바 형태로 렌더링되며, 강조 색상과 위치를 맞춤 설정할 수 있습니다. @thunderphone/widget npm 패키지로 배포되며, 번들러를 사용하지 않는 환경에서는 CDN을 통해서도 이용할 수 있습니다.

사전 요구 사항#

위젯을 임베드하기 전에 ThunderPhone 대시보드에서 다음 세 단계를 완료합니다.

1. 웹 위젯 만들기

   대시보드에서 웹 위젯으로 이동하여 위젯을 만드십시오. 제공할 에이전트를 선택하십시오. 각 위젯에는 클라이언트 측 코드에 안전하게 포함할 수 있는 자체 공개 키(pk_live_...)가 있으며, 에이전트는 이 키로 결정됩니다.

2. 허용 도메인 구성

   동일한 위젯에서 위젯을 삽입할 도메인을 추가하십시오. 와일드카드가 지원됩니다(예: *.example.com). 이 목록은 다른 사이트에서 누군가 키를 복사해도 위젯이 작동하지 않도록 하지만, 브라우저 외부의 스크립트는 어떤 Origin 헤더든 전송할 수 있으므로 인증 수단은 아닙니다. 프로덕션에서는 localhost가 자동으로 허용되지 않습니다. 프로덕션 API를 대상으로 로컬 테스트하려면 목록에 추가하십시오.

3. 브라우저 재정의 선택

   페이지에서 language, voice 또는 context를 설정하는 경우 브라우저 재정의에서 각각을 켜십시오. 새 위젯은 어떤 재정의도 허용하지 않으며, 꺼진 설정이 포함된 세션 요청은 400 override_not_allowed 오류로 실패합니다. 브라우저 재정의를 참조하십시오.

빠른 시작#

패키지를 설치합니다.

npm install @thunderphone/widget

앱에 위젯을 추가합니다.

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
 
function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      theme="dark"
      primaryColor="#8b5cf6"
    />
  )
}

이것으로 완료됩니다. 사용자는 한 번의 클릭으로 AI 에이전트에 연결되는 글래스모피즘 통화 바를 보게 됩니다.

맞춤 설정#

위젯에는 모양을 설정하는 네 가지 prop이 있습니다.

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  primaryColor="#8b5cf6"
  title="Ask our AI"
/>

추가로 세 가지 prop은 외관이 아니라 세션을 맞춤 설정합니다. 통화가 시작되면 모두 세션 요청에 전달됩니다. 각 prop은 위젯의 게시 가능 키에서 브라우저 재정의로 허용된 경우에만 작동하며, 그렇지 않으면 세션 요청이 400 override_not_allowed 오류로 실패합니다.

전체 prop 표는 React 컴포넌트 참조를 확인하세요.

완전히 맞춤화된 UI가 필요한 경우 헤드리스 훅을 사용하여 자체 인터페이스를 구축하면서 음성 세션을 관리합니다. 이 훅은 오디오 반응형 시각화를 구축할 수 있도록 실시간 오디오 레벨을 제공합니다.

각 위젯 대화는 하나의 통화입니다. 조직의 동시 통화 한도에 포함됩니다(기본적으로 진행 중인 통화 20건이며, 전화 및 기타 통화와 공유됨). 또한 위젯에는 활성 세션 25개(또는 이보다 높은 경우 동시 통화 한도)의 제한이 있습니다. 두 제한 중 하나에 도달하면 통화가 종료될 때까지 새 대화를 시작할 수 없습니다.

통합 옵션#

스택에 맞는 통합 방식을 선택합니다.

스타일링#

위젯에는 theme prop으로 제어하는 기본 제공 라이트 및 다크 테마와 primaryColor prop으로 제어하는 강조 색상이 포함되어 있습니다. 더 세부적으로 사용자 지정하려면 CSS 사용자 정의 속성과 클래스를 재정의할 수 있습니다. 자세한 내용은 스타일링 가이드를 참조합니다.