개발 연동 하기

개발 연동하여 자체 서비스 내에 예약 기능을 구축하기

서버 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, timeZone }
whattime.schedule_created	예약하기 버튼을 클릭하여 예약함	{ code }
whattime.schedule_duplicated	이미 예약되어 예약이 불가	{ code }
whattime.schedule_completed_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; }

• X 버튼 색깔 변경

.whattime-popup-close {
    color: red;
}

• 임베디드 인라인 위젯 스크롤 나오게 하지 않기

  • 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>
    );
  };