https://github.com/filipchalupa/onesignal-custom-button-helper
https://github.com/filipchalupa/onesignal-custom-button-helper
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/filipchalupa/onesignal-custom-button-helper
- Owner: FilipChalupa
- Created: 2020-01-09T21:36:21.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-01-09T21:52:39.000Z (over 5 years ago)
- Last Synced: 2025-01-19T04:41:32.214Z (3 months ago)
- Language: TypeScript
- Size: 159 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# OneSignal custom button helper
Do you like the default OneSignal bell icon? You don't? Are `promptyOptions.customLink` options too limiting for you. Build your own subscribe button with `onesignal-custom-button-helper`.
## Installation
`npm install --save onesignal-custom-button-helper`
## Usage
Follow [OneSignal documentation](https://documentation.onesignal.com/docs/web-push-custom-code-setup) to init OneSignal SDK and add OneSignal service worker. Hide default subscribe button provided by OneSignal by setting `notifyButton.enable` to `false`.
### Javascript (OneSignal SDK initialization)
```javascript
var OneSignal = window.OneSignal || []
OneSignal.push(function() {
OneSignal.init({
appId: 'your-onesignal-app-id',
notifyButton: {
enable: false, // Hides OneSignal circular bell button
},
})
})
```
### HTML
```html
```
### JavaScript (custom button handler)
```js
import { onesignalCustomButtonHelper } from 'onesignal-custom-button-helper'
const $button = document.querySelector('#togglePush')
const toggle = onesignalCustomButtonHelper((state) => {
if (state === 'not-supported') {
// Keep toggle button hidden
return
}
if (state === 'loading') {
// Prevent user from clicking it
$button.disabled = true
$button.innerText = 'Loading…'
} else {
// Reenable and show button if not visible
$button.disabled = false
$button.style.display = 'inline-block'
// Update text accordingly
if (state === 'subscribed') {
$button.innerText = 'Unsubscribe'
}
if (state === 'not-subscribed') {
$button.innerText = 'Subscribe'
}
}
})
// Toggle subscription on button click
$button.addEventListener('click', toggle)
```
## Screencast
## State
- `'subscribed'` - user is subscribed
- `'not-subscribed'` - user is not yet subscibed or has unsubscribed
- `'loading'` - transitioning between states
- `'not-supported'` - browser doesn't support push notifications - hide button