> For the complete documentation index, see [llms.txt](https://guide.whattime.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guide.whattime.co.kr/getting-started/share/embed/dev.md).

# 개발 연동 하기

{% hint style="info" %}
서버 API 연동을 원하시면 <https://developer.whattime.co.kr/swagger> 를 확인해 주세요.
{% endhint %}

## 기본 설명

### 위젯 종류

* 웹싸이트 중간에 삽입하기
  * 원하는 위치에 여러개의 예약 캘린더를 넣을수 있습니다!
* 위젯 버튼 삽입
  * 웹싸이트 페이지 마다 하단 오른쪽에 예약 하기 버튼을 넣을수 있습니다!
  * 버튼을 클릭하면 팝업 형태로 예약 페이지가 생성됩니다!
* 텍스트 버튼 삽입
  * 웹싸이트 여러부분에 버튼을 삽입하여 클릭하면 예약 페이지에 팝업 형태로 만들수 있습니다!

### 라이브러리 파일 임포트 하기

```jsx
<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 를 불러 올 수 있습니다.

***

### 예약 페이지 내의 이벤트 받기 <a href="#listen_event" id="listen_event"></a>

예약 페이지 내에서 일어나는 각종 이벤트를 `window.addEventListener` 를 통해서 전달 받을수 있습니다. 예약 페이지 내에서 `window.parent.postMessage`를 호출하여 이벤트를 전달 합니다

```jsx
{ 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          | 예약 홈페이지가 조회됨, 현재 예약홈 위젯은 지원되지 않습니다. |                          |

아래와 같이 이벤트를 수신할 수 있습니다.

```jsx
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 > 위젯 버튼 초기화

```jsx
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 > 위젯 버튼 삭제

```jsx
WhatTime.destroyBadgeWidget();
```

* 위젯 버튼을 삭제 합니다.

#### initPopupWidget > 팝업 위젯 띄우기

```jsx
WhatTime.initPopupWidget({
   url: '<url>',
   backgroundColor: '<color>',
   buttonColor: '<color>',
   textColor: '<color>',
   hideInfo: false,
   params: {name: '<name>', email: '<email>', phone: '<phone>', questions: '<답변1>,<답변2>'}
})
```

* 팝업 위젯을 생성 합니다.
* 상단에 위젯 버튼 초기화 참고

#### closePopupWidget > 팝업 위젯 제거

```jsx
WhatTime.closePopupWidget()
```

* 팝업 위젯을 제거 합니다.

#### \_autoLoadInlineWidgets > 강제 초기로딩

```jsx
window.WhatTime._autoLoadInlineWidgets();
```

* 기본적으로는 별도로 호출하지 않아도 됩니다. \<div> 태그가 js 가 로딩 되는 시점에 존재 하지 않고 이후에 생성된다면 수동으로 호출 하면 웹사이트 중간에 예약 페이지가 삽입됩니다.

***

### 각종 팁

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

* 특정 페이지 에서만 위젯버튼, 텍스트 버튼이 나오도록 설정 할 수 있습니다.

```jsx
<!-- 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](http://whattime.co.kr/test1) 페이지에 뒤에 주소 test1 입니다.

#### JS 스크립트 로딩 보다 div 엘레먼트가 먼저 생성된 경우 웹사이트 중간에 삽입

* 초기 로딩을 수동으로 진행

```jsx
useEffect(() => {
    window.WhatTime._autoLoadInlineWidgets();
}, [])
```

#### 위젯이 잘 뜨지 않나요?

* 웹페이지 로딩이 느려서 위젯 버튼이 뜨지 않는 경우 아래 코드를 활용해 주세요.

```jsx
<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>
```

#### 인풋 값에 따라 예약 페이지 나오도록 설정

{% hint style="info" %}
아래 코드를 그대로 다운로드 하여 실행이 가능합니다
{% endhint %}

* 월 평균 주문수 1000건 이상에서만 예약 기능을 활성화 합니다.

```html
<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>

```

***

### 위젯 스타일링 하기

* 위젯 버튼 왼쪽 하단으로 변경

```css
.whattime-badge-widget { right: auto !important; left: 20px !important; }
```

* 위젯 버튼 중앙 하단으로 변경

```css
.whattime-badge-widget { left: 50% !important; margin-left: -100px!important; }
```

* X 버튼 색깔 변경

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

* 임베디드 인라인 위젯 스크롤 나오게 하지 않기
  * style 에 높이를 충분히 크게 설정하여 예약 페이지 높이가 넘치지 않도록 설정
  * meta 태그를 추가하여 모바일에서 최대화면으로 나오게 변경

```html
<div class="whattime-inline-widget" 
     data-url="https://whattime.co.kr/jay/interview"
     style="min-width:320px; height: 1024px;">
</div>
```

```html
<meta name="viewport" content="width=device-width, initial-scale=1">
```

* 위젯 팝업 백그라운드 클릭해도 닫히지 않도록 처리
  * 백그라운드 `div` 를 표현되지 않도록 변경

```jsx
<style>
    .whattime-close-overlay {
        display: none;
    }
</style>
```

***

## 위젯 예제

* React(NextJS)

  * <https://github.com/GoodGoodCo/whattime-widget-react>

  ```jsx
  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>
    );
  };
  ```