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

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

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

<figure><img src="https://3191135667-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmJRoWErqGcwBOdffVRxj%2Fuploads%2FkQCnkskRcc5Q1KBHyiXv%2Fimage.png?alt=media&#x26;token=8b6feea7-e0fb-4690-b01a-b43038a925e5" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3191135667-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmJRoWErqGcwBOdffVRxj%2Fuploads%2FUbUMV2ezkpcOmKNFoAJN%2Fimage.png?alt=media&#x26;token=f4051fb3-9b13-450d-bfca-4a59aefea371" 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>"		
	}
});
```