Eleven v4를 소개합니다역대 가장 감성적인 모델, Eleven v4를 만나보세요.

사용하기
콘텐츠로 건너뛰기
로그인가입하기
영업팀 문의로그인

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

게시일
최종 업데이트

듣기이 글 오디오로 듣기

영업팀 문의
자세히 알아보기

ElevenLabs 대화형 AI 위젯을 사용하면 Framer 웹사이트에 인터랙티브한 AI 기반 대화를 추가할 수 있습니다. 고객 참여를 높이거나 고객 지원을 강화하려는 경우, 대화형 AI가 도움이 됩니다. 

이 가이드에서는 Framer 웹사이트에 위젯을 추가하는 방법을 단계별로 안내합니다. 사이트 전체 또는 특정 페이지용 위젯을 구성하고 일반적인 문제를 해결하는 방법을 알아보세요.

시작하기 전에

시작하기 전에 다음 사항을 준비했는지 확인하세요.

  1. Framer 계정: 사용자 지정 코드를 추가할 수 있는 Framer 프로젝트에 접근할 수 있어야 합니다(유료 플랜에서 제공).
  2. ElevenLabs 계정: 대화형 AI 에이전트를 구성하고 임베드 코드(< script > 및 < div > 스니펫 포함)를 복사하세요.
  3. Framer 사용 경험: Framer의 사이트 설정 및 임베드 엘리먼트에 대한 기본적인 이해

단계별 가이드

1단계: ElevenLabs 위젯 준비하기

  1. ElevenLabs 계정에 로그인하세요.
  2. 대화형 AI 섹션으로 이동하세요.
  3. AI 에이전트를 구성하고 다음이 포함된 제공된 임베드 코드를 복사하세요.
    • 위젯 기능을 로드하는 < 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. 게시를 클릭해 변경 사항을 적용하세요.
  2. 브라우저에서 웹사이트를 열어 위젯이 표시되고 올바르게 작동하는지 확인하세요.
    • 참고: 사용자 지정 코드는 Framer의 미리보기 모드에서는 표시되지 않으며, 게시해야 확인할 수 있습니다.

일반적인 문제 및 해결 방법

통합이 제대로 작동하지 않아도 걱정하지 마세요. 아래 문제 해결 팁을 확인해 보세요. 

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

  • 원인: < script > 또는 < div > 스니펫이 누락되었거나 잘못된 위치에 있습니다.
  • 해결 방법: < script > 스니펫이 사이트 설정의 < body > 태그 끝 필드에 추가되어 있고 < div > 스니펫이 임베드 엘리먼트에 있는지 확인하세요.

문제 2: 위젯이 일부만 표시됨

  • 원인: 임베드 엘리먼트의 크기 또는 위치가 올바르지 않습니다.
  • 해결 방법: Framer 에디터에서 임베드 엘리먼트의 크기와 정렬을 조정하세요.

문제 3: 스크립트 오류

  • 원인: 충돌하는 스크립트 또는 차단된 외부 리소스가 있습니다.
  • 해결 방법: 브라우저 콘솔을 열어 JavaScript 오류를 확인하세요. Framer에 외부 스크립트를 로드할 권한이 있는지도 확인하세요.

고급 팁

더 고급 사용자 지정 옵션을 찾고 계신가요? 다음 팁이 도움이 될 것입니다. 

  • 위젯 사용자 지정: 사용자 지정 CSS를 사용해 위젯 스타일을 지정하고 웹사이트 디자인과 자연스럽게 통합하세요.
  • 기기 전반에서 테스트: Framer의 반응형 디자인 도구를 사용하면 모바일, 태블릿, 데스크톱 화면에서 위젯을 쉽게 테스트하여 적절히 크기가 조정되는지 확인할 수 있습니다.
  • 특정 페이지에 위젯 추가: 특정 페이지에만 위젯을 포함하려면 원하는 페이지의 임베드 엘리먼트에 < div > 스니펫을 추가하고, 사이트 설정에 < script > 스니펫이 있는지 확인하세요.

마무리 

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

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

유사한 기사

최고 품질의 AI 오디오로 창작하세요

영업팀 문의회원가입