회원 ID 연결하기

연동 설정 확인하기

회원 ID를 전달하면 카나페가 고객사에서 로그인한 참여자를 구분할 수 있습니다. 먼저 다음 두 가지를 확인하세요.

1. 이벤트 소유 계정에 카나페 측 메시지 연동이 설정되어 있어야 합니다. 설정 여부는 카나페 담당자에게 확인하세요.
2. 일반 이벤트의 에디터에서 고급참여설정 → 사용자 식별 ID 사용 하기를 켜고 배포하세요. 설정이 보이지 않으면 카나페 담당자에게 문의해 주세요.

회원 ID에는 로그인 시스템에서 확인한 고유 식별자를 사용하세요. 한 회원에게 같은 값을 사용하고, 이메일·전화번호·비밀번호·인증 토큰은 전달하지 마세요. 회원 ID는 참여 기록을 연결하는 값입니다. 로그인 상태와 고객사 혜택 지급 자격은 고객사 서버에서 확인하세요.

HTML에 회원 ID 넣기

페이지를 생성할 때 이미 회원 ID를 알고 있다면 data-canape-user-id를 사용합니다. 아래의 YOUR_EVENT_ID와 member-8241을 이벤트 ID와 로그인한 회원의 내부 식별자로 바꾸세요.

<script
  defer
  src="https://cdn.canape.im/_static/js/canape-embed-helper/@2.0.0/canape-embed-helper.js"
></script>

<div
  data-canape-event="YOUR_EVENT_ID"
  data-canape-user-id="member-8241"
></div>

서버에서 값을 넣을 때는 템플릿 엔진의 HTML 속성 이스케이프를 사용하세요. 헬퍼가 ID를 메시지로 전달하고 적용을 확인한 뒤 화면을 표시합니다.

로그인 확인 뒤 임베드하기

이벤트 영역을 먼저 만들고, 고객사 로그인 코드가 회원 ID를 확인하면 mount()를 호출하세요. 아래는 로그인 코드가 호출할 수 있는 showMemberEvent() 예제입니다.

<div id="member-event"></div>

<script src="https://cdn.canape.im/_static/js/canape-embed-helper/@2.0.0/canape-embed-helper.js"></script>
<script>
  const container = document.getElementById('member-event')
  let currentEmbed

  function hideMemberEvent() {
    currentEmbed?.destroy()
    currentEmbed = undefined
  }

  function showMemberEvent(memberId) {
    hideMemberEvent()

    currentEmbed = window.CanapeEmbed.mount(container, {
      eventId: 'YOUR_EVENT_ID',
      customUserId: memberId,
      onError(error) {
        console.error(error.message)
      },
    })
  }

  // 실제 서비스에서는 로그인 확인을 마친 뒤 호출하세요.
  showMemberEvent('member-8241')
</script>

로그아웃하거나 이벤트 영역을 제거할 때는 hideMemberEvent()를 호출하세요. 계정을 전환할 때는 새 회원의 ID로 showMemberEvent()를 다시 호출하면 됩니다. 같은 위치에 선언형 data-canape-event와 mount()를 함께 사용하면 중복 삽입 오류가 발생합니다.

전달 결과 확인하기

이벤트 콜백 받기 예제처럼 onEvent를 등록하면 viewed의 metadata.customUserId로 전달 결과를 확인할 수 있습니다. 로딩이 계속되면 문제 해결에서 계정 연동과 사용자 식별 설정을 확인하세요.