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

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

1. 도메인 허용하기

허용 도메인에 예약 위젯을 넣을 사이트의 주소를 정확히 입력합니다. 프로토콜과 도메인만 적고(포트가 있으면 포트도 함께), 경로와 끝 슬래시는 넣지 않습니다:

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

https://www.acme.com과 https://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);
});

AI 어시스턴트

예약 위젯은 제안 단계의 웹 표준인 WebMCP를 통해 AI 어시스턴트에게도 도구를 제공합니다. 방문자의 브라우저에서 방문자를 돕는 어시스턴트는 이 도구로 제공 내용과 가격을 확인하고, 비어 있는 시간을 찾고, 방문자가 보는 화면에서 시간을 선택할 수 있습니다. 예약까지 할 수 있지만, 예약은 방문자의 동의가 필요한 작업으로 표시되어 있어 어시스턴트가 먼저 방문자에게 묻습니다. 로그인, 계정 만들기, 결제는 언제나 방문자가 직접 합니다.

따로 설정할 것은 없습니다. 스니펫이 이미 이를 허용합니다. 스니펫 대신 직접 만든 <iframe> 태그로 위젯을 넣었다면, 그 태그에만 allow="payment; tools"를 추가하세요.

어시스턴트 쪽 지원은 아직 초기 단계입니다. ChatGPT 데스크톱 앱은 내장 브라우저에서 이미 이 도구를 사용하며, 저희 사이트에 있는 서비스 페이지와 예약 링크 공유로 받은 링크에서 작동합니다. 다른 사이트에 삽입된 위젯 안의 도구는 아직 사용하지 않습니다. 위젯은 이를 지원하는 어시스턴트를 맞을 준비가 되어 있습니다. 어느 경우든 방문자는 언제든 직접 예약할 수 있습니다.

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

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

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

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

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