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

ElevenLabs의 대화형 AI는 강력한 고객 지원 도구로, 참여도를 높이는 대화형 AI 기반 경험을 만들 수 있습니다. WordPress 웹사이트를 운영하고 있다면 ElevenLabs의 대화형 AI와 같은 동적 기능을 포함해 맞춤 HTML과 JavaScript를 쉽게 통합할 수 있습니다.

이 가이드에서는 특정 페이지에는 맞춤 HTML 블록을, 사이트 전체 기능에는 코드 삽입을 사용해 WordPress 사이트에 대화형 AI 위젯을 추가하는 방법을 안내합니다.

시작하기 전에

시작하기 전에 다음 사항을 확인하세요:

1. WordPress 요금제: WordPress.com 사용자가 맞춤 JavaScript를 추가하려면 비즈니스 또는 커머스 요금제가 필요합니다. 자체 호스팅 WordPress 사용자는 이러한 제한 없이 코드를 추가할 수 있습니다.
2. ElevenLabs 계정: ElevenLabs에서 대화형 AI 음성 에이전트를 구성하고 < script > 및 < div > 스니펫이 포함된 임베드 코드를 복사하세요.
3. 기본 WordPress 지식: 블록 추가, 페이지 편집 또는 플러그인 사용에 익숙하면 도움이 됩니다.

단계별 가이드

1단계: ElevenLabs 위젯 준비하기

1. ElevenLabs 계정에 로그인하세요.
2. 대화형 AI 섹션으로 이동하세요.
3. AI 에이전트를 구성하고 다음이 포함된 임베드 코드를 복사하세요:
4. • 위젯 기능을 불러오는 < script > 스니펫
   • 위젯이 표시될 위치를 정의하는 < div > 스니펫

2단계: 맞춤 HTML 블록을 사용해 특정 페이지에 위젯 추가하기

특정 페이지에 위젯을 표시하려면 WordPress의 맞춤 HTML 블록을 사용하세요.

1. WordPress 대시보드에 로그인하세요.
2. 페이지로 이동한 후 새 페이지를 만들거나 기존 페이지를 편집하세요.
3. 새 블록을 추가하려면 + 아이콘을 클릭하세요.
4. 블록 옵션에서 맞춤 HTML을 검색해 선택하세요.
5. ElevenLabs 임베드 코드의 < div > 스니펫을 블록에 붙여넣으세요.
6. 미리보기를 클릭해 위젯이 올바르게 렌더링되는지 확인하세요.
7. 변경 사항을 적용하려면 페이지를 발행하거나 업데이트하세요.

3단계: 플러그인 또는 테마 설정을 사용해 스크립트를 전역으로 추가하기

위젯이 제대로 작동하도록 < script > 스니펫을 전역으로 포함해야 합니다.

옵션 A: 플러그인 사용(개발자가 아닌 사용자에게 권장)

1. Header Footer Code Manager와 같은 플러그인을 설치하고 활성화하세요.
2. 플러그인 설정으로 이동해 새 코드 스니펫을 만드세요.
3. < script > 스니펫을 푸터 섹션에 붙여넣으세요.
4. 스니펫이 모든 페이지에서 실행되도록 설정하세요.
5. 변경 사항을 저장하세요.

옵션 B: 테마에 스크립트 직접 추가하기

1. WordPress 대시보드에서 외모 > 테마 편집기로 이동하세요.
2. 활성 테마의 footer.php 파일을 여세요.
3. 닫는 < /body > 태그 바로 앞에 < script > 스니펫을 붙여넣으세요.
4. 파일을 저장하세요.

4단계: 발행 및 테스트

1. 위젯을 추가한 페이지를 방문해 올바르게 표시되고 작동하는지 확인하세요.
2. 여러 기기와 브라우저에서 위젯을 테스트해 원활하게 작동하는지 확인하세요.

일반적인 문제 및 해결 방법

위젯을 실행하는 데 어려움이 있나요? 다음 팁이 도움이 될 수 있습니다. 

문제 1: 위젯이 표시되지 않음

• 원인: < script > 또는 < div > 스니펫이 없거나 잘못된 위치에 있습니다.
• 해결 방법: < script >가 전역으로 추가되었고 < div >가 페이지에 배치되었는지 다시 확인하세요.

문제 2: 위젯 정렬이 맞지 않음

• 원인: 블록 정렬 문제 또는 스타일 누락
• 해결 방법: WordPress의 블록 정렬 도구를 사용하거나 맞춤 CSS를 추가해 위젯을 올바르게 배치하세요.

문제 3: 플러그인 충돌

• 원인: 다른 플러그인이 JavaScript 실행을 방해합니다.
• 해결 방법: 플러그인을 하나씩 비활성화하여 충돌 원인을 파악하세요.

고급 팁

원하는 대로 위젯을 작동시키는 데 도움이 되는 다음 팁을 확인해 보세요. 

• 위젯 맞춤 설정: WordPress의 사용자 정의 > 추가 CSS 섹션에서 위젯 스타일을 지정해 사이트 디자인과 어울리도록 하세요.
• 기기별 테스트: 일관된 사용자 경험을 위해 데스크톱, 태블릿, 모바일 기기에서 위젯을 테스트하세요.
• 페이지별 위젯: 위젯을 특정 페이지에만 표시하려면 < script > 스니펫을 전역으로 추가하지 마세요. 대신 해당 페이지를 대상으로 하는 플러그인이나 블록에 포함하세요.

마무리

WordPress 웹사이트에 ElevenLabs 대화형 AI 위젯을 추가하면 AI 기반 상호작용으로 방문자의 참여를 유도할 수 있습니다. 단일 페이지에 임베드하든 전체 사이트에 적용하든, WordPress는 원활한 통합에 필요한 도구를 제공합니다.

여기에 설명된 단계를 따르고 구현을 철저히 테스트한 후 필요에 따라 조정하세요. 문제가 발생하면 ElevenLabs 고객 지원에 도움을 요청하세요.

아직 가입하지 않았다면 지금 가입하고 ElevenLabs Agents Platform을 시작해 보세요.