Links
Comment on page

개발 연동 하기

개발 연동하여 자체 서비스 내에 예약 기능을 구축하기
서버 API 연동을 원하시면 https://developer.whattime.co.kr/swagger 를 확인해 주세요.

기본 설명

위젯 종류

  • 웹싸이트 중간에 삽입하기
    • 원하는 위치에 여러개의 예약 캘린더를 넣을수 있습니다!
  • 위젯 버튼 삽입
    • 웹싸이트 페이지 마다 하단 오른쪽에 예약 하기 버튼을 넣을수 있습니다!
    • 버튼을 클릭하면 팝업 형태로 예약 페이지가 생성됩니다!
  • 텍스트 버튼 삽입
    • 웹싸이트 여러부분에 버튼을 삽입하여 클릭하면 예약 페이지에 팝업 형태로 만들수 있습니다!

라이브러리 파일 임포트 하기

<link href="https://assets.whattime.co.kr/widget/widget.css" rel="stylesheet">
<script src="https://assets.whattime.co.kr/widget/widget.js" type="text/javascript" async></script>
  • 해당 코드로 Javascript 라이브러리와 Stlyesheet 를 불러 올 수 있습니다.

예약 페이지 내의 이벤트 받기

예약 페이지 내에서 일어나는 각종 이벤트를 window.addEventListener 를 통해서 전달 받을수 있습니다. 예약 페이지 내에서 window.parent.postMessage를 호출하여 이벤트를 전달 합니다
{ event: "whattime.xxx", payload }
위와 같은 구조로 이벤트를 전달 합니다.
이벤트 이름
이벤트 설명
이벤트 내용
whattime.calendar_page_viewed
예약 페이지가 조회됨, 백버튼 클릭시 두번 호출됩니다.
whattime.date_selected
날짜를 선택함
{ date }
whattime.date_and_time_selected
날짜와 시간이 선택됨
{ date, time }
whattime.schedule_created
예약하기 버튼을 클릭하여 예약함
{ code }
whattime.schedule_duplicated
이미 예약되어 예약이 불가
{ code }
whattime.schedule_complted_viewed
예약 완료 후 완료 페이지 이동
{ code }
whattime.home_page_viewed
예약 홈페이지가 조회됨, 현재 예약홈 위젯은 지원되지 않습니다.
아래와 같이 이벤트를 수신할 수 있습니다.
function isWhatTimeEvent(e) {
return e.data.event && e.data.event.indexOf('whattime') === 0;
};
window.addEventListener('message', function(e) {
if (isWhatTimeEvent(e)) {
console.log("Event Name :", e.data.event);
console.log("Event Details : ", e.data.payload);
}
});

위젯 함수 설명

initBadgeWidget > 위젯 버튼 초기화

window.onload = function() {
WhatTime.initBadgeWidget({
url: "<url>",
buttonText: "<buttonText>",
buttonTextColor: "<buttonTextColor>",
buttonBackgroundColor: "<buttonBackgroundColor>",
backgroundColor: "<backgroundColor>",
textColor: "<textColor>",
buttonColor: "<buttonColor>",
hideInfo: true
});
};
  • 하단 고정된 위젯 버튼을 초기화 합니다.
  • 버튼 초기화 없이 팝업만 띄우기 싶으면 하단에 initPopupWidget 을 활용해 주세요.
  • url : 예약페이지 주소
  • 위젯 버튼 스타일
    • buttonText : 버튼명
    • buttonTextColor : 버튼 텍스트 색깔 ex) #FFFFF
    • buttonBackgroundColor : 버튼 배경 색깔 ex) #FFFFF
  • 예약 페이지 스타일
    • backgroundColor : 예약 페이지의 배경 색깔 ex) #FFFFF
    • textColor : 예약 페이지의 글자 색깔
    • buttonColor : 예약 페이지의 버튼 색깔
    • hideInfo: 예약 페이지 내의 설명 정보를 제거 여부 ex) true
  • params : 자동완성 추가 변수
    • name : 자동완성 이름
    • email : 자동완성 이메일
    • phone : 자동완성 전화번호
    • questions: 추가 설문 자동완성, “답변1,답변2” 형태로 , 로 구분하여 전달

destroyBadgeWidget > 위젯 버튼 삭제

WhatTime.destroyBadgeWidget();
  • 위젯 버튼을 삭제 합니다.

initPopupWidget > 팝업 위젯 띄우기

WhatTime.initPopupWidget({
url: '<url>',
backgroundColor: '<color>',
buttonColor: '<color>',
textColor: '<color>',
hideInfo: false,
params: {name: '<name>', email: '<email>', phone: '<phone>', questions: '<답변1>,<답변2>'}
})
  • 팝업 위젯을 생성 합니다.
  • 상단에 위젯 버튼 초기화 참고

closePopupWidget > 팝업 위젯 제거

WhatTime.closePopupWidget()
  • 팝업 위젯을 제거 합니다.

_autoLoadInlineWidgets > 강제 초기로딩

window.WhatTime._autoLoadInlineWidgets();
  • 기본적으로는 별도로 호출하지 않아도 됩니다. <div> 태그가 js 가 로딩 되는 시점에 존재 하지 않고 이후에 생성된다면 수동으로 호출 하면 웹사이트 중간에 예약 페이지가 삽입됩니다.

각종 팁

특정 페이지에서만 위젯 버튼이 나오도록 설정

  • 특정 페이지 에서만 위젯버튼, 텍스트 버튼이 나오도록 설정 할 수 있습니다.
