불러오기와 HTML 속성

브라우저 스크립트와 ES 모듈을 불러오고 HTML 속성을 사용합니다.

일반 HTML 페이지에서는 브라우저 스크립트로 시작할 수 있습니다. 화면이 바뀔 때 이벤트를 붙이거나 콜백을 받으려면 브라우저 스크립트의 window.CanapeEmbed.mount() 또는 ES 모듈의 mount()를 사용합니다.

브라우저 스크립트

스크립트를 페이지에 한 번 넣고, 이벤트를 표시할 위치에 data-canape-event 요소를 추가합니다. 아래 코드는 홈의 샘플 이벤트를 표시합니다. 내 이벤트를 넣으려면 data-canape-event를 실제 이벤트 ID로 바꾸세요. 회원 ID를 연동하는 이벤트에는 data-canape-user-id 속성을 추가해 로그인으로 확인한 회원 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="63cb945984b6e591a5b5049e52d3d9e1d992b0f15df2fca32018af2d0cc99c68"></div>

HTML 속성	값	설명
`data-canape-event`	이벤트 ID	표시할 이벤트를 지정합니다. 전체 이벤트 주소를 넣는 경우에는 빠른 시작의 코드 생성기를 사용하세요.
`data-canape-user-id`	회원 ID, 선택	참여자와 고객사 회원을 연결합니다. 사용하기 전에 회원 ID 연동의 설정을 확인하세요.

브라우저 스크립트는 문서가 준비될 때 표시할 요소를 한 번 찾습니다. 이미 문서가 준비된 뒤에 스크립트를 불러오면 실행 시점에 요소를 찾습니다. 그 이후에 추가되는 요소는 mount()로 연결합니다.

직접 삽입하기

브라우저 스크립트가 실행되면 window.CanapeEmbed.mount를 사용할 수 있습니다. defer로 스크립트를 불러온다면 스크립트의 실행이 끝난 뒤 호출하세요. 직접 삽입할 요소는 비워두고 data-canape-event를 생략합니다. 같은 요소에는 임베드 한 개를 연결할 수 있습니다.

옵션과 반환값은 mount() 참조에서 확인할 수 있습니다.

ES 모듈

모듈을 사용하는 브라우저 코드에서는 mount를 가져와 필요한 요소에 호출합니다. 모듈은 호출 시점에 이벤트를 삽입하므로 화면을 교체하는 애플리케이션에서도 사용할 수 있습니다. 회원 ID를 연동하는 이벤트에는 customUserId 옵션을 추가합니다.

<div id="canape-event"></div>
<script type="module">
  import { mount } from 'https://cdn.canape.im/_static/js/canape-embed-helper/@2.0.0/canape-embed-helper.mjs'

  const container = document.getElementById('canape-event')
  mount(container, {
    eventId: '63cb945984b6e591a5b5049e52d3d9e1d992b0f15df2fca32018af2d0cc99c68',
  })
</script>

React와 같이 빌드 도구를 사용하는 프로젝트에서는 모듈과 타입 선언을 내려받아 같은 폴더에 둔 뒤 프로젝트의 로컬 경로에서 가져올 수 있습니다. 컴포넌트가 브라우저에 표시된 뒤 mount()를 호출하는 방법은 이벤트 콜백 받기를 참고하세요.

2.0.0 배포 파일

파일	용도
브라우저 스크립트	HTML 자동 삽입과 `window.CanapeEmbed.mount`
ES 모듈	이름으로 가져오는 `mount` 함수
브라우저 타입 선언	TypeScript에서 `window.CanapeEmbed`와 관련 타입 사용
ES 모듈 타입 선언	ES 모듈과 함께 보관하는 TypeScript 타입 선언

브라우저 스크립트용 타입 선언은 TypeScript의 컴파일 대상에 포함하세요. ES 모듈을 내려받아 사용할 때는 canape-embed-helper.mjs와 canape-embed-helper.d.mts의 파일 이름을 그대로 유지하세요.