# 웹 인박스 위젯

웹사이트에 [Web Message Inbox](/ko/developer/guides/message-inbox/web-message-inbox/)를 통합하면 전환율이 크게 증가합니다. 바로 사용할 수 있는 **웹 인박스 위젯**은 사용자와 통신하는 데 필요한 모든 메서드에 기본적으로 구독되어 있습니다. 웹사이트에 위젯을 통합하고 브랜드에 맞게 모양을 사용자 지정하기만 하면 됩니다.

## 전제 조건

웹사이트용 메시지 인박스를 통합하려면 [가이드](/ko/developer/guides/message-inbox/web-message-inbox/)를 따르세요.

## 위젯 통합

Pushwoosh WebSDK 를 초기화할 때 `inboxWidget` 파라미터를 추가합니다:

```txt title="예시"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox'
  }
}]);
```

### 트리거

위젯을 렌더링하려면 위젯에 대한 **트리거 요소**를 지정해야 합니다. 페이지의 모든 DOM 요소가 트리거가 될 수 있습니다. ID를 "pwInbox"으로 지정하거나 SDK 를 초기화할 때 `triggerId` 파라미터에 사용자 지정 ID를 할당합니다.\
WebSDK 가 초기화되면 읽지 않은 메시지 배지가 트리거 요소에 표시됩니다. 트리거 요소를 탭하면 위젯이 페이지에 나타납니다.

<img src="/web-push-notifications-web-inbox-widget-1.webp" alt=""/>

### 위치 지정

기본적으로 위젯은 트리거 요소에서 가장 가까운 화면 경계의 반대 방향에 위치합니다.\
구성 파라미터를 통해 위젯의 위치를 설정할 수 있습니다:

```txt title="예시"
Pushwoosh.push(['init', {

  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    position: 'top'
  }
}]);
```

기본적으로 `inboxWidget`은 닫는 \</body> 태그 앞에 위치해야 합니다.\
아래 예시와 같이 페이지의 어느 곳에나 위젯을 렌더링할 수 있습니다:

```txt title="예시"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {

    enable: true,
    triggerId: 'pwInbox',
    appendTo: '.widget-parent-element-class'
  }
}]);
```

상위 요소 검색은 querySelector 로 수행되므로 클래스, id 또는 요소를 명확하게 지정해야 합니다.

## 위젯 사용자 지정

### 텍스트 사용자 지정

위젯 텍스트를 사용자 지정하려면 `emptyInboxTitle` 및 `emptyInboxText` 파라미터를 추가합니다:

```txt title="예시"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    title: 'Inbox',                                 // 위젯 제목
    emptyInboxTitle: 'You\'re all caught up',       // 빈 인박스 위젯 제목
    emptyInboxText: 'There are no new messages. Stay tuned!'    // 빈 인박스 위젯 텍스트
  }
}]);
```

결과는 다음과 같습니다:

<img src="/web-push-notifications-web-inbox-widget-2.webp" alt=""/>

### 모양 사용자 지정

위젯의 **모양**을 사용자 지정하려면 다음 파라미터를 사용합니다:

```txt title="예시"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    bgColor: '#ffffff',         // 위젯 배경
    borderColor: 'transparent', // 위젯 테두리 색상
    borderRadius: 4,            // 위젯 테두리 반경 (px)
    widgetWidth: 350,           // 위젯 너비 (px)
    zIndex: 100                 // z-index
  }
}]);
```

**읽지 않은 메시지 수 배지**는 다음과 같이 사용자 지정할 수 있습니다:

```txt title="예시"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    badgeBgColor: '#ff4c00',    // 배지 색상
    badgeTextColor: '#ffffff'   // 배지 텍스트 색상
  }
}]);
```

**텍스트 속성**을 사용자 지정하려면 다음 코드를 추가합니다:

```txt title="예시"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    textColor: '#333333',                       // 텍스트 색상
    fontFamily: 'Helvetica, Arial, sans-serif', // 글꼴
    messageTitleColor: '#7a7a7a',               // 메시지 제목 색상
    timeTextColor: '#c4c4c4',                   // 타임스탬프 텍스트 색상
    emptyInboxTitleColor: '#333333',            // 빈 인박스 제목 색상
    emptyInboxTextColor: '#7a7a7a'              // 빈 인박스 텍스트 색상
  }
}]);
```

마지막으로 **빈 인박스에 대한 아이콘**을 지정할 수 있습니다:

```txt title="예시"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    emptyInboxIconUrl: 'https://pushon.pushwoosh.com/images/icon-empty-inbox.png'   // 아이콘의 URL 경로
  }
}]);
```

## API

위젯을 열거나 닫으려면 다음 API 메서드를 사용합니다:

```txt title="예시"
Pushwoosh.pwinboxWidget.toggle(open?: boolean);
```