OneSignal provides a simple interface to push notification. It is a high reliable push notification services for web sites and Mobile applications.
Follow these simple steps to integrate OneSignal in AMP.
1. Getting started with Push Notifications in AMP
From the dashboard we go to left-hand side in Menu bar go to AMP option panel -> Settings ->Push Notification ->Enable One Signal Push Notification.
After that enable OneSignal Push Notification it will show APP ID option.
Follow the Step to install OneSignal Plugin:
1) Install OneSignal Plugin.
2) From the dashboard, we go to the left-hand side in Menu bar go to OneSignal Push
3) After that need to Set Up Option and Create a OneSignal Account.
4) After that Created OneSignal Account. In this account key and ID’s will generated.
5) This key should be copy and past in OneSignal push option -> Configuration tab ->APP ID AND REST API key click on the save changes button.
2. Implement Push Notifications in AMP
In push Notification, you can set the APP ID. You can also already get this key from OneSignal Plugin settings:
Follow the Step to Set APP ID :
1) AMP optional panel -> Settings ->Push Notification option ->Enable OneSignal option -> Enter APP ID from OneSignal Account and the Click on the “Save Changes” button.
- Below the Content: Once you enable this option it will be show Subscribe Button Below the Content.
- Above the Content: Once you enable this option it will be show Subscribe Button Above the Content.
3. How to use OneSignal App without HTTPS
AMP web push is only compatible with URLs that begin with https://.
OneSignal still supports AMP web push for HTTP sites that use a subdomain of OneSignal (e.g. subdomain.os.tc), but when viewing the HTTP site as an AMP page, the site URL must be HTTPS.
When users view an AMP page on an actual mobile device, they are often directed by Google to a URL like “https://www.google.com/amp/www.site.com”. This means that HTTP sites that don’t ordinarily support HTTPS will actually support HTTPS thanks to Google if the AMP page is cached by Google and navigated from Google’s search results.
If your site doesn’t have an HTTPS connection(SSL)
Follow the Step for Experimental subdomain option :
1) AMP optional panel -> Settings ->Push Notification option -> Experimental
2) First, enable the HTTP Site option and enter the subdomain:
The Output Of OneSignal Push Notifications
- Skip step 3 if your site uses an HTTPS connection (SSL)
- Resave The Permalinks
- It will not display push Notification on localhost. Your site must be on https.
That’s it for this tutorial!
We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.
I wanna ask…
It can be integrate push notification ads (propeller push notifications) to amp popup?
Does Propeller push notifications provide AMP compatibility code? if yes then only you can added.
It is not working in my phone browser, I have done the same way you explain, but still not working.
please help me
Will you please provide us exact URL so we will check and help you and are you using HTTPS on your website?
Yes, I am using HTTPS through Cloudflare.
Which you have provided URL it will not open it showing this message –
“SSL not enabled for http://www.infospot.in.
If you are the owner of this website, you can order SSL addon at Free Hosting website”
will you please provide proper URL so we will check and fix the issue as soon as possible.
One signal doesn’t work on phones browser in my site.
My site is https://thetennistime.com/
This push notification works only on a Desktop browser.
We have checked your website and found that One signal is not working in Desktop browser as well as a phone device. Have you disabled the option of one signal in AMP?
I have not disabled the option of one signal in amp settings. I added app ID and enabled One signal in amp settings.
We have checked your website and found that OneSignal is working properly – https://monosnap.com/file/9OSDmHB0pXua60kfAlX5iQIJV80UTt will you please check now and let us know.
Hi. I have followed the steps above, including resaving my permalinks, and I am not seeing the push notifications button on desktop (or on mobile for that matter). I could see the button before resaving permalinks but clicking on it did nothing. I’m not sure what I’m doing wrong. Can you take a look? Thank you. Site is https://italofile.com.
Will you please contact our support team – https://ampforwp.com/support/ and they will help you to fix the issue.
Help me There.. One signal doesn’t work on phones browser in my site (AMP)
My site is https://www.androidponsel.com
This push notification works only on a Desktop browser.
We have checked your website and found that One signal work on phones browser – https://take.ms/f2GlS will you please check that and let us know.
Is my website use AMP but not use plugin AMP, what is the solution? sorry for my english, i´m spanish 😉
If you don’t want to use any AMP plugin then you need to create your own custom AMP template for your website and you can do it by following -https://amp.dev/documentation/guides-and-tutorials/start/create/?format=websites
One signal doesn’t work on phones browser!
my site is https://kech24.com/amp
Will you please update the version on 1.6 and still if you are facing issue/problem then contact our technical team – https://ampforwp.com/support/ they will help you as soon as possible
I don’t know why, but my OneSignal is no longer working on AMP.
I always keep the plugins updated, and still find error:
It appears, but clicking does not subscribe to the site. It is inactive type.
Please help me!
My website: https://androidfinal.com
Hi Elton Ostrev,
Will you please contact our technical team from here- https://ampforwp.com/support/ they will help you as soon as possible.
I followed the same guide but there is a problem with my site and Google Search Console is now showing all my website pages as AMP incompatible. The site is https://blucellphones.us/best-smartphone-under-100-dollars/ and I have sent you directly the single post URL so that you can verify. I have currently disabled Onesignal.
Am also trying to implement OneSignal on my Company’s website (https://www.ambalink.com/). It’s NOT showing on mobile browsers! Pretty frustrating,,,
Will you please tell us how you set up OneSignal on your website and also will you please share some screenshots for us to understand your issue properly.
There’s no place for attaching screenshots here. Maybe I’ll send via email or something?