# 사용자 정의 구독 팝업

**사용자 정의 구독 팝업**은 웹 페이지에 표시되어 사용자에게 웹 푸시 알림 구독을 제안하는 팝업 창입니다. 이 기능은 [Pushwoosh WebSDK](/ko/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/#integration)로 구현되며, 기본 구독 프롬프트 표시에 대한 브라우저 제한을 극복할 수 있게 해줍니다. 기본 구독 팝업은 특정 사용자에게 단 두 번만 표시될 수 있습니다. 사용자가 푸시 알림을 허용하지 않고 기본 구독 팝업을 연속으로 두 번 닫으면, 팝업은 다시 표시되지 않으며 푸시 알림은 차단된 것으로 간주됩니다. 반면 **사용자 정의 구독 팝업**은 사용자가 명시적으로 푸시 알림을 구독하거나 차단하지 않는 한 필요한 만큼 여러 번 표시될 수 있습니다.

**사용자 정의 구독 팝업**에는 푸시 알림 구독의 이점을 설명하는 모든 텍스트와 두 개의 사용자 정의 가능한 버튼, 즉 '나중에 묻기' 옵션 버튼과 '구독' 버튼을 포함할 수 있습니다.

사용자가 '구독' 버튼을 누르면 기본 구독 팝업이 나타납니다.

사용자가 '나중에 묻기' 버튼을 누르거나 창을 닫으면, 사용자 정의 구독 팝업은 지정된 시간 후에 다시 나타납니다 (기본적으로 일주일 후이며, 재시도 지연 시간은 `retryOffset` 파라미터를 통해 사용자 정의할 수 있습니다).

## 구현

**사용자 정의 구독 팝업**을 활성화하고 사용자 정의하려면 [Pushwoosh WebSDK](/ko/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/#integration)를 초기화할 때 다음 스크립트를 사용하세요:

```javascript title="예시"
Pushwoosh.push('init', {
    // . . .,
    subscribePopup: {
        enable: true,                      // (boolean) 팝업 활성화
        text: '팝업 텍스트',             // (string) 팝업에 표시할 텍스트
        confirmSubscriptionButtonText: '구독', // (string) "구독" 버튼의 사용자 정의 텍스트

        manualToggle: false,               // (boolean) 팝업 표시 수동 제어
        delay: 60,                         // (integer) 페이지 로딩과 팝업 표시 사이의 지연 시간
        retryOffset: 604800,               // (integer) 팝업을 다시 표시하기까지의 오프셋(초)

        iconUrl: 'https://...',            // (string) 사용자 정의 아이콘 URL
        iconAlt: '아이콘에 대한 설명 텍스트', // (string) 아이콘의 ALT 텍스트
        overlay: false,                    // (boolean) 팝업 표시 시 페이지 오버레이 활성화
        position: 'top',                   // (string) 페이지에서의 위치. 가능한 값: 'top' | 'center' | 'bottom'
        mobileViewMargin: '10px',          // (string) 모바일 뷰의 여백

        bgColor: '#fff',                   // (string) 팝업 배경색
        borderColor: 'transparent',        // (string) 팝업 테두리 색상
        boxShadow: '0 3px 6px rgba(0,0,0,0.16)', // (string) 팝업 그림자

        textColor: '#000',                 // (string) 팝업 텍스트 색상
        textSize: 'inherit',               // (string) 팝업 텍스트 크기
        textWeight: 'normal',              // (string) 팝업 텍스트 굵기
        fontFamily: 'inherit',             // (string) 팝업 텍스트 글꼴

        subscribeBtnBgColor: '#4285f4',         // (string) "구독" 버튼 배경색
        subscribeBtnTextColor: '#fff',          // (string) "구독" 버튼 텍스트 색상
        subscribeBtnTextWeight: 'bold',         // (string) "구독" 버튼 텍스트 굵기
        subscribeBtnBorderColor: 'transparent', // (string) "구독" 버튼 테두리 색상
        subscribeBtnBorderRadius: '4px',        // (string) "구독" 버튼 테두리 반경

        askLaterButtonText: '나중에',          // (string) "나중에 묻기" 버튼의 사용자 정의 텍스트
        askLaterBtnBgColor: 'transparent',      // (string) "나중에 묻기" 버튼 배경색
        askLaterBtnTextColor: '#000',           // (string) "나중에 묻기" 버튼 텍스트 색상
        askLaterBtnBorderColor: 'transparent',  // (string) "나중에 묻기" 버튼 테두리 색상
        askLaterBtnBorderRadius: '4px',         // (string) "나중에 묻기" 버튼 테두리 반경
        askLaterBtnTextWeight: 'normal',        // (string) "나중에 묻기" 버튼 텍스트 굵기

        theme: 'material',               // (string) 팝업 테마, 가능한 값: 'material' | 'topbar'
        viewport: 'desktop'              // (string) 대상 뷰포트, 가능한 값: 'desktop' | 'mobile'
    }
});
```


### 사용자 정의 구독 팝업 인스턴스에 접근하기

**사용자 정의 구독 팝업** 인스턴스는 `Pushwoosh.moduleRegistry.subscribePopup`을 통해 사용할 수 있습니다.

**참고:** 이 인스턴스는 `subscribe-popup-ready` 이벤트가 트리거된 후에만 접근할 수 있습니다. 그러나 **사용자가 이미 푸시 알림을 구독한 경우에는 사용할 수 없습니다.**

이 인스턴스는 팝업을 수동으로 표시하거나 숨길 수 있는 `toggle()` 메서드를 제공합니다:

```javascript
// 사용자 정의 구독 팝업을 수동으로 표시하거나 숨깁니다
Pushwoosh.moduleRegistry.subscribePopup.toggle(); // 표시 여부를 토글합니다
Pushwoosh.moduleRegistry.subscribePopup.toggle(true); // 팝업을 표시합니다
Pushwoosh.moduleRegistry.subscribePopup.toggle(false); // 팝업을 숨깁니다
```

이를 통해 코드에서 직접 팝업의 동작을 더 세밀하게 제어할 수 있습니다.

## 테마

기본적으로 구독 팝업은 **'material' 테마**를 사용하며, 표시될 때 화면의 일부를 덮어 웹사이트 방문자에게 일부 콘텐츠를 가립니다.

<img src="/web-push-notifications-custom-subscription-popup-1.webp" alt="'Material' 테마"/>

구독 팝업으로 인해 중요한 콘텐츠가 가려지는 것을 방지하려면, **'topbar' 테마**를 사용하여 팝업이 화면 상단에 좁은 막대 형태로 표시되도록 하세요.

<img src="/web-push-notifications-custom-subscription-popup-2.webp" alt="'Topbar' 테마"/>

## 사용자 정의 구독 팝업 이벤트

**사용자 정의 구독 팝업**과의 상호작용을 추적하기 위해 다음 이벤트를 사용할 수 있습니다:

```javascript
// 사용자 정의 구독 팝업이 로드되어 표시 준비가 완료되었을 때 실행됩니다
// 참고: 사용자가 이미 푸시 알림을 구독한 경우에는 이 이벤트가 트리거되지 않습니다.
Pushwoosh.addEventHandler('subscribe-popup-ready', function() {
  console.log("트리거된 이벤트: subscribe-popup-ready");
});

// 사용자 정의 구독 팝업이 표시될 때 실행됩니다
Pushwoosh.addEventHandler('subscribe-popup-show', function() {
  console.log("트리거된 이벤트: subscribe-popup-show");
});

// 사용자가 팝업 창에서 '구독' 버튼을 클릭할 때 실행됩니다
Pushwoosh.addEventHandler('subscribe-popup-accept', function() {
  console.log("트리거된 이벤트: subscribe-popup-accept");
});

// 사용자가 팝업 창에서 '나중에 묻기' 버튼을 클릭할 때 실행됩니다
Pushwoosh.addEventHandler('subscribe-popup-decline', function() {
  console.log("트리거된 이벤트: subscribe-popup-decline");
});

// 팝업이 숨겨질 때 실행됩니다
Pushwoosh.addEventHandler('subscribe-popup-hide', function() {
  console.log("트리거된 이벤트: subscribe-popup-hide");
});
```