본문 바로가기
로그인회원가입
영업팀 문의로그인

Wix 웹사이트에 ElevenLabs 대화형 AI 위젯 추가하는 방법

게시일
최종 업데이트

듣기이 기사 오디오로 듣기

영업팀 문의
자세히 알아보기

고객 지원과 고객 참여를 높이기 위해 ElevenLabs의 대화형 AI를 Wix 웹사이트에 추가하고 싶으신가요? 제대로 찾아오셨습니다. 이 가이드에서는 전체 과정을 단계별로 안내해 드리며, 자주 발생하는 실수도 피할 수 있도록 도와드립니다.

시작하기 전에

시작하기 전에 다음을 준비하세요:

  1. Wix 프리미엄 계정: 맞춤 JavaScript 삽입은 프리미엄 요금제에서만 가능합니다.
  2. ElevenLabs 계정: 대화형 AI 음성 에이전트. 여기에서 가입하기.
  3. Dev Mode가 활성화된 Wix Editor 접근 권한: 사이트에 맞춤 코드를 추가하려면 Dev Mode가 필요합니다.

단계별 가이드

1단계: ElevenLabs 위젯 준비하기

  1. ElevenLabs 계정에 로그인하세요.
  2. 대화형 AI 섹션으로 이동하세요.
  3. 대화형 에이전트를 설정하고 제공된 JavaScript 임베드 코드를 복사하세요.

2단계: Wix에서 Dev Mode 활성화하기

  1. Wix 사이트를 에디터에서 엽니다.
  2. 상단 메뉴에서 Dev Mode를 클릭해 맞춤 코드 추가 등 고급 기능을 활성화하세요.

참고: Dev Mode가 보이지 않는다면 Wix ADI(인공지능 디자인)가 아닌 전체 Wix Editor를 사용 중인지 확인하세요.

3단계: JavaScript 임베드 코드 추가하기

  1. Wix Editor에서 설정 > 맞춤 코드로 이동하세요.
  2. + 맞춤 코드 추가를 클릭하세요.
  3. 제공된 입력란에 ElevenLabs JavaScript 코드를 붙여넣으세요.
  4. 코드 적용 위치에서 모든 페이지(또는 위젯을 적용할 특정 페이지)를 선택하세요.
  5. 변경사항을 저장하고 사이트를 게시하세요.

자주 발생하는 문제 및 해결 방법

Wix 웹사이트에 대화형 AI 위젯을 추가하다가 문제가 발생했나요? 아래 간단한 단계로 문제를 해결해보세요.

문제 1: 위젯이 연결이 끊기거나 로드되지 않음

  • 원인: Allowlist 설정 오류 또는 무료 Wix 요금제 사용
  • 해결 방법: 사이트 URL이 Allowlist에서 제거되었거나 ElevenLabs 대시보드에서 올바르게 설정되어 있는지 확인하세요.

문제 2: JavaScript가 작동하지 않음

  • 원인: JavaScript 코드가 제대로 추가되지 않음
  • 해결 방법: JavaScript가 맞춤 코드.

문제 3: 무료 Wix 요금제

  • 원인: 무료 Wix 요금제에서는 맞춤 JavaScript 삽입이 지원되지 않습니다.
  • 해결 방법: Wix 프리미엄 요금제로 업그레이드하세요.

고급 팁

웹사이트 방문자에게 최고의 경험을 제공하고 싶다면, 아래 고급 팁도 참고해보세요.

Allowlist 조정하기

코드를 삽입했는데도 위젯이 작동하지 않는다면 다음 단계를 따라보세요:

  1. ElevenLabs 계정에 로그인하세요.
  2. 대화형 AI 에이전트의 Allowlist 설정으로 이동하세요.
  3. 웹사이트 도메인이 올바르게 추가되어 있는지 확인하세요. 문제가 계속된다면 도메인을 Allowlist에서 제거한 후 다시 테스트해보세요.

실제 도메인에서 테스트하기

Wix 미리보기 모드에서는 위젯이 제대로 작동하지 않을 수 있습니다. 사이트를 게시한 후 실제 도메인에서 정상 작동하는지 확인하세요.

크로스 브라우저 호환성 테스트

위젯이 실제로 적용된 후에는 Chrome, Firefox, Edge, Safari 등 다양한 브라우저에서 테스트해보세요. 브라우저마다 JavaScript 처리 방식이 달라 일부 기능이 다르게 동작할 수 있습니다.

  1. 각 브라우저에서 웹사이트를 열어보세요.
  2. 위젯과 상호작용하며 반응성을 확인하세요.
  3. 디자인이 깨지거나 기능에 오류가 있는지 확인하세요. 문제가 있다면 JavaScript 코드를 다시 확인하거나 ElevenLabs 지원팀에 문의하세요.

모바일 반응성

많은 사용자가 스마트폰이나 태블릿으로 웹사이트에 접속하므로, 모바일 기기에서도 위젯이 잘 작동하는지 확인하세요.

  1. Wix의 모바일 에디터로 사이트의 모바일 레이아웃을 미리보기 하세요.
  2. 실제 모바일 기기에서 위젯을 테스트해 기능과 사용 편의성을 확인하세요.
  3. 요소가 겹치거나 레이아웃에 문제가 있는지 확인하세요. 필요하다면 Wix의 모바일 디자인 도구로 위치와 크기를 조정하세요.

JavaScript 디버깅 팁

위젯이 예상대로 작동하지 않는다면 브라우저 개발자 도구를 활용해 문제를 확인할 수 있습니다.

  1. 브라우저(Chrome 권장)에서 사이트를 여세요.
  2. 페이지 아무 곳이나 우클릭 후 '검사'를 선택해 DevTools를 여세요.
  3. Console 탭으로 이동해 위젯 관련 오류 메시지가 있는지 확인하세요.
  4. 오류가 보이면 JavaScript 임베드 코드를 다시 확인하고, 필요한 모든 URL이 Allowlist에 추가되어 있는지 점검하세요. 이 방법으로 누락된 의존성이나 위젯 작동을 방해하는 다른 문제도 확인할 수 있습니다.

마무리 안내

Wix에 ElevenLabs 대화형 AI 위젯을 연동하려면 꼼꼼한 설정이 필요하지만, 안내된 단계를 따르면 금방 적용할 수 있습니다. Wix 프리미엄 요금제를 준비하고, 위의 절차를 따라가며, 문제가 생기면 자주 묻는 문제 해결법도 참고하세요. 추가로 문제가 있다면 언제든 ElevenLabs 지원팀에 문의해 주세요.

또는 아직 가입하지 않았다면, 지금 가입하고 대화형 AI 에이전트 플랫폼을 바로 이용해보세요.

유사한 기사

최고 품질의 AI 오디오로 창작하세요

영업팀 문의회원가입