Framer 사이트에 챗봇 추가하는 방법 — 5분 워크스루

Framer에 무엇을 붙여넣기 전에 세 가지를 준비해 두세요.

• 게시된 Framer 사이트. 드래프트 프로젝트에 스크립트를 임베드할 수는 있지만 위젯은 게시된 URL에서만 실행됩니다. 아직 Publish를 누르지 않았다면 먼저 그것부터 하세요.
• Chatloom 계정. 무료 티어로 충분합니다. chatloom.app에서 가입하고 이메일을 인증하면 "Create your first agent" 프롬프트가 있는 빈 대시보드에 도달합니다.
• 훈련용 짧은 텍스트. 제품에 관한 200단어 정도면 첫 테스트 메시지에서 진짜 응답을 얻기에 충분합니다. 히어로 섹션과 About 페이지에서 끌어오세요.

이것이 전제 조건 전부입니다. Framer Pro 플랜, 커스텀 도메인, Zapier 좌석, 대기 중인 개발자는 필요 없습니다.

Chatloom 대시보드에서 Create new agent를 클릭합니다. 이름을 지정하고(회사 이름이면 충분합니다), 언어를 선택하고(Chatloom은 95개 이상의 언어를 지원하며 그중 10개 언어에서 네이티브 응답 제공), 성격 프리셋을 선택합니다: Support, Sales 또는 Custom.

Framer 마케팅 사이트의 경우 Sales가 거의 항상 옳은 기본값입니다. 리드 퀄리파이, 데모 예약 유도, 가격 질문에 연락처 폼으로 우회하지 않고 자신 있게 답하도록 조정되어 있습니다.

에이전트가 생성되면 빌더에 도달합니다. 다른 것은 아직 건드리지 마세요. 위젯이 라이브 된 후에 브랜드를 설정할 것입니다. 지금은 임베드 스니펫만 가져오세요: Install → Custom embed. 두 스크립트 태그를 클립보드에 복사합니다.

Framer에서 프로젝트를 열고 상단의 기어 아이콘(Site Settings)을 클릭합니다. General → Custom Code까지 스크롤합니다. 세 가지 텍스트 영역이 표시됩니다.

• Start of head — 일찍 실행되어야 하는 인증 태그, 프리로드 링크, 분석 스니펫용.
• End of body — 페이지가 렌더링된 후 실행되어야 하는 스크립트용. Chatloom은 여기로 갑니다.
• End of head — CSS 오버라이드와 메타 태그용.

1단계의 두 스크립트 태그를 End of body 필드에 붙여넣습니다. 저장합니다. 그 다음 오른쪽 상단의 Publish를 클릭합니다. 게시 완료 후 10초 이내에 위젯이 게시된 URL에서 라이브됩니다.

시크릿 창에서 게시된 사이트를 엽니다. 오른쪽 하단에 Chatloom 런처가 보여야 합니다. 클릭하면 채팅 패널이 열립니다. 질문을 입력합니다. 축하합니다 — Framer 사이트에 이제 AI 챗봇이 있습니다.

위젯은 존재하지만 아직 제품에 대해 아무것도 모릅니다. 이것이 대부분의 가이드가 건너뛰는 단계입니다.

Chatloom으로 돌아가서 Knowledge base → Add source를 엽니다. 네 가지 선택지가 있습니다.

• Crawl website — Framer 도메인을 붙여넣습니다. 크롤러가 사이트맵을 순회하고 각 페이지에서 렌더링된 텍스트를 당깁니다. 대부분의 Framer 사이트에 올바른 선택이며 2분 미만이 걸립니다.
• Upload files — 피치 덱 PDF, 원페이저 또는 가격표를 드롭합니다.
• Paste text — 아직 사이트에 없는 빠른 FAQ, 가격 세부 정보, "만약...이라면" 답변용.
• Sitemap URL — Framer 사이트가 비밀번호로 보호되거나 봇이 알아야 할 인덱싱되지 않은 페이지가 있는 경우 사용합니다.

