# 웹사이트에 예약 기능 넣기

## 자신의 홈페이지에 손쉽게 예약 페이지 기능을 넣을 수 있습니다.

1. \[예약 페이지] - \[전달] : 샘플 [미리보기](https://when-prod.s3.ap-northeast-2.amazonaws.com/widget/sample/index.html)

<figure><img src="/files/RLaaddXSARZoCuXP7cai" alt=""><figcaption></figcaption></figure>

2. 홈 화면 예약 페이지에서 전달 버튼을 누르고 팝업에서 웹사이트 삽입을 선택합니다.

<figure><img src="/files/8GfucDQU7MzD3OGzyBgU" alt=""><figcaption></figcaption></figure>

3. 위젯 타입

   * 웹사이트 중간에 삽입 :원하는 위치에 여러 개의 예약 페이지를 넣을 수 있습니다.
   * 위젯 버튼 삽입 :웹사이트 페이지 하단 오른쪽에 예약하기 버튼을 넣을 수 있습니다.
   * 텍스트 버튼 삽입 :웹사이트 여러 부분에 버튼을 삽입하여 예약 페이지를 팝업 형태로 만들 수 있습니다.

### 부가 설정

#### 이름 이메일 연락처 자동완성

* 자체 웹사이트에서 로그인을 통해 이름, 이메일, 연락처 정보가 있다면 예약자 정보를 자동 완성할 수 있습니다.
* 웹사이트 중간에 삽입

```html
<div class="whattime-inline-widget"
     data-url="<url>"
     data-name="<이름>"
     data-email="<이메일>"
     data-phone="<전화번호>"
     data-questions="<답변1>,<답변2>"
     data-utm-campaign="<utm_campaign>"
     style="min-width:320px; height: 680px;">
</div>
```

* 위젯 버튼

```javascript
WhatTime.initPopupWidget({
   url: '<url>',
   params: {name: '<이름>', email: '<이메일>', phone: '<전화번호>', questions: "<답변1>,<답변2>", utm_campaign: "homepage"}
 })
```

* 텍스트 버튼

```javascript
window.onload = function() {
    WhatTime.initBadgeWidget({
      url: "<url>",
      params: {name: '<이름>', email: '<이메일>', phone: '<전화번호>', questions: "<답변1>,<답변2>", utm_campaign: "homepage"}
    });
  };
```

#### UTM 으로 예약된 곳 추적

* 웹사이트 중간에 삽입

```html
<div class="whattime-inline-widget"
	data-url="<url>"
	data-utm-campaign="<utm_campaign>"
	data-utm-source="<utm_source>"
	data-utm-medium="<utm_medium>"
	data-utm-content="<utm_content>"
	data-utm-term="<utm_term>"
	data-guest-uid="<guest_uid>"
	style="min-width:320px; height: 680px;">
</div>
```

* 위젯, 텍스트 버튼

```javascript
WhatTime.initBadgeWidget({
	url: "<url>",
	params: { 
		utm_campaign: "<utm_campaign>", 
		utm_source: "<utm_source>",
		utm_medium: "<utm_medium>",
		utm_content: "<utm_content>",
		utm_term: "<utm_term>"		
	}
});
```


---

# 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.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.