![Install OneSignal Web Push Notification In Blogger [AMP & NON-AMP]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjVhVw8yetS0PVWOpo3vMMPjKHJ_ybFQmhqdCljotUqq0IrDdYXfIDCbWO_EtJb8iYAsdNucHXON_c3kuTNo_DxvJRm3Px6ef_445q0ZMBqGxzlUIM_U-_hSPCnrAwBi0k9WutdCYq6yw/s1625-rw/INSTALL-ONESIGNAL-WEBPUSH-NOTIFICATION-IN-BLOGGER.png)
How To Install & Setup OneSignal Web Push Notification In Blogger. Here's Trick To Setup Web Notification.
Web Push Notification is a web service that website provides to reconnect with user in a simple and effective way.
Web Push Notification is very effective, therefore your visitors receives notifications of the latest updates that released from your website. Users can get these latest updates by pressing "Subscribe Button" on your website.
Currently there are available many Web Push Notification third party application that offers this service with, both Free & Paid. Among them, there are OneSignal, SendPulse, UrbanAirship & many others. They distribute our website latest updates to visitors who subscribed us with an easy configuration, and they support both http:// & https://
But currently, only one platform supports Google AMP & Non-AMP based with web push notification service which is, OneSignal. Yes, there is only one platform who supports AMP web push notification on blogger therefore, we'll look How To Setup OneSignal Web Push Notification On Blogger [AMP & Non-AMP].
So, first we'll look How To Setup & Install OneSignal Web Push Notification In Blogger (Non-AMP).
Warning! Don't try to overmix the code otherwise it will not work. And remember AMP Code should be handled carefully only in AMP Website.
Install & Setup OneSignal Web Push Notification In Blogger [NON-AMP]
Out of many, Web Push Notification I've only found OneSignal as best because everyone is comfortable with this web push notification & really trusted by 1million+ companies. So have a careful look on Installing OneSignal Web Push Notification In Blogger With Step-By-Step Process.
Sign Up On OneSignal
Go to OneSignal Webpush and then sign up using "Get Your Free Account" Button.
After that, Type your Email Address, Password & Name Of Your Website. Alternatively, you can also use social sign in option which support Sign In via Google, Facebook & Github.
After successful Sign Up, OneSignal will send you confirm link to your email address, Check your email (check Spam if not found in Primary Box) and then click on the "Click here to confirm your account" button in your email.
Add Your Website (On OneSignal)
Now you'll be Logged In to your OneSignal Dashboard. After closing the welcome message, click on "New App/Website" Button. Now, enter your website name and click on create.
Select Platform (e.g. Web Push)
Now, you will be asked to select platform where you want to insert OneSignal Web Push Notification.
Scroll Down (If required) and select Web Push » Click Next. You're Done.
Configure Push Notification Service
In step 1, select WordPress Plugin Or Website Builder as your integration.
In step 2, select Blogger as your CMS.
Now, Fill out the Blogger site setup form with your Site Name, URL, Logo(Icon). In the Choose A Label field, type your website's name.
The Auto Resubscribe button should be ON, only if https:// is turned ON in your blogger setting.
Setup Permission Prompt
Scroll down to Step 3, where you can customize how the prompt would like while asking your visitors to allow the web push notifications.
Click On “ADD A PROMPT”. In the PROMPT TYPE, select SLIDE PROMPT.
The default settings are good enough.
But if you still want to edit the texts of the slider prompt shown at the right-hand side, enable the “Customize Slide Prompt Text” option and then you will be able to change the texts into more creative ones. » Then click on Save.
Make Notification Bell Icon (Optional)
If you want to add bell icon onto your blogger site at side part of the corners then, you do so by clicking on Add A Prompt button again to receive Web Push Notification from your website visitors.
This time, the Subscribe Bell option will be selected by default. You can change the colour, size & position of your bell icon by scrolling down. Then, click on save.
Customize Welcome Notification (Optional)
In this step, you'll be able to customize Welcome Notification that a user will receive after subscribed to your blog. And you may also turn off the Welcome Notification (if you wish).
Save Changes & Copy Code
You need not configure any settings other than those which are shown above.
Now, click on save at the end of page. Then click on copy code & then paste in your blogger blog.
Add OneSignal Code To Blogger
Go To Blogger Dashboard » Theme Section » Edit HTML (Using 3 Dot menu in latest blogger UI)
In Edit HTML, Press Ctrl + F and then search </head>
Just above </head> paste the code that you have copied from OneSignal. Now, click on save theme.
Then, come back on OneSignal and click on Finish.
Congratulations! You've successfully Installed & Setup OneSignal Web Push Notification On Blogger.
Install & Setup OneSignal Web Push Notification In Blogger [AMP]
Warning! This is only for AMP Page Only, Don't implement this on Non-Amp, it will do nothing.
To install AMP Web Push Notification on an AMP website, then you are required to inject the amp-web-push component and also you've to upload 2 pages in your website directory, namely amp-helper-frame.html and amp-permission-dialog.html.
If you use a blogger platform such as the blog affizoo.blogspot.com, then of course this is impossible. But there is a solution provided by OneSignal, by utilizing the label provided by OneSignal.
Now, the next step is to follow all the steps mentioned in Non-Amp and then get your own OneSignal Code. Look Above for all steps which are mentioned in step-by-step process.
Now, after getting your OneSignal Code which looks like...
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
var OneSignal = window.OneSignal || [];
OneSignal.push(function() {
OneSignal.init({
appId: "a1234567-bc89-47db-a413-821b7c808c7c",
});
});
</script>Now please save the code in notepad or any other text editor. Next we'll configure subscribe button to work on Blogger AMP Page.
Configuring OneSignal Web Push Notification On AMP Blogger
Unlike you've seen in the Non-AMP page, which is enough to enter the JavaScript code provided by OneSignal, the subscribe button which will appear by itself. At AMP Page, you need a subscribe button, which can later be clicked by your website visitor.
Here's how to setup OneSignal amp-web-push on the Blogger AMP Template.
Now, Copy the following amp-web-push component, copy before the code </ head>
<script async='async' custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>Now, Copy the following below code, and paste it before </ body>. Please replace the Your API ID with your OneSignal APP ID. And change your LABEL.os.tc with the address of your OneSignal label, for example amp-blogger.os.tc.
<amp-web-push id="amp-web-push" layout="nodisplay" (adsbygoogle = window.adsbygoogle || []).push({}); helper-iframe-url="https://LABEL.os.tc/amp/helper_frame?appId=YOUR-APP-ID" permission-dialog-url="https://LABEL.os.tc/amp/permission_dialog?appId=YOUR-APP-ID" service-worker-url="https://LABEL.os.tc/OneSignalSDKWorker.js?appId=YOUR-APP-ID" > </amp-web-push>Then we will put the button, I implemented the button in the body of the article, precisely at the end of the article. Search for <data: post.body />, and paste the following code below it:
<!-- A subscription widget --> <amp-web-push-widget visibility="unsubscribed" layout="fixed" width="245" height="45"> <button class="subscribe" on="tap:amp-web-push.subscribe"> <amp-img class="subscribe-icon" width="24" height="24" layout="fixed" src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3Vic2NyaWJlLWljb24iIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMS44NCAxOS44ODdIMS4yMnMtLjk0Ny0uMDk0LS45NDctLjk5NWMwLS45LjgwNi0uOTQ4LjgwNi0uOTQ4czMuMTctMS41MTcgMy4xNy0yLjYwOGMwLTEuMDktLjUyLTEuODUtLjUyLTYuMzA1czIuODUtNy44NyA2LjI2LTcuODdjMCAwIC40NzMtMS4xMzQgMS44NS0xLjEzNCAxLjMyNSAwIDEuOCAxLjEzNyAxLjggMS4xMzcgMy40MTMgMCA2LjI2IDMuNDE4IDYuMjYgNy44NyAwIDQuNDYtLjQ3NyA1LjIyLS40NzcgNi4zMSAwIDEuMDkgMy4xNzYgMi42MDcgMy4xNzYgMi42MDdzLjgxLjA0Ni44MS45NDdjMCAuODUzLS45OTYuOTk1LS45OTYuOTk1SDExLjg0ek04IDIwLjk3N2g3LjExcy0uNDkgMi45ODctMy41MyAyLjk4N1M4IDIwLjk3OCA4IDIwLjk3OHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4="> </amp-img> Subscribe to updates </button> </amp-web-push-widget>For a more attractive appearance & elegant style, copy this CSS code given below, and paste it under <style amp-custom = 'amp-custom'>:
amp-web-push-widget button.subscribe{display:inline-flex;align-items:center;border-radius:2px;border:0;box-sizing:border-box;margin:0;padding:10px 15px;cursor:pointer;outline:none;font-size:15px;font-weight:400;background:#4A90E2;color:#fff;box-shadow:0 1px 1px 0 rgba(0,0,0,0.5);-webkit-tap-highlight-color:rgba(0,0,0,0)} amp-web-push-widget button.subscribe .subscribe-icon{margin-right:10px} amp-web-push-widget button.subscribe:active{transform:scale(0.99)} amp-web-push-widget button.unsubscribe{display:inline-flex;align-items:center;justify-content:center;height:45px;border:0;margin:0;cursor:pointer;outline:none;font-size:15px;font-weight:400;background:transparent;color:#B1B1B1;-webkit-tap-highlight-color:rgba(0,0,0,0)}Now save the changes and results will be look like.
Try testing the page, whether the subscribe button has appeared or not. If it doesn't appear, please make sure you have correctly replaced your APP ID and Label.os.tc.
If there are any questions, please discuss in the comments column. It's free!
Now, we'll look How To Send Notification To Subscribed Members. So let's read it.
How To Send Notifications To Your Subscribers?
Go to app.onesignal.com and then select your website. Then from header menu, Select Messages. After the page opens, click on New Push.
Now, fill up the Title, Message & Launch URL (The URL which will open when users click on notifications). Then click on Confirm.
The notification will be delivered to all users who have subscribed to your blog push notification.
Do you want to open a website at minimum cost that gives you huge features then try my recommended hosting provider.
- Free domain for 1st year.
- Lowest Hosting Plans.
- Huge Features & 1-click WordPress install.
Conclusion
Congrats! Today you learned more about Install OneSignal Web Push Notification In Blogger [AMP & NON-AMP] so always be the first to comment us and tell how helpful is this article.
Thanking you! For giving your precious time to us.
Please visit us again...