홈페이지 알림구독 설정 (푸시메시지)


메시지 란?

귀하의 홈페이지에 접속한 사용자가 "알림" 팝업 동의에 허용하게 되면 해당 사용자에게 메시지를 보낼 수 있습니다.
알림 메시지는 웹브라우저가 설치된 모든 PC 또는 휴대폰 기기에서 수신됩니다.

Android 또는 iOS 모바일 앱의 Push 메시지와 비슷하지만 사용자가 앱을 설치할 필요없이
웹브라우저에서 "알림" 팝업에 허용만 하면 모든 메시지를 수신할 수 있어 마케팅에 효과적입니다.


알림 동의 팝업 예:



비볼디 메시지의 장점

- 이메일보다 수신율이 매우 높으며 데스크탑 PC, 휴대폰, 태블릿 등 웹브라우저가 설치된 모든 기기에서 메시지 수신이 가능합니다.
  (단, 구형 Microsoft Internet Explorer 웹브라우저에서는 알림이 수신되지 않습니다.)
- SMS 문자 메시지보다 많은 내용을 전송할 수 있습니다. (회사 로고 및 이미지 첨부 가능)
- 사용자가 알림 메시지를 클릭할 경우 특정 웹사이트로 유도할 수 있습니다.
- 귀하의 홈페이지에 비볼디에서 제공하는 JavaScript 코드만 삽입하면 알림 구독, 메시지 발송을 즉시 할 수 있습니다.

메시지 구독 및 알림 팝업 표시

1. 아래의 JavaScript 코드를 귀하의 홈페이지 하단에 삽입합니다.
<script src="https://resource.vivoldi.com/common/js/webpush.min.js?ver=202006131" type="text/javascript"></script>
<script>
webpush.register({
    apiKey: 'Your API Key',
    publicKey: 'Your domain public key',
    customKey: 'Your Member id',
    customField1: '',
    customField2: '',
    customField3: '',
    serviceWorkerPath: '/sw.min.js',
    callback: function(isSuccess, response){
        console.log(isSuccess);
        console.log(response);
        console.log('pushId:' + response.result);
    }
});
</script>
- apiKey: "대시보드 >> 개발자 API" 페이지에서 API KEY를 생성할 수 있습니다.
- publicKey: "대시보드 >> 메시지 >> 도메인" 페이지에서 도메인 등록 후 확인할 수 있습니다.
- customKey: 귀하의 웹사이트에 로그인한 사용자의 사용자ID를 입력합니다. 로그인을 하지 않은 사용자의 경우 공백으로 두세요.
   (값이 있을 경우 중복되지 않아야 합니다.)
   일반적으로 Session에 저장된 사용자ID를 입력합니다.
- customField1, customField2, customField3: 사용자를 비볼디 대시보드에서 분별할 수 있는 추가 정보(이름, 성별 등)를 입력합니다.
- serviceWorkerPath: sw.js 파일의 상대 위치를 입력합니다. 일반적으로 홈페이지 root(/)에 sw.js 파일을 저장합니다.
   sw.js 파일은 사용자가 알림 구독에 반드시 필요한 파일입니다.
- callback.isSuccess: true 값은 알림 구독이 성공했음을 의미합니다. false 값은 처리 실패입니다.
- callback.response: result 값에 pushId가 저장됩니다.
   비볼디의 API를 사용하여 귀하의 웹사이트에서 사용자에게 개별적으로 알림을 보내려면 데이터베이스에 pushId 값을 저장하세요.
   비볼디에서 제공하는 메시지 발송 API에 pushId가 필요합니다.
   비볼디 대시보드에서 사용자 개별적으로 메시지를 발송할 경우 pushId가 필요없습니다.
2. sw.js 파일 다운로드
- sw.js 파일 다운로드 후 FTP를 이용하여 귀하의 홈페이지 root(/) 경로로 업로드하세요.
3. 알림 구독
- 귀하의 홈페이지에 접속 후 "알림" 동의 창이 표시되면 허용 버튼을 클릭합니다.
4. 회사 로고 변경
- 별도로 대시보드에서 회사 로고를 업로드하지 않으면 기본으로 비볼디 로고가 메시지에 표시됩니다.
- "대시보드 >> 설정 >> 회사 설정" 페이지에서 회사 이름과 회사 로고를 업로드를 하시면 됩니다.
5. 메시지 발송
- "대시보드 >> 메시지 >> 도메인 구독 메시지" 페이지로 이동한 후 "메시지 발송" 버튼을 클릭하여 알림 메시지를 발송 합니다.

메시지를 처음 결제하시는 개인 또는 회사의 경우 비볼디에서 스크립트 삽입과 기능이 정상적으로 작동될 수 있게 지원을 하고 있습니다.

메시지 전송

비볼디 대시보드에서는 전체 사용자에게 메시지를 보낼 수 있으며 사용자 개별적으로 메시지를 전송하려면 아래 메시지 전송 API를 이용하세요.
<script src="https://resource.vivoldi.com/common/js/webpush.min.js?ver=202006131" type="text/javascript"></script>
<script>
webpush.send({
    apiKey: 'Your API Key',
    publicKey: 'Your domain public key',
    pushId: 'Your Push id',
    url: 'https://yourdomain.com',
    ttl: 'Title',
    conts: 'Contents',
    imgUrl: 'https://yourdomain.com/images/test.jpg'
});
</script>
- apiKey: "대시보드 >> 개발자 API" 페이지에서 API KEY를 생성할 수 있습니다.
- publicKey: "대시보드 >> 메시지 >> 도메인" 페이지에서 도메인 등록 후 확인할 수 있습니다.
- pushId: 메시지 구독 API 호출 후 Callback으로 응답받은 pushId 값을 입력합니다.
- url: 사용자가 메시지를 클릭했을 때 이동할 URL입니다.
- ttl: 메시지 제목을 입력합니다.
- conts: 메시지 내용을 입력합니다.
- imgUrl: 사용자에게 표시될 이미지 URL을 입력합니다.
메시지 수신 샘플
Web Browser
Windows
Mobile