일반적인 Framer 마케팅 사이트의 경우 Crawl website + paste text 조합이 승자 조합입니다. 크롤은 사이트에 이미 있는 모든 것을 커버하고, 붙여넣기 필드는 카피에 들어가지 못한 미묘함을 커버합니다.

훈련을 트리거합니다. 무료 티어에서는 약 60초가 걸립니다. 지식 베이스가 쿼리 가능해지면 대시보드가 "Ready"를 표시합니다.

이것이 2019년식 지원 버블처럼 보이는 챗봇과 Framer 디자인의 네이티브처럼 느껴지는 챗봇을 구분하는 단계입니다. 빌더에서 Widget 섹션을 엽니다.

Launcher mode부터 시작합니다. Button이 안전한 기본값(오른쪽 하단의 떠 있는 원)이지만 랜딩페이지에는 Fullscreen을 시도해 볼 가치가 있습니다. 전체 뷰포트가 어두워지고 채팅이 중앙 무대를 차지하는데, 이는 히어로 CTA에 훨씬 강력한 전환 패턴입니다.

그 다음 Brand colors. Chatloom은 프라이머리, 액센트, 서피스를 노출합니다. Framer 팔레트에 맞추세요. 오른쪽에 즉시 업데이트되는 라이브 미리보기가 있습니다.

타이포그래피. 사용 중인 Framer 폰트의 .woff2를 업로드합니다(또는 Google Fonts 피커에서 선택). 채팅 표면, 제안 칩, 헤더가 새 폰트로 다시 렌더링됩니다. 레티나 디스플레이에서는 위젯과 네이티브 Framer 컴포넌트의 차이를 알 수 없습니다.

모서리 둥글기. Framer는 대부분의 컴포넌트에서 기본값으로 12px를 사용합니다. 이에 맞추면 위젯이 디자인 속으로 사라집니다.

로고와 아바타. 투명 PNG를 업로드합니다. 런처 버튼은 PNG를 존중하고 AI 아바타는 모든 봇 메시지 옆에 표시됩니다.

저장하고 시크릿 창에서 Framer 사이트를 다시 엽니다. 위젯은 이제 디자인의 네이티브 부분과 구분할 수 없습니다.

이것을 끝났다고 부르기 전에 마지막 두 가지 터치.

위젯 범위 제한. 기본적으로 Chatloom은 Framer 사이트의 모든 페이지에 표시됩니다. 가격 페이지에서 빼고 싶다면(엔터프라이즈 거래에서 대신 영업팀이 보이게 하고 싶을 때 흔합니다) 위젯의 Visibility rules를 사용합니다. /pricing, /contact 또는 원하는 패턴과 일치하는 URL을 제외합니다.

인사 설정. 빌더 Messages 섹션에 짧은 환영 줄("안녕하세요 — Framer 통합, 가격 또는 시작하기에 대한 질문에 답할 수 있습니다. 무엇을 작업 중이신가요?")과 3-5개의 제안 프롬프트를 작성합니다. 제안 프롬프트는 전체 위젯에서 가장 강력한 전환 레버이며, 사람들은 입력하는 것보다 더 자주 클릭합니다.

테스트. 시크릿 창에서 사이트를 열고 다양한 진입 페이지에서 완전한 대화를 진행하며, 문서에 아직 없는 질문을 특히 질문합니다. 봇이 "모르겠습니다"를 어떻게 처리하는지 관찰하세요. 환각을 일으키면 누락된 답변을 지식 베이스에 추가하고 다시 테스트합니다. 여기서 5분을 사전에 쓰면 일주일 치의 나쁜 대화를 방지할 수 있습니다.

이것이 완전한 워크플로우입니다. 대부분의 Framer 창업자는 전체 시퀀스를 15분 미만에 완료하고 이후 임베드 스크립트를 다시 만지지 않습니다.