AI BriefingElevenLabs 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의 설정을 조정해야 한다.
이 한국어 요약은 AI가 자동으로 만들었습니다. 원문의 주장과 맥락은 원문에서 확인해 주세요. 저작권은 원저작자에게 있습니다.