사용자 정의 구독 팝업
사용자 정의 구독 팝업은 웹 페이지에 표시되어 사용자에게 웹 푸시 알림 구독을 제안하는 팝업 창입니다. 이 기능은 Pushwoosh WebSDK로 구현되며, 기본 구독 프롬프트 표시에 대한 브라우저 제한을 극복할 수 있게 해줍니다. 기본 구독 팝업은 특정 사용자에게 단 두 번만 표시될 수 있습니다. 사용자가 푸시 알림을 허용하지 않고 기본 구독 팝업을 연속으로 두 번 닫으면, 팝업은 다시 표시되지 않으며 푸시 알림은 차단된 것으로 간주됩니다. 반면 사용자 정의 구독 팝업은 사용자가 명시적으로 푸시 알림을 구독하거나 차단하지 않는 한 필요한 만큼 여러 번 표시될 수 있습니다.
사용자 정의 구독 팝업에는 푸시 알림 구독의 이점을 설명하는 모든 텍스트와 두 개의 사용자 정의 가능한 버튼, 즉 ‘나중에 묻기’ 옵션 버튼과 ‘구독’ 버튼을 포함할 수 있습니다.
사용자가 ‘구독’ 버튼을 누르면 기본 구독 팝업이 나타납니다.
사용자가 ‘나중에 묻기’ 버튼을 누르거나 창을 닫으면, 사용자 정의 구독 팝업은 지정된 시간 후에 다시 나타납니다 (기본적으로 일주일 후이며, 재시도 지연 시간은 retryOffset 파라미터를 통해 사용자 정의할 수 있습니다).
사용자 정의 구독 팝업을 활성화하고 사용자 정의하려면 Pushwoosh WebSDK를 초기화할 때 다음 스크립트를 사용하세요:
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' }});사용자 정의 구독 팝업 인스턴스에 접근하기
Anchor link to사용자 정의 구독 팝업 인스턴스는 Pushwoosh.moduleRegistry.subscribePopup을 통해 사용할 수 있습니다.
참고: 이 인스턴스는 subscribe-popup-ready 이벤트가 트리거된 후에만 접근할 수 있습니다. 그러나 사용자가 이미 푸시 알림을 구독한 경우에는 사용할 수 없습니다.
이 인스턴스는 팝업을 수동으로 표시하거나 숨길 수 있는 toggle() 메서드를 제공합니다:
// 사용자 정의 구독 팝업을 수동으로 표시하거나 숨깁니다Pushwoosh.moduleRegistry.subscribePopup.toggle(); // 표시 여부를 토글합니다Pushwoosh.moduleRegistry.subscribePopup.toggle(true); // 팝업을 표시합니다Pushwoosh.moduleRegistry.subscribePopup.toggle(false); // 팝업을 숨깁니다이를 통해 코드에서 직접 팝업의 동작을 더 세밀하게 제어할 수 있습니다.
기본적으로 구독 팝업은 ‘material’ 테마를 사용하며, 표시될 때 화면의 일부를 덮어 웹사이트 방문자에게 일부 콘텐츠를 가립니다.
구독 팝업으로 인해 중요한 콘텐츠가 가려지는 것을 방지하려면, ‘topbar’ 테마를 사용하여 팝업이 화면 상단에 좁은 막대 형태로 표시되도록 하세요.
사용자 정의 구독 팝업 이벤트
Anchor link to사용자 정의 구독 팝업과의 상호작용을 추적하기 위해 다음 이벤트를 사용할 수 있습니다:
// 사용자 정의 구독 팝업이 로드되어 표시 준비가 완료되었을 때 실행됩니다// 참고: 사용자가 이미 푸시 알림을 구독한 경우에는 이 이벤트가 트리거되지 않습니다.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");});