{"id":4210,"date":"2017-11-06T20:46:13","date_gmt":"2017-11-06T20:46:13","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=4210"},"modified":"2019-12-04T08:12:14","modified_gmt":"2019-12-04T08:12:14","slug":"one-signal-in-amp","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/one-signal-in-amp\/","title":{"rendered":"OneSignal Integration in AMP"},"content":{"rendered":"<p><strong>OneSignal<\/strong> provides a simple interface to push notification. It is a\u00a0 high reliable push notification services for web sites and Mobile applications.<\/p>\n<p><strong>Follow these simple steps to integrate OneSignal in AMP.<\/strong><\/p>\n<h3><strong>1. Getting started with Push Notifications in AMP<\/strong><\/h3>\n<p>From the dashboard we go to left-hand side in Menu bar go to <strong>AMP option panel\u00a0 -&gt; Settings -&gt;Push Notification<\/strong> -&gt;<strong>Enable One Signal Push Notification.<\/strong><\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-4.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-11865\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-4.png\" alt=\"\" width=\"1315\" height=\"501\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-4.png 1315w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-4-300x114.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-4-768x293.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-4-1024x390.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-4-50x19.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-4-60x23.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-4-100x38.png 100w\" sizes=\"(max-width: 1315px) 100vw, 1315px\" \/><\/a><\/p>\n<p>After that enable OneSignal Push Notification it will show <strong>APP ID<\/strong> option.<\/p>\n<p><strong>Follow the Step to install OneSignal Plugin:<\/strong><\/p>\n<p class=\"header-scroll\"><span class=\"step\"><strong>1)<\/strong>\u00a0I<\/span>nstall <a href=\"https:\/\/wordpress.org\/plugins\/onesignal-free-web-push-notifications\/\"><strong>OneSignal<\/strong><\/a> Plugin.<\/p>\n<p><strong>2)<\/strong> From the dashboard, we go to the left-hand side in Menu bar go to <strong>OneSignal Push<\/strong><\/p>\n<p><strong>3)<\/strong> After that need to <strong>Set Up<\/strong> Option and Create a <a href=\"https:\/\/app.onesignal.com\/signup\"><strong>OneSignal<\/strong><\/a> Account.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-1.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-11862\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-1.png\" alt=\"\" width=\"1295\" height=\"639\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-1.png 1295w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-1-300x148.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-1-768x379.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-1-1024x505.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-1-50x25.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-1-60x30.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-1-100x49.png 100w\" sizes=\"(max-width: 1295px) 100vw, 1295px\" \/><\/a><\/p>\n<p><strong>4)<\/strong> After that Created <a href=\"https:\/\/app.onesignal.com\/signup\"><strong>OneSignal<\/strong><\/a> Account. In this account key and ID&#8217;s will generated.<\/p>\n<p><strong>5)<\/strong> This key should be copy and past in <strong>OneSignal push<\/strong> option -&gt; <strong>Configuration<\/strong> tab<strong> -&gt;APP ID<\/strong> AND <strong>REST API<\/strong> key click on the <strong>save changes<\/strong> button.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-3.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-11863\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-3.png\" alt=\"\" width=\"1312\" height=\"550\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-3.png 1312w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-3-300x126.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-3-768x322.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-3-1024x429.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-3-50x21.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-3-60x25.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-3-100x42.png 100w\" sizes=\"(max-width: 1312px) 100vw, 1312px\" \/><\/a><\/p>\n<h3>2. Implement Push Notifications in AMP<\/h3>\n<p>In push Notification, you can set the APP ID. You can also already get this key from <a href=\"https:\/\/documentation.onesignal.com\/docs\/wordpress#section--span-class-step-step-3-span-install-onesignal-wordpress-plugin\"><strong>OneSignal<\/strong> <\/a>Plugin settings:<\/p>\n<p><strong>Follow the Step to Set APP ID :<\/strong><\/p>\n<p>1) <strong>AMP optional panel -&gt; Settings -&gt;Push Notification<\/strong> option -&gt;Enable <strong>OneSignal option -&gt;<\/strong> Enter <strong>APP ID<\/strong> from OneSignal Account and the Click on the &#8220;<strong>Save Changes<\/strong>&#8221; button<strong>.<\/strong><\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/3.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-15193\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/3.png\" alt=\"\" width=\"1239\" height=\"515\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/3.png 1239w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/3-300x125.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/3-768x319.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/3-1024x426.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/3-50x21.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/3-60x25.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/3-100x42.png 100w\" sizes=\"(max-width: 1239px) 100vw, 1239px\" \/><\/a><\/p>\n<ul>\n<li><strong>Below the Content:<\/strong> Once you enable this option it will be show Subscribe Button Below the Content.<\/li>\n<li><strong>Above the Content:<\/strong> Once you enable this option it will be show Subscribe Button Above the Content.<\/li>\n<\/ul>\n<h3>3. How to use OneSignal App without HTTPS<\/h3>\n<p>AMP web push is only compatible with URLs that begin with\u00a0<a href=\"https:\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/<\/a>.<\/p>\n<p>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.<\/p>\n<p>When users view an AMP page on an actual mobile device, they are often directed by Google to a URL like <strong>&#8220;https:\/\/www.google.com\/amp\/www.site.com&#8221;<\/strong>. This means that HTTP sites that don&#8217;t ordinarily support HTTPS will actually support HTTPS thanks to Google if the AMP page is cached by Google and navigated from Google&#8217;s search results.<\/p>\n<p>If your site doesn&#8217;t have an HTTPS connection(SSL)<\/p>\n<p><strong>Follow the Step for Experimental subdomain option :<\/strong><\/p>\n<p>1)\u00a0<strong>AMP optional panel -&gt; Settings -&gt;Push Notification<\/strong> option\u00a0 <strong>-&gt;<\/strong> <strong>Experimental<\/strong><\/p>\n<p>2) First, enable the HTTP Site option and enter the <strong>subdomain<\/strong>:<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-6.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-11868\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-6.png\" alt=\"\" width=\"1315\" height=\"457\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-6.png 1315w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-6-300x104.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-6-768x267.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-6-1024x356.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-6-50x17.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-6-60x21.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/one-6-100x35.png 100w\" sizes=\"(max-width: 1315px) 100vw, 1315px\" \/><\/a><\/p>\n<h4>The Output Of OneSignal Push Notifications<\/h4>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/op-111.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-11871\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/op-111.png\" alt=\"\" width=\"1352\" height=\"659\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/op-111.png 1352w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/op-111-300x146.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/op-111-768x374.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/op-111-1024x499.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/op-111-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/op-111-60x29.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/11\/op-111-100x49.png 100w\" sizes=\"(max-width: 1352px) 100vw, 1352px\" \/><\/a><\/p>\n<h3>Important Notes:<\/h3>\n<ol>\n<li>Skip step 3 if your site uses an HTTPS connection (SSL)<\/li>\n<li>Resave The Permalinks<\/li>\n<li>It will not display <strong>push Notification<\/strong> on localhost. Your site must be on https.<\/li>\n<\/ol>\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n<p>We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n<div id=\"div-1\" class=\"hkb-feedback\">\n\t\t\t<strong class=\"ht-mobile-exit__title\">Ask your Questions Directly!<\/strong><br>\n\t\t\t<div class=\"hkb_widget_exit__content\" style=\"font-size: 14px;\">If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t<a href=\"https:\/\/ampforwp.com\/support\/#contact\" id=\"button\" target=\"_blank\" rel=\"noopener noreferrer\"><button>Yes, I have a Question<\/button><\/a>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>OneSignal provides a simple interface to push notification. It is a\u00a0 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&#8230;<\/p>\n","protected":false},"author":5,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[84],"ht-kb-tag":[115,116,117],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/4210"}],"collection":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=4210"}],"version-history":[{"count":48,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/4210\/revisions"}],"predecessor-version":[{"id":15196,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/4210\/revisions\/15196"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=4210"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=4210"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=4210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}