Comment on page
개발 연동 하기
개발 연동하여 자체 서비스 내에 예약 기능을 구축하기
- 웹싸이트 중간에 삽입하기
- 원하는 위치에 여러개의 예약 캘린더를 넣을수 있습니다!
- 위젯 버튼 삽입
- 웹싸이트 페이지 마다 하단 오른쪽에 예약 하기 버튼을 넣을수 있습니다!
- 버튼을 클릭하면 팝업 형태로 예약 페이지가 생성됩니다!
- 텍스트 버튼 삽입
- 웹싸이트 여러부분에 버튼을 삽입하여 클릭하면 예약 페이지에 팝업 형태로 만들수 있습니다!
<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);
}
});
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” 형태로 , 로 구분하여 전달
WhatTime.destroyBadgeWidget();
- 위젯 버튼을 삭제 합니다.
WhatTime.initPopupWidget({
url: '<url>',
backgroundColor: '<color>',
buttonColor: '<color>',
textColor: '<color>',
hideInfo: false,
params: {name: '<name>', email: '<email>', phone: '<phone>', questions: '<답변1>,<답변2>'}
})
- 팝업 위젯을 생성 합니다.
- 상단에 위젯 버튼 초기화 참고
WhatTime.closePopupWidget()
- 팝업 위젯을 제거 합니다.
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 처럼 버튼이 나오길 원하는 주소만 입력해 주세요.
- 초기 로딩을 수동으로 진행
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>);};
Last modified 2mo ago