Webflow 웹사이트에 ElevenLabs Conversational AI 통합하기

ElevenLabs의 Conversational AI를 Webflow 웹사이트에 통합하면 방문객이 실제 팀원과 대화하는 것처럼 자연스러운 대화를 나눌 수 있습니다. 이 가이드는 HTML과 JavaScript를 사용하여 위젯을 통합하는 과정을 단계별로 설명합니다.

통합을 위해서는 Embed Element 접근 권한이 있는 Webflow 계정(Core, Growth, Agency, Freelancer 또는 Site Plan 보유)과 설정이 완료된 ElevenLabs AI 보이스 에이전트가 필요합니다.

통합 단계:

• 위젯 준비: ElevenLabs 계정에서 기능을 로드하는 <script> 스니펫과 위젯 위치를 정의하는 <div> 스니펫을 복사합니다.
• Webflow 페이지 설정: Designer에서 Embed Element를 원하는 위치에 배치하고 <div> 스니펫을 붙여넣습니다.
• 스크립트 전역 적용: Project Settings의 Custom Code 탭 내 Footer Code 섹션에 <script> 스니펫을 붙여넣어 사이트 전체에서 작동하도록 합니다.
• 게시 및 확인: 커스텀 코드는 Designer에서 직접 보이지 않으므로, 사이트를 Publish한 후 브라우저에서 테스트해야 합니다.

위젯의 크기나 색상을 변경하려면 Webflow의 Style Panel이나 Custom CSS를 사용하며, 여러 페이지에서 동일한 위젯을 사용하려면 Component로 저장하여 관리하는 것이 효율적입니다.