Eleven v4를 소개합니다역대 가장 감성적인 모델, Eleven v4를 만나보세요.

사용하기
콘텐츠로 건너뛰기
로그인가입하기
영업팀 문의로그인

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

게시일
최종 업데이트

듣기이 글 오디오로 듣기

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

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

시작하기 전에

시작하기 전에 다음 사항을 준비했는지 확인하세요.

  1. Wix 프리미엄 계정: 맞춤 JavaScript 임베드는 프리미엄 요금제에서만 사용할 수 있습니다.
  2. ElevenLabs 계정: 대화형 AI 음성 에이전트를 만들려면 ElevenLabs 계정이 필요합니다. 여기에서 가입하세요.
  3. 개발자 모드가 활성화된 Wix 에디터 액세스: 사이트에 맞춤 코드를 추가하려면 개발자 모드가 필요합니다.

단계별 가이드

1단계: ElevenLabs 위젯 준비하기

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

2단계: Wix에서 개발자 모드 활성화하기

  1. 에디터에서 Wix 사이트를 여세요.
  2. 상단 메뉴에서 개발자 모드를 클릭하여 맞춤 코드 추가와 같은 고급 기능을 활성화하세요.

참고: 개발자 모드가 보이지 않으면 Wix ADI(Artificial Design Intelligence)가 아닌 전체 Wix 에디터를 사용 중인지 확인하세요.

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

  1. Wix 에디터에서 설정 > 맞춤 코드로 이동하세요.
  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 오디오로 창작하세요

영업팀 문의회원가입