본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

Intercom이란 무엇인가요?

Intercom은 웹사이트 방문자와 소통하고 고객 지원을 제공하는 AI 기반 서비스로, 주요 사이트는 고객 메시징 및 라이브챗, 자동화된 AI 에이전트(Fin) 등을 제공합니다. 해당 블로그를 통해 Intercom을 연동하여 여러분의 Framer 사이트를 한 단계 업그레이드 해보세요.

Intercom을 사이트에 추가하는 방법

Intercom Messenger 설정하기

1. Intercom 계정에 로그인하세요.

2. Messenger를 설치한 후, Messenger > Platforms > Web > Show the Messenger Launcher 경로로 이동하여 활성화 여부를 확인하세요.

3. 스타일이나 타겟 고객 설정 등 Messenger 설정을 여러분의 사이트에 맞게 꾸며보세요.

워크스페이스 ID 복사하기

Intercom 계정에 로그인했을 때 브라우저 주소창(URL)에서 워크스페이스 ID를 찾을 수 있습니다. 예를 들어, 아래와 같은 URL 구조에서 워크스페이스 ID는 o0ma3k8s입니다. 
예) https://app.intercom.com/a/apps/o0ma3k8s/guide-library

Framer에 Intercom 컴포넌트 추가하기

1. Framer 프로젝트를 열고 상단바에서 Insert를 클릭하여 패널을 엽니다.

2. 통합 섹션에서 Intercom을 찾아 캔버스로 드래그하세요.

워크스페이스 ID 붙여넣기

캔버스에 추가한 Intercom 컴포넌트를 선택하세요. 오른쪽 속성 패널의 ID 필드에 복사해둔 워크스페이스 ID를 붙여넣습니다.

사이트 미리보기 또는 게시하기

Intercom 컴포넌트는 Framer 캔버스에서 플레이스홀더 형태로 나타나지만, 실제 라이브 사이트에서는 보이지 않습니다.
사이트를 미리보거나 게시하여 실제 작동하는 Messenger를 확인해 보세요. 만약 사이트에서 Messenger가 보이지 않는다면 해당 가이드를 따라해보시는 것을 추천드립니다.

Framer에서 Intercom 활용하기

• 리드 및 고객 확보: 실시간으로 방문자와 소통할 수 있는 비즈니스 메신저를 추가해 보실 수 있습니다.

• 자동화 활용: 챗봇을 사용하여 기본적인 문의들을 처리하고 업무 흐름을 자동화할 수 있습니다.

• 고객 지원 효율화: 모든 지원 요청을 중앙으로 집중시켜 고객 문의에 더 쉽고 효율적으로 대응해볼 수 있습니다.

자주 묻는 질문(FAQ)

Q. Framer에서 무료 플랜을 사용 중일 때도 Intercom 연동이 가능한가요?

• 네, Framer의 통합 섹션에서 제공하는 기본 컴포넌트 사용은 플랜에 제한을 받지 않습니다.

Q. Intercom 컴포넌트를 넣었는데 캔버스에 뜨지 않는다면, 삭제된 건가요?

• 아닙니다. Intercom 컴포넌트는 실제 사이트 화면을 가리지 않도록 디자인 캔버스에서는 투명하거나 아주 작은 아이콘 형태의 플레이스홀더로 표시됩니다.오른쪽 레이어 패널에서 Intercom 컴포넌트가 목록에 있는지 확인하면 삭제 여부를 알 수 있습니다.

Q. 사이트를 게시(Publish)하지 않고 미리보기(Preview) 모드에서도 채팅 테스트가 가능한가요?

• 네. 미리보기 모드에서도 작동합니다. Framer 상단의 Preview 버튼을 누르면 실제 배포된 사이트와 동일한 환경에서 Intercom 메신저가 나타나는지 확인할 수 있습니다.

본 글은 Framer 공식 블로그의 ‘Adding Intercom to your site’를 번역·각색한 콘텐츠입니다.