이벤트 수신 체험

샘플 이벤트를 조작하면 콜백이 수신 기록에 쌓입니다. 기록을 선택해 어떤 데이터가 전달됐는지 확인해 보세요.

샘플 이벤트

한겨울 귤 속의 랜덤 쿠폰 찾기!

샘플 참여에 쓸 임시 회원 ID를 이 브라우저 탭에서 만듭니다. 샘플을 열면 조회 콜백부터 확인할 수 있습니다.

수신 기록 0

수신 기록이 없습니다

샘플을 실행하거나 예시 메시지를 보내 보세요.

콜백 JSON

선택한 기록이 없습니다

콜백을 받으면 여기에 데이터가 표시됩니다.

이벤트를 받는 코드

React 연동 가이드

아래 코드를 테스트 페이지에 붙여 넣고 실행해 보세요. userId를 customUserId에 전달하고, onEvent로 받은 값을 화면에 표시합니다. 실제 연동에서는 xxx를 로그인한 회원의 ID로 바꾸세요.

<div id="canape-event"></div>
<ol id="event-log" aria-label="수신 기록"></ol>
<pre id="event-detail">수신한 이벤트를 선택해 주세요.</pre>

<script src="https://cdn.canape.im/_static/js/canape-embed-helper/@2.0.0/canape-embed-helper.js"></script>
<script>
  const log = document.getElementById('event-log');
  const detail = document.getElementById('event-detail');

  if (!window.CanapeEmbed) {
    detail.textContent = '카나페 헬퍼를 불러오지 못했습니다.';
  } else {
    // 실제 연동 시 로그인한 회원의 ID를 넣으세요.
    const userId = 'xxx';
    const embed = window.CanapeEmbed.mount(document.getElementById('canape-event'), {
      eventId: '7627d3351f62b9d54922c432330d3d46a32834e79bb04c8bef193b6be4e65b48',
      customUserId: userId,
      onEvent(event) {
        // 화면에 보여줄 필드만 선택합니다.
        const payload = {
          type: event.type,
          metadata: {
            eventId: event.metadata.eventId,
            time: event.metadata.time,
          },
        };
        if (event.type === 'won') {
          payload.rewardId = event.rewardId;
          payload.rewardName = event.rewardName;
        }

        const item = document.createElement('li');
        const button = document.createElement('button');
        button.type = 'button';
        button.textContent = event.type;
        const showDetail = () => {
          detail.textContent = JSON.stringify(payload, null, 2);
        };
        button.addEventListener('click', showDetail);
        item.append(button);
        log.append(item);
        showDetail();
      },
      onError(error) {
        detail.textContent = error.message;
      },
    });

    // SPA에서는 임베드 영역의 정리 함수에서 embed.destroy()를 호출합니다.
  }
</script>

콜백의 종류와 전달 필드는 이벤트와 데이터에서 확인할 수 있습니다.