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 처럼 버튼이 나오길 원하는 주소만 입력해 주세요.
ex) whattime.co.kr/test1 페이지에 뒤에 주소 test1 입니다.
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)
​https://github.com/GoodGoodCo/whattime-widget-react​
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>
  );
};
​

이벤트 이름	이벤트 설명	이벤트 내용
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	예약 홈페이지가 조회됨, 현재 예약홈 위젯은 지원되지 않습니다.

웹사이트에 예약 기능 넣기

아임웹 예약 기능 넣기

Last modified 2mo ago