Estimated setup time: 15 minutes.
If you haven't already, sign up for a free account on wonderpush.com.
This guide works for any website. Please note that we have specific instructions for WordPress, Wix, React and Google Tag Manager.
Step 1. Create your project
Click on New Project:
Choose a name for your project and select Website as a platform then click Create:
Already have a project?
Just add the Website platform to any existing project by going to Settings, selecting the first tab named after your project and clicking Edit. You'll be presented a form that lets you add a platform.
Step 2. Fill-in website info
Enter URL
Enter the base URL of your site (e.g. https://example.com).
If your site is accessible from both HTTPS and non-HTTPS URLs, enter the HTTPS URL here.
If your site is accessible from both www. and non-www. URLs (e.g. example.com and www.example.com) we recommend you redirect traffic to one of the URLs and use that to fill-in the URL field.
Enter name
Enter the name of your website. This name might be displayed when users subscribe to push notifications.
Enter Icon
Enter the URL to your website icon. Your website icon will be displayed in notifications. It should be a square image file. Prefer HTTPS.
Step 3. Choose your notification domain
WonderPush lets you send push notifications from your own domain, or from a subdomain of .by.wonderpush.com of your choice:
About the push notification domain
Your push notification domain will be displayed in every notification you send:
In this example, the notification domain is mywebsite.by.wonderpush.com.
When users subscribe to push notifications, they grant your domain the permission to send them push notifications. When you change the push notification domain, users have to subscribe again!
For these reasons, it is especially important to choose the right push notification domain from the start.
Using your own domain
Recommended
This is the best option. It is only available for HTTPS websites. If your website does not support HTTPS, or if you can't upload SDK files, use .by.wonderpush.com.
Using a by.wonderpush.com subdomain
If your site does not support HTTPS, or if you can't upload SDK files, that's your only option.
Please note that moving to HTTPS has never been that easy now that Let's Encrypt provides free SSL certificates.
Step 4. Upload SDK files
Ignore if your push notification domain is a subdomain of `by.wonderpush.com`
Subdomains of by.wonderpush.com do not need any extra files. Skip to the next step.
Download wonderpush.min.html and wonderpush-worker-loader.min.js
Upload both of these files to the top-level root of your website directory to make them publicly accessible.
Once you've uploaded both files, the following URLs should be publicly accessible (replace example.com with your site domain):
https://example.com/wonderpush.min.htmlhttps://example.com/wonderpush-worker-loader.min.js
Step 5. Configure subscription dialog
The subscription dialog is an efficient and straightforward way to let users subscribe. The dialog shows automatically based on criteria you can configure:
You can also customize the textual content and position of the dialog:
Subscription Prompts
WonderPush offers many ways to subscribe users out of the box. Head over to our Subscription Prompts page for complete list.
Step 6. Copy code
To enable WonderPush on your site, paste the code from your dashboard into every page of your website. If you do not have access to your site's code, get help from a developer.
Receive your first push!
Head over to your website and refresh the page until you see the subscription dialog you've previously configured and click the positive button:
Wait a couple of minutes and receive the default welcome notification:
Congratulations, you're done!
What's Next
Customize your subscription prompt using one of our pre-made UIs. Set properties on users and send events using our Website SDK (javascript).
| Subscription Prompts |
| Properties |
| Events |
| Website SDK |