{"id":224053,"date":"2019-06-02T10:31:29","date_gmt":"2019-06-02T14:31:29","guid":{"rendered":"https:\/\/www.addwp.com\/?p=224053"},"modified":"2019-10-07T13:50:08","modified_gmt":"2019-10-07T17:50:08","slug":"push-notifications-wordpress","status":"publish","type":"post","link":"https:\/\/www.addwp.com\/push-notifications-wordpress\/","title":{"rendered":"How to Add Web Push Notifications to Your WordPress Site"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_61 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-66336968691b8\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-66336968691b8\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.addwp.com\/push-notifications-wordpress\/#How_to_Add_Web_Push_Notifications_to_Your_WordPress_Site\" title=\"How to Add Web Push Notifications to Your WordPress Site\">How to Add Web Push Notifications to Your WordPress Site<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.addwp.com\/push-notifications-wordpress\/#Why_Push_Notifications\" title=\"Why Push Notifications?\">Why Push Notifications?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.addwp.com\/push-notifications-wordpress\/#How_to_Begin_Setting_up_Push_Notifications\" title=\"How to Begin Setting up Push Notifications\">How to Begin Setting up Push Notifications<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.addwp.com\/push-notifications-wordpress\/#The_Importance_of_Having_an_SSL_Certificate\" title=\"The Importance of Having an SSL Certificate\">The Importance of Having an SSL Certificate<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.addwp.com\/push-notifications-wordpress\/#API_ID_and_API_Key\" title=\"API ID and API Key\">API ID and API Key<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.addwp.com\/push-notifications-wordpress\/#Testing_Your_Push_Notification\" title=\"Testing Your Push Notification\">Testing Your Push Notification<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.addwp.com\/push-notifications-wordpress\/#Customize_The_Push_Notification_Popup\" title=\"Customize The Push Notification Popup\">Customize The Push Notification Popup<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.addwp.com\/push-notifications-wordpress\/#How_to_add_web_Push_Notifications_to_Your_WordPress_Site_Conclusion\" title=\"How to add web Push Notifications to Your WordPress Site: Conclusion\">How to add web Push Notifications to Your WordPress Site: Conclusion<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h1><span class=\"ez-toc-section\" id=\"How_to_Add_Web_Push_Notifications_to_Your_WordPress_Site\"><\/span>How to Add Web Push Notifications to Your WordPress Site<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p><span style=\"font-weight: 400;\">We&#8217;re all familiar with push notification on our phones. This is where an app sends you a notification or alert even though you&#8217;re not engaging with the app at that time. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Website notifications work in a similar manner. They do this by allowing you to send notifications to users who have subscribed to your website. In this article I&#8217;ll show you how to add web push notifications to your WordPress site.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Why_Push_Notifications\"><\/span>Why Push Notifications?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">You might be wondering, why bother with web push notifications. Web push notifications allow you to reach users across multiple devices. They can convert these visitors into customers and active followers. You also can regularly get visitors to come back to your website much sooner than usual. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">The best part is that it doesn&#8217;t require a lot of commitment from the user. They can control how their devices show these notifications.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_to_Begin_Setting_up_Push_Notifications\"><\/span>How to Begin Setting up Push Notifications<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">To add push notifications to your WordPress website, you&#8217;ll first need a push notification service. For the purpose of this article we&#8217;ll choose OneSignal. OneSignal has free option for their WordPress push notification service. It&#8217;s also pretty straightforward to set up.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To begin the setup, install and activate the OneSignal plugin. When you activate it you&#8217;ll see a new tab on the left column.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Next, we&#8217;ll head to OneSignal website and create an account. After successfully creating an account and logging in, go to your OneSignal dashboard. Click on the Add App button as shown below to create your first app for push notifications.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You&#8217;ll need to pick a name for your app. You can use any name you wish, but make it something memorable.<\/span><\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-224124 aligncenter\" src=\"https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/1.png\" alt=\"Push Notifications Add App\" width=\"672\" height=\"312\" srcset=\"https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/1.png 672w, https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/1-300x139.png 300w\" sizes=\"(max-width: 672px) 100vw, 672px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">The next step will be to select a platform that you&#8217;ll be targeting with push notifications. Choose Web Push for now.<\/span><\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-224125 aligncenter\" src=\"https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/2.png\" alt=\"Push Notifications Add a New App\" width=\"638\" height=\"312\" srcset=\"https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/2.png 638w, https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/2-300x147.png 300w\" sizes=\"(max-width: 638px) 100vw, 638px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-224126 aligncenter\" src=\"https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/3.png\" alt=\"Push Notifications Edit App Website PN\" width=\"919\" height=\"587\" srcset=\"https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/3.png 919w, https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/3-300x192.png 300w, https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/3-768x491.png 768w\" sizes=\"(max-width: 919px) 100vw, 919px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">On the next screen you&#8217;ll be asked to choose an integration method. In our case we are using WordPress so click on WordPress Plugin. Alternatively, you can click Website Builder then click on the WordPress logo below that.<\/span><\/p>\n<p><img decoding=\"async\" class=\"size-large wp-image-224127 aligncenter\" src=\"https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/4-1024x566.png\" alt=\"Push Notifications Choose Integration\" width=\"1024\" height=\"566\" srcset=\"https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/4-1024x566.png 1024w, https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/4-300x166.png 300w, https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/4-768x425.png 768w, https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/4-1080x597.png 1080w, https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/4.png 1109w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Next, scroll down to the WordPress Site Setup. This includes your site name, site URL, and upload an icon. This icon will be displayed in notifications so you want to make it your logo or a memorable version of it. If you have a favicon, it may be best to use it here.<\/span><\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-224128 aligncenter\" src=\"https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/5.png\" alt=\"Push Notifications WordPress Site Setup\" width=\"746\" height=\"628\" srcset=\"https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/5.png 746w, https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/5-300x253.png 300w\" sizes=\"(max-width: 746px) 100vw, 746px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"The_Importance_of_Having_an_SSL_Certificate\"><\/span>The Importance of Having an SSL Certificate<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Having an SSl certificate is pretty standard these days, and I&#8217;d recommend having one. For this last step you&#8217;ll need to choose if you have an SSL certificate or not. Push notifications can only be sent through secure SSL connection. If you don&#8217;t have SSL installed, turn this option off. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">OneSignal gives you an option to send your notifications through them if you don&#8217;t have SSL. You&#8217;ll need to enter a label under the HTTPS toggle. This label becomes your subdomain on the OneSignal platform. Your push notifications will be sent through this sub domain.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">At this point you&#8217;re done. Click the save button to save all your settings. <\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"API_ID_and_API_Key\"><\/span>API ID and API Key<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">On the next screen you&#8217;ll see API ID and API key which you&#8217;ll need to copy back to your WordPress website.<\/span><\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-224129 aligncenter\" src=\"https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/6.png\" alt=\"Push Notifications Configure WordPress\" width=\"766\" height=\"494\" srcset=\"https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/6.png 766w, https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/6-300x193.png 300w\" sizes=\"(max-width: 766px) 100vw, 766px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Go to your WordPress admin and find OneSignal settings page. Click on the Configuration Tab. Here, enter the API ID and API key.<\/span><\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-224130 aligncenter\" src=\"https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/7.png\" alt=\"Push Notifications Configuration\" width=\"721\" height=\"468\" srcset=\"https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/7.png 721w, https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/7-300x195.png 300w\" sizes=\"(max-width: 721px) 100vw, 721px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">You&#8217;re almost there. The app you set up will only allow you to send notifications through Google Chrome and Firefox browsers only. We&#8217;ll need to add Safari ID as well in order to send notifications through the Safari browser. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let&#8217;s go back to the OneSignal dashboard and find our app. Next to your app&#8217;s settings page. Under Web Push Platforms, click on the edit icon next to Apple Safari. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">On the next screen you&#8217;ll need to enter your site name, URL and upload a logo then save your settings by clicking on the Save button. On the next screen you&#8217;ll see your Safari ID. Copy it and go back to the Configurations tab and enter it there.<\/span><\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-224131 aligncenter\" src=\"https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/8.png\" alt=\"Push Notifications Settings\" width=\"944\" height=\"371\" srcset=\"https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/8.png 944w, https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/8-300x118.png 300w, https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/8-768x302.png 768w\" sizes=\"(max-width: 944px) 100vw, 944px\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Testing_Your_Push_Notification\"><\/span>Testing Your Push Notification<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Using the incognito or private window of your browser, visit your website. If all went well you&#8217;ll see a push notification popup and a bell icon at the bottom right corner of your website.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If for some reason the process is not working for you I recommend reaching out to OneSignal support. They should be able to help you out regardless if you&#8217;re on a free or paid plan.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Customize_The_Push_Notification_Popup\"><\/span>Customize The Push Notification Popup<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">The notification popup you saw is rather generic. Let&#8217;s customize it and give it some personality.<\/span><\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-224132 aligncenter\" src=\"https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/9.png\" alt=\"Push Notifications Customizations\" width=\"748\" height=\"248\" srcset=\"https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/9.png 748w, https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/9-300x99.png 300w\" sizes=\"(max-width: 748px) 100vw, 748px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Go back to the OneSignal plugin settings page and click on the Configurations tab. Scroll down to the HTTP Pop-Up Settings. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">First, click the toggle button &#8216;Customize the HTTP Pop-Up Prompt text&#8217; so that it is in the &#8216;on&#8217; mode. Enter custom text on all the fields here to match your website information.<\/span><\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-224133 aligncenter\" src=\"https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/10.png\" alt=\"Push Notification Pop up Settings\" width=\"640\" height=\"640\" srcset=\"https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/10.png 640w, https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/10-150x150.png 150w, https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/10-300x300.png 300w, https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/10-440x440.png 440w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_to_add_web_Push_Notifications_to_Your_WordPress_Site_Conclusion\"><\/span>How to add web Push Notifications to Your WordPress Site: Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">In this article we looked at adding push notifications on your WordPress website. There\u2019s a lot more and these are just the basics. I&#8217;d love to hear from you about how you implemented push notifications on your website. Feel free to let me know in the comments below.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to Add Web Push Notifications to Your WordPress Site We&#8217;re all familiar with push notification on our phones. This &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"How to Add Web Push Notifications to Your WordPress Site\" class=\"read-more button\" href=\"https:\/\/www.addwp.com\/push-notifications-wordpress\/#more-224053\" aria-label=\"More on How to Add Web Push Notifications to Your WordPress Site\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":224057,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[127],"tags":[171],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Add Web Push Notifications to Your WordPress Site - Add WP<\/title>\n<meta name=\"description\" content=\"Within this post I go over how to add web push notifications to your WordPress site in a step by step process by using OneSignal for the example.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.addwp.com\/push-notifications-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Web Push Notifications to Your WordPress Site - Add WP\" \/>\n<meta property=\"og:description\" content=\"Within this post I go over how to add web push notifications to your WordPress site in a step by step process by using OneSignal for the example.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.addwp.com\/push-notifications-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Add WP\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-02T14:31:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-10-07T17:50:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/How-to-Add-Web-Push-Notifications-to-Your-WordPress-Site.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Tom\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tom\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.addwp.com\/push-notifications-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.addwp.com\/push-notifications-wordpress\/\"},\"author\":{\"name\":\"Tom\",\"@id\":\"https:\/\/www.addwp.com\/#\/schema\/person\/3e4c93c7b9a4c286867f9bfe8223a55d\"},\"headline\":\"How to Add Web Push Notifications to Your WordPress Site\",\"datePublished\":\"2019-06-02T14:31:29+00:00\",\"dateModified\":\"2019-10-07T17:50:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.addwp.com\/push-notifications-wordpress\/\"},\"wordCount\":899,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.addwp.com\/#organization\"},\"keywords\":[\"push notifications\"],\"articleSection\":[\"How To\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.addwp.com\/push-notifications-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.addwp.com\/push-notifications-wordpress\/\",\"url\":\"https:\/\/www.addwp.com\/push-notifications-wordpress\/\",\"name\":\"How to Add Web Push Notifications to Your WordPress Site - Add WP\",\"isPartOf\":{\"@id\":\"https:\/\/www.addwp.com\/#website\"},\"datePublished\":\"2019-06-02T14:31:29+00:00\",\"dateModified\":\"2019-10-07T17:50:08+00:00\",\"description\":\"Within this post I go over how to add web push notifications to your WordPress site in a step by step process by using OneSignal for the example.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.addwp.com\/push-notifications-wordpress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.addwp.com\/push-notifications-wordpress\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.addwp.com\/push-notifications-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.addwp.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Add Web Push Notifications to Your WordPress Site\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.addwp.com\/#website\",\"url\":\"https:\/\/www.addwp.com\/\",\"name\":\"Add WP\",\"description\":\"WordPress Reviews and Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.addwp.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.addwp.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.addwp.com\/#organization\",\"name\":\"Add WP\",\"url\":\"https:\/\/www.addwp.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.addwp.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/10\/cropped-AddWP-Logo-White.png\",\"contentUrl\":\"https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/10\/cropped-AddWP-Logo-White.png\",\"width\":240,\"height\":82,\"caption\":\"Add WP\"},\"image\":{\"@id\":\"https:\/\/www.addwp.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.addwp.com\/#\/schema\/person\/3e4c93c7b9a4c286867f9bfe8223a55d\",\"name\":\"Tom\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.addwp.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5058372f3a1e1bf3c89b60e441a18415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5058372f3a1e1bf3c89b60e441a18415?s=96&d=mm&r=g\",\"caption\":\"Tom\"},\"description\":\"Hey, I'm Tom from Add WP! I write WordPress hosting articles, WordPress plugin reviews, WordPress how to tutorials and much more! I hope you're able to get something out of the WordPress articles that I've written here.\",\"url\":\"https:\/\/www.addwp.com\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add Web Push Notifications to Your WordPress Site - Add WP","description":"Within this post I go over how to add web push notifications to your WordPress site in a step by step process by using OneSignal for the example.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.addwp.com\/push-notifications-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Web Push Notifications to Your WordPress Site - Add WP","og_description":"Within this post I go over how to add web push notifications to your WordPress site in a step by step process by using OneSignal for the example.","og_url":"https:\/\/www.addwp.com\/push-notifications-wordpress\/","og_site_name":"Add WP","article_published_time":"2019-06-02T14:31:29+00:00","article_modified_time":"2019-10-07T17:50:08+00:00","og_image":[{"width":1024,"height":800,"url":"https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/06\/How-to-Add-Web-Push-Notifications-to-Your-WordPress-Site.png","type":"image\/png"}],"author":"Tom","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Tom","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.addwp.com\/push-notifications-wordpress\/#article","isPartOf":{"@id":"https:\/\/www.addwp.com\/push-notifications-wordpress\/"},"author":{"name":"Tom","@id":"https:\/\/www.addwp.com\/#\/schema\/person\/3e4c93c7b9a4c286867f9bfe8223a55d"},"headline":"How to Add Web Push Notifications to Your WordPress Site","datePublished":"2019-06-02T14:31:29+00:00","dateModified":"2019-10-07T17:50:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.addwp.com\/push-notifications-wordpress\/"},"wordCount":899,"commentCount":0,"publisher":{"@id":"https:\/\/www.addwp.com\/#organization"},"keywords":["push notifications"],"articleSection":["How To"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.addwp.com\/push-notifications-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.addwp.com\/push-notifications-wordpress\/","url":"https:\/\/www.addwp.com\/push-notifications-wordpress\/","name":"How to Add Web Push Notifications to Your WordPress Site - Add WP","isPartOf":{"@id":"https:\/\/www.addwp.com\/#website"},"datePublished":"2019-06-02T14:31:29+00:00","dateModified":"2019-10-07T17:50:08+00:00","description":"Within this post I go over how to add web push notifications to your WordPress site in a step by step process by using OneSignal for the example.","breadcrumb":{"@id":"https:\/\/www.addwp.com\/push-notifications-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.addwp.com\/push-notifications-wordpress\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.addwp.com\/push-notifications-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.addwp.com\/"},{"@type":"ListItem","position":2,"name":"How to Add Web Push Notifications to Your WordPress Site"}]},{"@type":"WebSite","@id":"https:\/\/www.addwp.com\/#website","url":"https:\/\/www.addwp.com\/","name":"Add WP","description":"WordPress Reviews and Tutorials","publisher":{"@id":"https:\/\/www.addwp.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.addwp.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.addwp.com\/#organization","name":"Add WP","url":"https:\/\/www.addwp.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.addwp.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/10\/cropped-AddWP-Logo-White.png","contentUrl":"https:\/\/www.addwp.com\/wp-content\/uploads\/2019\/10\/cropped-AddWP-Logo-White.png","width":240,"height":82,"caption":"Add WP"},"image":{"@id":"https:\/\/www.addwp.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.addwp.com\/#\/schema\/person\/3e4c93c7b9a4c286867f9bfe8223a55d","name":"Tom","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.addwp.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5058372f3a1e1bf3c89b60e441a18415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5058372f3a1e1bf3c89b60e441a18415?s=96&d=mm&r=g","caption":"Tom"},"description":"Hey, I'm Tom from Add WP! I write WordPress hosting articles, WordPress plugin reviews, WordPress how to tutorials and much more! I hope you're able to get something out of the WordPress articles that I've written here.","url":"https:\/\/www.addwp.com\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.addwp.com\/wp-json\/wp\/v2\/posts\/224053"}],"collection":[{"href":"https:\/\/www.addwp.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.addwp.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.addwp.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.addwp.com\/wp-json\/wp\/v2\/comments?post=224053"}],"version-history":[{"count":4,"href":"https:\/\/www.addwp.com\/wp-json\/wp\/v2\/posts\/224053\/revisions"}],"predecessor-version":[{"id":224134,"href":"https:\/\/www.addwp.com\/wp-json\/wp\/v2\/posts\/224053\/revisions\/224134"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.addwp.com\/wp-json\/wp\/v2\/media\/224057"}],"wp:attachment":[{"href":"https:\/\/www.addwp.com\/wp-json\/wp\/v2\/media?parent=224053"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.addwp.com\/wp-json\/wp\/v2\/categories?post=224053"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.addwp.com\/wp-json\/wp\/v2\/tags?post=224053"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}