<!-- WhatTime button widget begin -->
<link href="https://assets.whattime.co.kr/widget/widget.css" rel="stylesheet">
<script src="https://assets.whattime.co.kr/widget/widget.js" type="text/javascript" async></script>
<script type="text/javascript">
window.onload = function() {
if (["/test1", "/test2"].includes(window.location.pathname)) {
WhatTime.initBadgeWidget({ url: "<url>", buttonText: "텍스트 버튼", buttonBackgroundColor: "#ffffff", buttonTextColor: "#0EB27A", backgroundColor: "", buttonColor: "", textColor: "", hideInfo: false });
}
};
</script>
<!-- WhatTime button widget end -->
  • if 안에 /test1, /test2 처럼 버튼이 나오길 원하는 주소만 입력해 주세요.

JS 스크립트 로딩 보다 div 엘레먼트가 먼저 생성된 경우 웹사이트 중간에 삽입

  • 초기 로딩을 수동으로 진행
useEffect(() => {
window.WhatTime._autoLoadInlineWidgets();
}, [])

위젯이 잘 뜨지 않나요?

  • 웹페이지 로딩이 느려서 위젯 버튼이 뜨지 않는 경우 아래 코드를 활용해 주세요.
<link href="https://assets.whattime.co.kr/widget/widget.css" rel="stylesheet">
<script src="https://assets.whattime.co.kr/widget/widget.js" type="text/javascript" async></script>
<script type="text/javascript">
(function () {
var w = window;
if (w.WhatTime) {
return (window.console.error || window.console.log || function () {})(
"WhatTime script included twice.",
);
}
function l() {
WhatTime.initBadgeWidget({ url: "<url>", buttonText: "버튼명", buttonBackgroundColor: "#ed6a23", buttonTextColor: "#ffffff", backgroundColor: "#ffffff", buttonColor: "#ed6a23", textColor: "#1a1a1a", hideInfo: false });
}
if (document.readyState === "complete") {
l();
} else if (window.attachEvent) {
window.attachEvent("onload", l);
} else {
window.addEventListener("DOMContentLoaded", l, false);
window.addEventListener("load", l, false);
}
})();
</script>

인풋 값에 따라 예약 페이지 나오도록 설정

아래 코드를 그대로 다운로드 하여 실행이 가능합니다
  • 월 평균 주문수 1000건 이상에서만 예약 기능을 활성화 합니다.
<html>
<head>
<link href="https://assets.whattime.co.kr/widget/widget.css" rel="stylesheet">
<script src="https://assets.whattime.co.kr/widget/widget.js" type="text/javascript" async></script>
</head>
<body>
<form id="wf-form-Contact-Page">
<div class="">
<div>
<label for="no-order">월 평균 주문 수</label>
<select
id="no-order"
name="field"
data-name="Field"
required=""
class="select-field order-no w-select"
>
<option value="1,000건 미만">1,000건 미만</option>
<option value="1,000 ~ 10,000건">1,000 ~ 10,000건</option>
<option value="10,000 ~ 50,000건">10,000 ~ 50,000건</option>
<option value="50,000 ~ 100,000건">50,000 ~ 100,000건</option>
<option value="100,000건 이상">100,000건 이상</option>
</select>
</div>
</div>
<input type="submit" value="제출하기" data-wait="처리중입니다." id="inbound-submit-button" />
</form>
<script>
document.querySelector("#wf-form-Contact-Page").addEventListener("submit", function (e) {
var select = document.querySelector("#no-order");
if (select.value != "1,000건 미만") {
e.preventDefault();
// 아래 코드 값은 서비스 내에서 자체 발급 가능합니다.
WhatTime.initPopupWidget({ url: "https://whattime.co.kr/jay/interview" });
} else {
alert("1000건 이상 선택해야 예약 페이지가 활성화 됩니다.");
}
});
</script>
</body>
</html>

위젯 스타일링 하기

  • 위젯 버튼 왼쪽 하단으로 변경
.whattime-badge-widget { right: auto !important; left: 20px !important; }
  • 위젯 버튼 중앙 하단으로 변경
.whattime-badge-widget { left: 50% !important; margin-left: -100px!important; }
  • 임베디드 인라인 위젯 스크롤 나오게 하지 않기
    • style 에 높이를 충분히 크게 설정하여 예약 페이지 높이가 넘치지 않도록 설정
    • meta 태그를 추가하여 모바일에서 최대화면으로 나오게 변경
<div class="whattime-inline-widget"
data-url="https://whattime.co.kr/jay/interview"
style="min-width:320px; height: 1024px;">
</div>
<meta name="viewport" content="width=device-width, initial-scale=1">
  • 위젯 팝업 백그라운드 클릭해도 닫히지 않도록 처리
    • 백그라운드 div 를 표현되지 않도록 변경
<style>
.whattime-close-overlay {
display: none;
}
</style>

위젯 예제

  • React(NextJS)
    const WhatTimePlugin = () => {
    const onClickInterview = () => {
    // 버튼을 클릭하면 팝업으로 예약 페이지를 생성합니다.
    window.WhatTime.initPopupWidget({
    url: "https://whattime.co.kr/jay/interview",
    hideInfo: false,
    });
    };
    return (
    <button onClick={onClickInterview}>
    <Head>
    <link href="https://assets.whattime.co.kr/widget/widget.css" rel="stylesheet">
    <script src="https://assets.whattime.co.kr/widget/widget.js" type="text/javascript" async></script>
    </Head>
    <p className={"ms-1"}>
    데모 신청
    </p>
    </button>
    );
    };