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

ElevenLabs 대화형 AI 위젯을 사용하면 Framer 웹사이트에 AI 기반의 대화 기능을 추가할 수 있습니다. 고객 참여도를 높이거나 고객 참여 또는 고객 지원 강화 등 다양한 목적에 활용할 수 있습니다.

이 가이드에서는 Framer 웹사이트에 위젯을 추가하는 방법을 단계별로 안내합니다. 사이트 전체 또는 특정 페이지에 위젯을 설정하고, 자주 발생하는 문제를 해결하는 방법도 배울 수 있습니다.

시작 전 준비사항

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

1. Framer 계정: 커스텀 코드를 추가할 수 있는 Framer 프로젝트 접근 권한(유료 플랜에서 제공)
2. ElevenLabs 계정: 대화형 AI 에이전트를 설정하고 임베드 코드(< script > 및 < div > 코드 포함)를 복사
3. Framer 사용 경험: Framer 사이트 설정 및 임베드 요소 기본 이해

단계별 가이드

1단계: ElevenLabs 위젯 준비하기

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

2단계: Framer 사이트 설정에 스크립트 추가하기

1. Framer 프로젝트를 엽니다.
2. 오른쪽 상단에서 프로젝트 설정을 클릭하세요.
3. 일반 탭으로 이동한 후, 아래로 스크롤하여 커스텀 코드 섹션을 찾으세요.
4. ElevenLabs 임베드 코드에서 < script > 코드를 복사해 < body > 태그 끝 부분에 붙여넣으세요.
5. 변경 사항을 저장하세요. 이 단계는 사이트에 필요한 스크립트가 정상적으로 로드되도록 합니다.

3단계: 특정 페이지에 위젯 추가하기

1. Framer 프로젝트에서 위젯을 표시할 페이지로 이동하세요.
2. 삽입 메뉴의 유틸리티 섹션에서 임베드 요소를 추가하세요.
3. 캔버스에서 임베드 요소를 선택해 설정을 엽니다.
4. 타입을 HTML로 변경하세요.
5. ElevenLabs 임베드 코드에서 < div > 코드를 복사해 HTML 필드에 붙여넣으세요.
6. 필요에 따라 캔버스에서 임베드 요소의 위치와 크기를 조정하세요.

4단계: 게시 및 테스트

1. 게시(Publish)를 클릭해 변경 사항을 적용하세요.
2. 브라우저에서 웹사이트를 열어 위젯이 정상적으로 표시되고 작동하는지 확인하세요.
3. • 참고: 커스텀 코드는 Framer 미리보기(Preview) 모드에서는 보이지 않으며, 실제로 게시해야 확인할 수 있습니다.

자주 발생하는 문제 및 해결 방법

통합이 잘 작동하지 않아도 걱정하지 마세요. 아래의 문제 해결 팁을 참고하세요.

문제 1: 위젯이 표시되지 않음

• 원인: < script > 또는 < div > 코드가 누락되었거나 잘못된 위치에 있음
• 해결 방법: < script > 코드는 사이트 설정의 < body > 태그 끝 부분에, < div > 코드는 임베드 요소에 각각 추가되어 있는지 확인하세요.

문제 2: 위젯이 일부만 보임

• 원인: 임베드 요소의 크기나 위치가 올바르지 않음
• 해결 방법: Framer 에디터에서 임베드 요소의 크기와 정렬을 조정하세요.

문제 3: 스크립트 오류

• 원인: 스크립트 충돌 또는 외부 리소스 차단
• 해결 방법: 브라우저 콘솔에서 JavaScript 오류를 확인하세요. Framer가 외부 스크립트 로드를 허용하는지 확인하세요.

고급 팁

더 다양한 커스터마이징을 원한다면 아래 팁을 참고하세요.

• 위젯 커스터마이징: 커스텀 CSS를 사용해 위젯을 스타일링하고 웹사이트 디자인과 자연스럽게 어울리도록 할 수 있습니다.
• 기기별 테스트: Framer의 반응형 디자인 도구를 활용하면 모바일, 태블릿, 데스크톱 등 다양한 화면에서 위젯의 크기와 동작을 쉽게 테스트할 수 있습니다.
• 특정 페이지에만 위젯 추가하기: 특정 페이지만 위젯을 표시하려면 해당 페이지의 임베드 요소에 < div > 코드를 추가하고, < script > 코드는 사이트 설정에 반드시 포함되어야 합니다.

마무리 안내

이 가이드를 따라 하면 Framer 사이트에 AI 기반의 역동적인 상호작용을 손쉽게 추가할 수 있습니다. 변경 사항을 게시하고, 설정을 테스트한 뒤, 대화형 AI로 방문자와 소통을 시작해보세요. 추가 지원이 필요하면 ElevenLabs 고객지원.

가입하기 - AI 음성 에이전트를 지금 바로 시작해보세요.