Eleven v4를 소개합니다역대 가장 감성적인 모델, Eleven v4를 만나보세요. 10월 12일까지 Creator+에 크레딧 3배 제공

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

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

게시일
최종 업데이트

듣기이 글 오디오로 듣기

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

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

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

시작하기 전 준비 사항

시작하기 전에 다음 사항을 확인하세요:

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

단계별 가이드

1단계: ElevenLabs 위젯 준비하기

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

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

  1. Framer 프로젝트를 여세요.
  2. 오른쪽 상단에서 Project Settings를 클릭하세요.
  3. General 탭으로 이동한 후 Custom Code 섹션까지 아래로 스크롤하세요.
  4. ElevenLabs 임베드 코드의 < script > 스니펫을 End of < body > tag 필드에 붙여넣으세요.
  5. 변경 사항을 저장하세요. 이 단계로 웹사이트에 필요한 스크립트가 로드됩니다.

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

  1. Framer 프로젝트에서 위젯을 표시할 페이지로 이동하세요.
  2. Insert 메뉴의 Utilities 섹션에서 Embed Element를 추가하세요.
  3. 캔버스에서 Embed Element를 선택해 설정에 접근하세요.
  4. Type을 HTML로 변경하세요.
  5. ElevenLabs 임베드 코드의 < div > 스니펫을 HTML 필드에 붙여넣으세요.
  6. 필요에 따라 캔버스에서 Embed Element의 위치와 크기를 조정하세요.

4단계: 게시 및 테스트

  1. Publish를 클릭해 변경 사항을 적용하세요.
  2. 브라우저에서 웹사이트를 열어 위젯이 정상적으로 표시되고 작동하는지 확인하세요.
    • 참고: Framer의 Preview 모드에서는 사용자 지정 코드가 표시되지 않으며, 확인하려면 게시해야 합니다.

일반적인 문제 및 해결 방법

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

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

  • 원인: < script > 또는 < div > 스니펫이 누락되었거나 잘못된 위치에 있습니다.
  • 해결 방법: < script > 스니펫이 사이트 설정의 End of < body > tag 필드에 추가되고, < div > 스니펫이 Embed Element에 있는지 확인하세요.

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

  • 원인: Embed Element의 크기나 위치가 잘못 설정되었습니다.
  • 해결 방법: Framer Editor에서 Embed Element의 크기와 정렬을 조정하세요.

문제 3: 스크립트 오류

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

고급 팁

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

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

마무리 

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

가입 후 AI Voice Agents를 지금 시작해 보세요. 

유사한 기사

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

영업팀 문의회원가입