# 개발 연동 하기

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://guide.whattime.co.kr/getting-started/share/embed/dev.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.