기본적인 위젯을 설치한후 Javascript 통해 위젯과 상호 작용 할수 있습니다.
기본 설명
위젯 종류
•
웹싸이트 중간에 삽입하기
◦
원하는 위치에 여러개의 예약 캘린더를 넣을수 있습니다!
•
위젯 버튼 삽입
◦
웹싸이트 페이지 마다 하단 오른쪽에 예약 하기 버튼을 넣을수 있습니다!
◦
버튼을 클릭하면 팝업 형태로 예약 페이지가 생성됩니다!
•
텍스트 버튼 삽입
◦
웹싸이트 여러부분에 버튼을 삽입하여 클릭하면 예약 페이지에 팝업 형태로 만들수 있습니다!
라이브러리 파일 임포트 하기
<script src="https://whattime.co.kr/widget/widget.js" type="text/javascript" async></script>
<link href="https://whattime.co.kr/widget/widget.css" rel="stylesheet">
JavaScript
•
해당 코드로 Javascript 라이브러리와 Stlyesheet 를 불러 올 수 있습니다.
예약 페이지 내의 이벤트 받기
예약 페이지 내에서 일어나는 각종 이벤트를 window.addEventListener 를 통해서 전달 받을수 있습니다. 예약 페이지 내에서 window.parent.postMessage를 호출하여 이벤트를 전달 합니다
{ event: "whattime.xxx", payload }
JavaScript
위와 같은 구조로 이벤트를 전달 합니다.
이벤트 이름 | 이벤트 설명 | 이벤트 내용 |
whattime.calendar_page_viewed | 예약 페이지가 조회됨, 백버튼 클릭시 두번 호출됩니다. | |
whattime.date_selected | 날짜를 선택함 | { date } |
whattime.date_and_time_selected | 날짜와 시간이 선택됨 | { date, time } |
whattime.schedule_created | 예약하기 버튼을 클릭하여 예약함 | { 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);
}
});
JavaScript
위젯 함수 설명
initBadgeWidget > 위젯 버튼 초기화
window.onload = function() {
WhatTime.initBadgeWidget({
code: "<code>",
buttonText: "<buttonText>",
buttonTextColor: "<buttonTextColor>",
buttonBackgroundColor: "<buttonBackgroundColor>",
backgroundColor: "<backgroundColor>",
textColor: "<textColor>",
buttonColor: "<buttonColor>",
hideInfo: true
});
};
JavaScript
•
하단 고정된 위젯 버튼을 초기화 합니다.
•
버튼 초기화 없이 팝업만 띄우기 싶으면 하단에 initPopupWidget 을 활용해 주세요.
•
code : 예약페이지 코드
•
위젯 버튼 스타일
◦
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();
JavaScript
•
위젯 버튼을 삭제 합니다.
initPopupWidget > 팝업 위젯 띄우기
WhatTime.initPopupWidget({
code: '<code>',
backgroundColor: '<color>',
buttonColor: '<color>',
textColor: '<color>',
hideInfo: false,
params: {name: '<name>', email: '<email>', phone: '<phone>', questions: '<답변1>,<답변2>'}
})
JavaScript
•
팝업 위젯을 생성 합니다.
•
상단에 위젯 버튼 초기화 참고
closePopupWidget > 팝업 위젯 제거
WhatTime.closePopupWidget()
JavaScript
•
팝업 위젯을 제거 합니다.
_autoLoadInlineWidgets > 강제 초기로딩
window.WhatTime._autoLoadInlineWidgets();
JavaScript
•
기본적으로는 별도로 호출하지 않아도 됩니다. <div> 태그가 js 가 로딩 되는 시점에 존재 하지 않고 이후에 생성된다면 수동으로 호출 하면 웹사이트 중간에 예약 페이지가 삽입됩니다.
각종 팁
특정 페이지에서만 위젯 버튼이 나오도록 설정
•
특정 페이지 에서만 위젯버튼, 텍스트 버튼이 나오도록 설정 할 수 있습니다.
<!-- WhatTime button widget begin -->
<link href="https://whattime.co.kr/widget/widget.css" rel="stylesheet">
<script src="https://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({ code: "<code>", buttonText: "텍스트 버튼", buttonBackgroundColor: "#ffffff", buttonTextColor: "#0EB27A", backgroundColor: "", buttonColor: "", textColor: "", hideInfo: false });
}
};
</script>
<!-- WhatTime button widget end -->
JavaScript
•
JS 스크립트 로딩 보다 div 엘레먼트가 먼저 생성된 경우 웹사이트 중간에 삽입
•
초기 로딩을 수동으로 진행
useEffect(() => {
window.WhatTime._autoLoadInlineWidgets();
}, [])
JavaScript
위젯이 잘 뜨지 않나요?
•
웹페이지 로딩이 느려서 위젯 버튼이 뜨지 않는 경우 아래 코드를 활용해 주세요.
<link href="https://whattime.co.kr/widget/widget.css" rel="stylesheet">
<script src="https://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({ code: "<code>", 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>
JavaScript
위젯 스타일링 하기
•
위젯 버튼 왼쪽 하단으로 변경
.whattime-badge-widget { right: auto !important; left: 20px !important; }
CSS
•
위젯 버튼 중앙 하단으로 변경
.whattime-badge-widget { left: 50% !important; margin-left: -100px!important; }
CSS
•
임베디드 인라인 위젯 스크롤 나오게 하지 않기
◦
style 에 높이를 충분히 크게 설정하여 예약 페이지 높이가 넘치지 않도록 설정
◦
meta 태그를 추가하여 모바일에서 최대화면으로 나오게 변경
<div class="whattime-inline-widget"data-code="ZS2co4nytj"
style="min-width:320px; height: 1024px;">
</div>
HTML
<meta name="viewport" content="width=device-width, initial-scale=1">
HTML
•
위젯 팝업 백그라운드 클릭해도 닫히지 않도록 처리
◦
백그라운드 div 를 표현되지 않도록 변경
<style>
.whattime-close-overlay {
display: none;
}
</style>
JavaScript
위젯 예제
React(NextJS)