ElevenLabs Conversational AI를 Framer 웹사이트에 추가하는 방법
·2026.04.10 14:58
ElevenLabs의 Conversational AI 위젯을 Framer 웹사이트에 연동하여 대화형 AI 기능을 구현하는 방법을 안내한다.
ElevenLabs의 Conversational AI 위젯을 사용하면 Framer 웹사이트에 대화형 AI 기능을 추가하여 고객 참여를 높이거나 고객 지원을 강화할 수 있다.
연동을 위해서는 Framer 유료 플랜(커스텀 코드 기능 필요)과 설정이 완료된 ElevenLabs 계정이 필요하다. 구현 과정은 다음과 같다.
- 위젯 준비: ElevenLabs에서 AI 에이전트를 설정한 후
<script>와<div>가 포함된 임베드 코드를 복사한다. - 스크립트 등록: Framer 프로젝트 설정의 Custom Code 섹션 내 End of
<body>tag 필드에<script>코드를 붙여넣는다. - 위젯 배치: 원하는 페이지에 Embed Element를 추가하고, 타입을 HTML로 변경한 뒤
<div>코드를 입력한다. - 게시 및 확인: 변경 사항을 Publish하여 실제 웹사이트에서 작동을 확인한다. (커스텀 코드는 Framer 미리보기 모드에서 표시되지 않는다.)
위젯이 표시되지 않는다면 스크립트나 <div> 코드가 올바른 위치에 있는지 확인해야 하며, 크기나 위치가 어긋날 경우 Embed Element의 설정을 조정해야 한다.
이 요약은 원문 이해를 돕기 위한 큐레이션입니다. 저작권은 원저작자에게 있으며, 정확한 내용과 맥락은 원문을 확인하세요.
요약 오류, 출처 표기 문제, 삭제 요청은 문의 · 건의로 알려주세요.