문서 둘러보기

연동 가이드

문제 해결

이벤트가 표시되지 않거나 콜백이 오지 않을 때 확인할 항목을 살펴봅니다.

이벤트가 화면에 나타나지 않아요

  1. 빠른 시작에서 만든 코드의 data-canape-event 또는 mount()의 eventId를 확인하세요. https://canape.im/event/…에서 /event/ 뒤의 이벤트 ID를 사용합니다.
  2. 카나페 에디터에서 배포한 이벤트인지 확인하고 이벤트 주소를 브라우저에서 직접 열어 보세요.
  3. 개발자 도구의 네트워크 탭에서 헬퍼 스크립트와 canape.im의 iframe 요청이 차단됐는지 확인하세요. 사이트에서 콘텐츠 보안 정책을 쓰는 경우 스크립트 출처에 https://cdn.canape.im, iframe 출처에 https://canape.im이 허용되는지 확인합니다.
  4. 일반 JavaScript에서 window.CanapeEmbed가 없다면 스크립트가 로드된 뒤에 mount()를 호출하는지 확인하세요. 스크립트 로드 예제를 참고하세요.

mount()를 호출하는 인라인 스크립트가 보안 정책에 막히면, 해당 코드를 사이트의 JavaScript 파일로 옮겨 헬퍼를 불러온 뒤 실행하세요.

회원 ID를 넣었을 때만 로딩이 계속돼요

헬퍼는 전달한 ID가 적용된 것을 확인한 뒤 회원용 이벤트 화면을 표시합니다. 이벤트 소유 계정에 카나페 측 메시지 연동이 설정됐는지와 에디터에서 사용자 식별 ID 사용 하기를 켜고 배포했는지 확인하세요. 고객사 로그인 코드에서 확인한 회원 ID를 비어 있지 않은 문자열로 전달해야 합니다. 회원 ID 연동 가이드

로딩 중 약 30초 안에 준비 상태를 확인하지 못하면 헬퍼가 오류를 표시합니다. mount()를 사용한 경우 onError에서 오류 객체를 받을 수 있습니다.

이벤트는 보이는데 콜백이 오지 않아요

  • 카나페 담당자에게 이벤트 소유 계정의 메시지 연동 설정 여부를 확인하세요. 기본 임베드 표시와 메시지 연동은 각각 확인할 수 있습니다.
  • 이벤트를 표시할 컨테이너에 mount()를 호출할 때 onEvent를 등록하세요. 자동 삽입 코드로 표시 중이라면 콜백을 등록하는 코드로 교체합니다.
  • 콜백은 실제 동작이 발생했을 때 전달됩니다. 예를 들어 won은 참여 결과와 리워드 정보를 받았을 때 전달되고 viewed는 인스턴스당 한 번 전달됩니다.

화면을 전환하면 이벤트가 사라지거나 중복돼요

증상확인할 부분
첫 화면에서는 보이지만 나중에 추가한 영역은 비어 있어요나중에 만들어진 요소는 mount()로 삽입합니다. 선언형 스크립트는 초기 요소만 찾습니다.
같은 위치를 다시 열었을 때 이미 임베드됐다는 오류가 나요이전 인스턴스의 destroy()를 호출한 뒤 다시 삽입하세요. 같은 위치에 선언형 속성과 mount()를 함께 사용하는지도 확인하세요.
페이지를 떠난 뒤에도 콜백이 실행돼요페이지나 컴포넌트가 사라질 때 destroy()가 실행되는지 확인하세요. React에서는 useEffect에서 정리 함수를 반환합니다.

다중 임베드 가이드 · API 문서

카나페에 문의할 때

이벤트 주소, 임베드를 넣은 페이지의 주소, 사용한 헬퍼 버전, 화면에 표시된 오류 문구를 알려 주세요. 회원의 실제 식별자, 인증 토큰, 세션 값은 공유하지 마세요.