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

고객 경험을 개선하고 싶으신가요? 대화형 AI가 도움이 될 수 있습니다. Webflow 웹사이트에 ElevenLabs의 대화형 AI를 추가하면 방문자는 자연스럽게 팀원과 실제로 대화하는 듯한 경험을 할 수 있습니다. 

이 가이드에서는 맞춤 HTML과 JavaScript를 사용해 ElevenLabs 대화형 AI 위젯을 Webflow 웹사이트에 추가하고 통합하는 방법을 안내합니다.

시작하기 전에

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

1. Webflow 계정: Embed Element에 액세스하려면 활성 상태의 Core, Growth, Agency 또는 Freelancer Workspace나 Site Plan이 필요합니다.
2. ElevenLabs 계정: ElevenLabs에서 대화형 AI 음성 에이전트를 구성하고 제공된 임베드 코드(< script > 및 < div > 스니펫 포함)를 복사하세요.
3. Webflow Designer 사용 경험: Webflow에서 Embed Element를 추가하고 편집하는 기본 방법을 알고 있으면 도움이 됩니다.

단계별 가이드

1단계: ElevenLabs 위젯 준비

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

2단계: Webflow 페이지에 위젯 추가

특정 페이지에 위젯을 표시하려면 Embed Element를 사용하세요.

1. Designer에서 Webflow 프로젝트를 여세요.
2. 위젯을 표시할 페이지로 이동하세요.
3. Elements Panel에서 Embed Element를 페이지의 원하는 위치로 드래그하세요.
4. Embed Element의 코드 편집기에 ElevenLabs 임베드 코드의 < div > 스니펫을 붙여넣으세요.
5. 변경 사항을 적용하려면 Save & Close를 클릭하세요.

참고: Embed Element는 Designer에서 위젯의 자리표시자 역할을 합니다. 실제 위젯은 사이트를 게시한 후에만 렌더링됩니다.

3단계: 스크립트 전역 추가

위젯이 정상적으로 작동하도록 사이트 전체에 < script > 스니펫을 포함해야 합니다.

1. Webflow Dashboard로 이동해 Project Settings를 여세요.
2. Custom Code 탭으로 이동하세요.
3. Footer Code 섹션에 < script > 스니펫을 붙여넣으세요. 이렇게 하면 위젯이 사용되는 모든 페이지에서 스크립트가 로드됩니다.
4. Save Changes를 클릭하세요.

4단계: 게시 및 테스트

1. 사이트를 Webflow의 스테이징 도메인 또는 사용자 지정 도메인에 게시하세요.
2. 브라우저에서 사이트를 열어 위젯이 표시되고 예상대로 작동하는지 확인하세요.

중요: 맞춤 코드는 Webflow Designer에서 렌더링되지 않습니다. 실제 위젯을 보려면 사이트를 게시해야 합니다.

일반적인 문제 및 문제 해결

통합 설정에 문제가 있나요? 걱정하지 마세요. 아래 팁이 도움이 될 것입니다.

1. 위젯이 표시되지 않음

• 원인: < script > 또는 < div > 스니펫이 없거나 잘못된 위치에 있습니다.
• 해결 방법: < script > 스니펫이 Footer Code 섹션에 있고 < div > 스니펫이 Embed Element에 올바르게 배치되었는지 확인하세요.

2. 위젯 정렬 문제

• 원인: Embed Element의 위치 또는 스타일이 올바르지 않습니다.
• 해결 방법: Webflow의 Style Panel을 사용해 Embed Element의 크기와 정렬을 조정하세요.

3. 오류

• 원인: 다른 스크립트와의 충돌 또는 브라우저 제한입니다.
• 해결 방법: 브라우저의 개발자 콘솔을 사용해 JavaScript 오류를 식별하고 수정하세요.

고급 팁

위젯을 맞춤 설정하거나 다양한 기기에서 테스트하거나 여러 페이지에서 재사용하려면 다음 내용을 확인하세요.

• 위젯 맞춤 설정: Webflow의 Style Panel 또는 맞춤 CSS를 사용해 크기, 정렬, 색상 등 위젯의 모양을 조정하세요.
• 다양한 기기에서 테스트: Webflow의 반응형 디자인 도구를 사용해 데스크톱, 태블릿, 모바일 기기에서 위젯이 원활하게 작동하는지 확인하세요.
• 위젯 재사용: 여러 페이지에서 위젯을 사용할 계획이라면 Embed Element를 Component로 저장하세요. 일관된 스타일을 유지하고 더 쉽게 관리할 수 있습니다.

마무리

Webflow의 Embed Element 및 Custom Code 기능을 활용하면 ElevenLabs 대화형 AI 위젯을 간편하게 통합할 수 있습니다. 단일 페이지든 전체 사이트든 참여도를 높이고 싶다면 위 단계를 따라 시작해 보세요.

추가 지원이 필요하면 ElevenLabs 고객 지원팀에 문의하거나 Webflow 커뮤니티 포럼에서 추가 안내를 확인하세요. 

아직 가입하지 않았다면 오늘 가입하고 ElevenLabs AI 에이전트 플랫폼을 통해 시작해 보세요. 

자주 묻는 질문