Search
Duplicate
🖥️

위젯 개발 연동하기

기본적인 위젯을 설치한후 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_selectedd
날짜를 선택함
{ 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
팝업 위젯을 제거 합니다.

각종 팁

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

특정 페이지 에서만 위젯버튼, 텍스트 버튼이 나오도록 설정 할 수 있습니다.
<!-- 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
if 안에 /test1, /test2 처럼 버튼이 나오길 원하는 주소만 입력해 주세요.
ex) whattime.co.kr/test1 페이지에 뒤에 주소 test1 입니다.

위젯 스타일링 하기

위젯 버튼 왼쪽 하단으로 변경
.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

위젯 예제

React(NextJS)

추가적인 도움이 필요하다면

바로 문의하기