Clasora

웹사이트에 예약 위젯 삽입하기

연동

설정 → 연동에서 예약 위젯을 웹사이트에 직접 삽입하면, 방문자를 이곳으로 보내지 않고도 사이트에서 바로 예약을 받을 수 있습니다.

1. 도메인 허용하기

허용된 도메인에 예약 위젯을 넣을 사이트의 오리진을 정확히 입력합니다. 스킴과 호스트만 적고, 경로와 끝 슬래시는 넣지 않습니다:

https://apply.acme.com     ✓
https://acme.com:8443      ✓
acme.com                   ✗  스킴 없음
https://acme.com/book      ✗  경로 있음
https://acme.com/          ✗  끝 슬래시 있음

https://www.acme.comhttps://acme.com은 서로 다른 오리진입니다. 방문자가 두 주소 모두로 접속할 수 있다면 둘 다 등록하세요.

이 목록은 켜고 끄는 스위치이기도 합니다. 목록이 비어 있는 동안에는 예약 위젯을 어디에도 삽입할 수 없습니다. 도메인은 최대 50개까지 추가할 수 있고, 삭제하면 즉시 적용됩니다.

2. 스니펫 붙여넣기

승인된 서비스마다 고유한 스니펫이 있습니다. 복사해서 예약 위젯을 표시할 위치에 붙여넣으세요:

<div class="scheduling-embed" data-service="SERVICE_ID"></div>
<script src="https://embed.example.com/embed.js" async></script>

<div>는 위젯이 들어갈 자리를 표시합니다. 스크립트 태그는 페이지 어디에 두어도 되고, 예약 위젯이 여러 개여도 한 번만 넣으면 됩니다. 삽입할 수 있는 승인된 서비스가 아직 없습니다라고 나온다면 서비스가 아직 검토 중이며, 승인되면 스니펫이 나타납니다.

3. 언어 설정하기

이 페이지의 위젯 언어가 방문자에게 보이는 언어를 정합니다. 페이지 언어에 맞춤으로 두면 예약 위젯이 페이지 <html> 태그의 lang 속성을 읽습니다. 검색 엔진과 스크린 리더가 쓰는 것과 같은 속성이므로, 이미 현지화된 사이트라면 따로 설정할 것이 없습니다:

<!doctype html>
<html lang="es">      <!-- 예약 위젯이 스페인어로 표시됩니다 -->
  <head>…</head>
  <body>…</body>
</html>

지역 태그도 인식합니다. lang="pt-BR"은 거부되지 않고 지원하는 언어 중 가장 가까운 것으로 처리됩니다.

예약 위젯 하나만 페이지와 다른 언어로 두려면 삽입용 div에 data-locale을 추가하세요. 페이지 언어와 이 페이지의 설정보다 우선합니다:

<div class="scheduling-embed" data-service="SERVICE_ID" data-locale="de"></div>

사이트에 자체 언어 전환 기능이 있다면 예약 위젯도 따라가게 하세요. 언어만 그 자리에서 바뀌므로 방문자가 이미 입력한 내용은 그대로 남습니다:

window.SchedulerEmbed.setLocale("sr");

정리하면 다음 중 먼저 설정된 것이 적용됩니다: data-locale, 페이지의 <html lang>, 위젯 언어, 방문자의 브라우저, 그리고 영어.

그 밖의 옵션

삽입용 div에 다음을 추가할 수 있습니다:

data-mode="popup": 위젯을 페이지에 바로 넣는 대신, 버튼을 눌러 오버레이로 열도록 합니다.

data-label="지금 예약하기": 팝업 모드에서 버튼에 표시할 문구입니다.

data-min-height="480": 예약 위젯이 실제 높이를 알려주기 전까지 사용할 높이(픽셀)입니다. 불러올 때 화면이 튀면 값을 높이세요.

사이트에서 콘텐츠를 동적으로 넣거나 전환을 추적한다면 다음 두 가지도 쓸 수 있습니다:

// 예약 위젯 div를 추가한 뒤 페이지를 다시 훑습니다
window.SchedulerEmbed.refresh();

// 방문자가 예약을 마치면 실행됩니다
window.SchedulerEmbed.onBooking(function (e) {
  console.log(e.bookingId, e.serviceId);
});

예약 위젯이 표시되지 않을 때

페이지의 오리진이 허용 목록에 없거나 정확히 일치하지 않습니다. https 대신 http를 쓰거나 www가 빠진 것만으로도 차단됩니다.

스니펫이 스크립트를 실행할 수 없는 곳에 들어갔습니다. 사이트 빌더의 일반 텍스트 블록이나 HTML이 제한된 블록이 그렇습니다.

data-service 값이 바뀌었습니다. 아이디를 직접 입력하지 말고 스니펫을 그대로 붙여넣으세요.

서비스가 게시 취소되었거나 더 이상 승인 상태가 아닙니다.