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

고객 경험을 향상시키고 싶으신가요?대화형 AI가 도와드릴 수 있습니다. ElevenLabs의 대화형 AI를 Webflow 웹사이트에 추가하면 방문자가 자연스러운 대화를 실제 팀원과 이야기하듯 나눌 수 있습니다.

이 가이드에서는 ElevenLabs 대화형 AI 위젯을 Webflow 웹사이트에 추가하고, 커스텀 HTML과 JavaScript로 위젯을 연동하는 과정을 단계별로 안내합니다.

시작 전 준비사항

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

1. Webflow 계정: Embed Element를 사용하려면 Core, Growth, Agency, Freelancer 워크스페이스 또는 사이트 플랜이 필요합니다.
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. Webflow 프로젝트를 Designer에서 엽니다.
2. 위젯을 표시할 페이지로 이동하세요.
3. Elements 패널에서 Embed Element를 원하는 위치로 드래그하세요.
4. Embed Element의 코드 편집기에 ElevenLabs 임베드 코드의 < div > 부분을 붙여넣으세요.
5. 저장 & 닫기를 클릭해 변경사항을 적용하세요.

참고: Embed Element는 Designer에서 위젯의 자리 표시자 역할을 합니다. 실제 위젯은 사이트를 퍼블리시해야만 보입니다.

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

위젯이 제대로 작동하려면 < script > 코드를 사이트 전체에 적용해야 합니다.

1. Webflow 대시보드에서 프로젝트 설정을 엽니다.
2. Custom Code 탭으로 이동하세요.
3. Footer Code 섹션에 < script > 코드를 붙여넣으세요. 이렇게 하면 위젯이 사용되는 모든 페이지에서 스크립트가 로드됩니다.
4. 변경사항 저장을 클릭하세요.

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를 컴포넌트로 저장하세요. 일관된 스타일과 손쉬운 관리가 가능합니다.

마무리 안내

ElevenLabs 대화형 AI 위젯을 Webflow에 연동하는 과정은 Embed Element와 Custom Code 기능 덕분에 간단합니다. 한 페이지 또는 전체 사이트에서 방문자 참여를 높이고 싶다면 위 단계들을 따라 시작해 보세요.

추가 도움이 필요하다면 언제든 ElevenLabs 고객지원 또는 Webflow 커뮤니티 포럼을 참고해 주세요.

아직 가입하지 않으셨다면, 회원가입 후 ElevenLabs AI 에이전트 플랫폼에서 바로 시작해 보세요.

자주 묻는 질문