푸시 구독 버튼

더 많은 푸시 구독자를 확보하고 사용자 경험을 개선하세요! 웹사이트에 맞춤형 구독 버튼을 설정하여 옵트인율을 높이세요. 신규 방문자에게 표준 대화 상자를 자동으로 표시하는 대신, 메시지의 가치를 설명하고 사용자가 만족할 때 푸시 알림을 구독하도록 유도하세요. 두 가지 간단한 단계만 거치면 맞춤형 푸시 구독 버튼을 준비하고 작동시킬 수 있습니다!

1. 웹 SDK 구독 버튼 구현

웹사이트에 버튼을 표시하려면 Pushwoosh 웹 SDK 의 초기화 매개변수에 다음 코드를 추가하세요:

Pushwoosh.push(['init', {
  //...
  autoSubscribe: false,
  subscribeWidget: {
    enable: true,
  }
}]);

버튼을 설정할 때 autoSubscribe 를 비활성화해야 합니다!

2. 버튼 사용자 지정

버튼이 웹사이트의 디자인과 일치하도록 디자인을 사용자 지정하세요! 벨 색상, 위치, 테두리, 그림자 등의 매개변수를 변경할 수 있으며, 툴팁 텍스트도 변경할 수 있습니다.

Pushwoosh.push(['init', {
  //...
  subscribeWidget: {
    enable: true,
    position: 'bottomLeft', //possible values: ‘bottomLeft’, ‘bottomRight’, ‘topLeft’, ‘topRight’
    bgColor: '#12AE7E',
    bellColor: 'white',
    bellStrokeColor: '#08754f',
    bellButtonBorder: '1px solid #379676',
    shadow: '0px 0px 6px rgba(0, 0, 0, 0.75)',
    size: '48px',
    indent: '20px',
    zIndex: '999999',
    tooltipText: {
      successSubscribe: 'You are successfully subscribed!',
      needSubscribe: 'Get notifications about important news!',
      blockSubscribe: 'Click to see how to get notifications',
      alreadySubscribed: 'You are already subscribed'
    }
    buttonImage: 'https://url-image.jpg',
    contentImages: {
      chrome: 'https://url-image.jpg',
      mobileChrome: 'https://url-image.jpg',
      firefox: 'https://url-image.jpg',
      opera: 'https://url-image.jpg',
      safari: 'https://url-image.jpg',
      edge: 'https://url-image.jpg',
    }
  }
}]);