OneSignal Setup Tool
OneSignal Web Push Notification Setup
Easily configure push notifications for your website with this step-by-step tool
Configuration
1
App Info
2
Notification
3
Settings
4
Finish
You can find this in your OneSignal dashboard under Settings > Keys & IDs
URL to a 192x192px PNG image for notification icons
URL to open when notification is clicked
New Notification
Check out our latest updates!
Setup Complete!
Your OneSignal configuration is ready. Copy the code below and add it to your website.
Generated Code
HTML Code
Manifest
Service Worker
OneSignal Integration Code
<!-- OneSignal Setup Code -->
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
<script>
window.OneSignal = window.OneSignal || [];
OneSignal.push(function() {
OneSignal.init({
appId: "YOUR_APP_ID",
});
});
</script>
<!-- End OneSignal Code -->Add this code to the <head> section of your website
Web App Manifest
{
"name": "Your Website",
"short_name": "Website",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#1a73e8",
"icons": [
{
"src": "https://example.com/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}
]
}Save this as manifest.json in your website root directory
Service Worker
// OneSignal Service Worker
importScripts('https://cdn.onesignal.com/sdks/OneSignalSDKWorker.js');Save this as OneSignalSDKWorker.js in your website root directory
Implementation Instructions
- Copy the HTML code and paste it into the <head> section of your website
- Create a manifest.json file with the provided code
- Create a OneSignalSDKWorker.js file with the service worker code
- Update your HTML to reference the manifest: <link rel="manifest" href="/manifest.json">
- Test your setup by visiting your website
Note: Your website must be served over HTTPS for push notifications to work
${html.replace(//g, '>')}`;
// Generate manifest code
const manifest = `{
"name": "${siteName.value.trim() || 'Your Website'}",
"short_name": "${siteName.value.trim().substring(0, 12) || 'Website'}",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#1a73e8",
"icons": [
{
"src": "${iconUrl.value.trim() || 'https://example.com/icon-192x192.png'}",
"sizes": "192x192",
"type": "image/png"
}
]
}`;
manifestCode.innerHTML = `${manifest.replace(//g, '>')}`;
// Service worker code is static
swCode.innerHTML = `// OneSignal Service Worker
importScripts('https://cdn.onesignal.com/sdks/OneSignalSDKWorker.js');`;
alert('Code generated successfully! You can now copy the code snippets.');
}
// Function to reset the form
function resetForm() {
appId.value = '';
siteName.value = '';
siteUrl.value = '';
iconUrl.value = '';
notificationTitle.value = 'New Notification';
notificationMessage.value = 'Check out our latest updates!';
notificationUrl.value = '';
promptStyle.value = 'slide';
autoPrompt.checked = true;
welcomeNotification.checked = true;
notifyButton.checked = true;
promptMessage.value = 'We\'d like to show you notifications for the latest updates.';
updatePreview();
// Reset code blocks
htmlCode.innerHTML = `<!-- OneSignal Setup Code -->
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
<script>
window.OneSignal = window.OneSignal || [];
OneSignal.push(function() {
OneSignal.init({
appId: "YOUR_APP_ID",
});
});
</script>
<!-- End OneSignal Code -->`;
manifestCode.innerHTML = `{
"name": "Your Website",
"short_name": "Website",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#1a73e8",
"icons": [
{
"src": "https://example.com/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}
]
}`;
swCode.innerHTML = `// OneSignal Service Worker
importScripts('https://cdn.onesignal.com/sdks/OneSignalSDKWorker.js');`;
}
});
