ElevenLabs의 대화형 AI는 강력한 고객 지원 도구로, AI 기반의 인터랙티브한 경험을 만들어 참여도를 높일 수 있습니다. WordPress 웹사이트가 있다면 ElevenLabs의 대화형 AI처럼 동적인 기능을 포함한 커스텀 HTML과 JavaScript를 쉽게 연동할 수 있습니다.
이 가이드에서는 특정 페이지에 커스텀 HTML 블록을 사용하거나 전체 사이트에 코드 인젝션을 적용해 대화형 AI 위젯을 추가하는 방법을 알려드립니다.
시작하기 전에
시작하기 전에 다음을 준비하세요:
- WordPress 플랜: WordPress.com 사용자는 커스텀 JavaScript를 추가하려면 비즈니스 또는 커머스 플랜이 필요합니다. 자체 호스팅 WordPress 사용자는 이런 제한 없이 코드를 추가할 수 있습니다.
- ElevenLabs 계정: ElevenLabs에서 대화형 AI 음성 에이전트를 설정하고, < script >와 < div > 코드가 포함된 임베드 코드를 복사하세요.
- 기본적인 WordPress 사용법: 블록 추가, 페이지 편집, 플러그인 사용에 익숙하다면 도움이 됩니다.
단계별 가이드
1단계: ElevenLabs 위젯 준비하기
- ElevenLabs 계정에 로그인하세요.
- 대화형 AI 섹션으로 이동하세요.
- AI 에이전트를 설정하고, 다음이 포함된 임베드 코드를 복사하세요:
- 위젯 기능을 불러오는 < script > 코드
- 위젯이 표시될 위치를 지정하는 < div > 코드
2단계: 커스텀 HTML 블록으로 특정 페이지에 위젯 추가하기
특정 페이지에 위젯을 표시하려면 WordPress의 커스텀 HTML 블록을 사용하세요.
- WordPress 대시보드에 로그인하세요.
- 페이지로 이동해 새 페이지를 만들거나 기존 페이지를 편집하세요.
- + 아이콘을 클릭해 새 블록을 추가하세요.
- 블록 옵션에서 커스텀 HTML을 검색해 선택하세요.
- ElevenLabs 임베드 코드의 < div > 부분을 블록에 붙여넣으세요.
- 미리보기를 클릭해 위젯이 제대로 표시되는지 확인하세요.
- 페이지를 발행하거나 업데이트해 변경사항을 적용하세요.
3단계: 플러그인 또는 테마 설정으로 스크립트 전체 적용하기
위젯이 제대로 작동하려면 < script > 코드를 전체 사이트에 적용해야 합니다.
옵션 A: 플러그인 사용 (개발자가 아닌 분께 추천)
- Header Footer Code Manager 같은 플러그인을 설치하고 활성화하세요.
- 플러그인 설정으로 이동해 새 코드 스니펫을 만드세요.
- < script > 코드를 Footer 섹션에 붙여넣으세요.
- 스니펫을 모든 페이지(All Pages)에서 실행되도록 설정하세요.
- 변경사항을 저장하세요.
옵션 B: 테마에 직접 스크립트 추가하기
- WordPress 대시보드에서 디자인 > 테마 편집기로 이동하세요.
- 사용 중인 테마의 footer.php 파일을 여세요.
- 닫는 < /body > 태그 바로 앞에 < script > 코드를 붙여넣으세요.
- 파일을 저장하세요.
4단계: 발행 및 테스트
- 위젯을 추가한 페이지에 방문해 정상적으로 표시되고 작동하는지 확인하세요.
- 여러 기기와 브라우저에서 위젯을 테스트해 원활하게 동작하는지 확인하세요.
자주 발생하는 문제 및 해결 방법
위젯이 잘 작동하지 않나요? 아래 팁을 참고해보세요.
문제 1: 위젯이 표시되지 않음
- 원인: < script > 또는 < div > 코드가 누락되었거나 잘못된 위치에 있음.
- 해결 방법: < script >가 전체에 적용되었는지, < div >가 해당 페이지에 있는지 다시 확인하세요.
문제 2: 위젯 정렬이 맞지 않음
- 원인: 블록 정렬 문제 또는 스타일 누락.
- 해결 방법: WordPress의 블록 정렬 도구를 사용하거나 커스텀 CSS로 위젯 위치를 조정하세요.
문제 3: 플러그인 충돌
- 원인: 다른 플러그인이 JavaScript 실행을 방해함.
- 해결 방법: 플러그인을 하나씩 비활성화해 충돌 원인을 찾아보세요.
고급 팁
위젯을 원하는 대로 작동시키는 데 도움이 되는 추가 팁을 확인하세요.
- 위젯 커스터마이징: WordPress의 디자인 > 추가 CSS에서 위젯 스타일을 변경해 사이트 디자인과 맞춰보세요.
- 기기별 테스트: 데스크톱, 태블릿, 모바일 등 다양한 기기에서 위젯을 테스트해 일관된 사용자 경험을 제공하세요.
- 페이지별 위젯 적용: 특정 페이지만 위젯을 표시하고 싶다면 < script > 코드를 전체에 적용하지 말고, 해당 페이지를 타겟팅하는 플러그인이나 블록 내에 포함하세요.
마무리 안내
WordPress 웹사이트에 ElevenLabs 대화형 AI 위젯을 추가하면 AI 기반 상호작용으로 방문자와 효과적으로 소통할 수 있습니다. 한 페이지만 적용하거나 전체 사이트에 적용하든, WordPress는 손쉬운 연동을 위한 다양한 도구를 제공합니다.
여기 안내된 단계를 따라 구현을 꼼꼼히 테스트하고, 필요에 따라 조정하세요. 문제가 발생하면 언제든 ElevenLabs 고객지원에 문의해 주세요.
또는 아직 계정이 없다면, 가입하기를 통해 ElevenLabs 에이전트 플랫폼을(를) 지금 바로 시작해보세요.