가이드노코드

Webflow의 ElevenAgents

ElevenLabs 에이전트를 Webflow에 배포하는 방법을 알아보세요

이 튜토리얼에서는 ElevenLabs Agents 에이전트를 Webflow 웹사이트에 추가하는 방법을 안내합니다.

사전 요구 사항

  • 이 가이드에 따라 생성한 ElevenLabs Agents 에이전트
  • Core, Growth, Agency 또는 Freelancer Workspace(또는 Site Plan)가 있는 Webflow 계정
  • Webflow Designer에 대한 기본 지식

가이드

1

임베드 코드 가져오기

ElevenLabs 대시보드로 이동하여 에이전트의 임베드 위젯을 찾습니다.

<elevenlabs-convai agent-id="YOUR_AGENT_ID"></elevenlabs-convai>
<script src="https://unpkg.com/@elevenlabs/convai-widget-embed" async type="text/javascript"></script>
2

페이지에 위젯 추가

  1. Designer에서 Webflow 프로젝트를 엽니다.
  2. 원하는 위치로 Embed Element를 드래그합니다.
  3. Embed Element의 코드 편집기에 <elevenlabs-convai agent-id="YOUR_AGENT_ID"></elevenlabs-convai> 스니펫을 붙여넣습니다.
  4. Save & Close를 선택합니다.
3

스크립트를 전역으로 추가

  1. Project Settings > Custom Code로 이동합니다.
  2. Footer Code 섹션에 <script src="https://unpkg.com/@elevenlabs/convai-widget-embed" async type="text/javascript"></script> 스니펫을 붙여넣습니다.
  3. Save Changes를 선택합니다.
  4. 변경 사항을 확인하려면 사이트를 게시합니다.

참고: 위젯은 Designer에서는 표시되지 않으며, 사이트를 게시한 후에만 표시됩니다.

문제 해결

위젯이 표시되지 않으면 다음을 확인하세요.

  • <script> 스니펫이 Footer Code 섹션에 있는지
  • <elevenlabs-convai> 스니펫이 Embed Element에 올바르게 배치되었는지
  • 변경 후 사이트를 게시했는지

다음 단계

ElevenLabs 에이전트를 Webflow에 추가했으므로 다음을 할 수 있습니다.

  1. ElevenLabs 대시보드에서 브랜드에 맞게 위젯 맞춤 설정
  2. 추가 언어 지원
  3. 도구 및 지식 베이스 같은 고급 기능 추가