Bubble에 Asyntai AI 챗봇을 추가하는 방법

Bubble 앱을 위한 단계별 가이드

임베드 코드 받기

1단계: 임베드 코드 가져오기

먼저 Asyntai 대시보드로 이동하여 "임베드 코드" 섹션까지 아래로 스크롤하십시오. 다음과 같은 형태의 고유 임베드 코드를 복사하십시오:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

참고: 위의 코드는 예시일 뿐입니다. 개인 위젯 ID가 포함된 고유한 임베드 코드를 대시보드에서 복사해야 합니다.

2단계: 앱 설정 사용 (권장)

Bubble에는 앱 설정을 통해 커스텀 스크립트를 추가하는 기본 방법이 있습니다:

  1. Bubble 앱 편집기에 로그인하세요
  2. 왼쪽 사이드바에서 Settings로 이동하세요
  3. "Web App" 탭을 클릭하세요
  4. "Advanced Settings"까지 아래로 스크롤하세요
  5. "Custom headers and body" 섹션을 찾으세요
  6. "Script in body" 필드에 Asyntai 삽입 코드를 붙여넣으세요
  7. 앱을 배포하세요

팁: body script 필드에 코드를 추가하면 Bubble 앱의 모든 페이지에서 로드되며, 이는 채팅 위젯에 권장되는 방법입니다. 이 기능은 무료 플랜을 포함한 모든 Bubble 플랜에서 사용할 수 있습니다.

대안: HTML 요소 사용

특정 페이지에만 챗봇을 추가하려는 경우:

  1. Bubble 편집기에서 챗봇을 원하는 페이지를 여세요
  2. 페이지에 HTML 요소를 추가하세요
  3. 요소에 Asyntai 삽입 코드를 붙여넣으세요
  4. 앱을 배포하세요

참고: 앱 설정 방법은 전체 앱에 챗봇을 적용하므로 권장됩니다. HTML 요소 방법은 요소를 배치한 특정 페이지에만 챗봇을 추가합니다.

3단계: 설치 확인

앱을 배포한 후, 새 브라우저 탭이나 시크릿 창에서 Bubble 사이트를 방문하세요. 오른쪽 하단에 채팅 위젯 버튼이 표시되어야 합니다. 클릭하여 올바르게 열리고 작동하는지 확인하세요.

위젯이 보이지 않나요? 코드를 추가한 후 앱을 배포했는지 확인하세요. 브라우저 캐시를 지우거나 시크릿 창에서 확인해 보세요. 개발 모드에서 테스트하는 경우, 앱의 라이브 버전도 확인하세요.