{"id":89809,"date":"2019-08-12T09:16:39","date_gmt":"2019-08-12T14:16:39","guid":{"rendered":"https:\/\/wpengine.com\/?post_type=resource&#038;p=89809"},"modified":"2024-02-28T11:35:04","modified_gmt":"2024-02-28T17:35:04","slug":"push-notification-for-website","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/push-notification-for-website\/","title":{"rendered":"How to Add Browser Notifications for WordPress"},"content":{"rendered":"\n<p>If you\u2019ve tried growing your email subscriber list but aren\u2019t seeing visitors return to your site, you might be wondering what else you can do. Keeping site visitors informed of updates and driving return traffic to your site can be a challenge.&nbsp;<\/p>\n\n\n\n<p>Fortunately, browser notifications or \u2018push\u2019 notifications can add a dynamic element to your website\u2019s experience. The option to push information through each user\u2019s browser can open up a new way to keep your visitors informed, and even gather new subscribers.&nbsp;<\/p>\n\n\n\n<p>In this article, we\u2019ll explain what push notifications are and where they can be used. We\u2019ll also walk through how to set them up for both desktop and mobile browsers. If you\u2019re ready to learn more about this useful technique, let\u2019s get started!&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What Are Website Browser Notifications (Push Notifications)?<\/h2>\n\n\n\n<p>As a web user, you might be more familiar with push notifications when it comes to your smartphone. Push notifications, true to their name, \u2018push\u2019 information automatically to your device or browser to let you know when something notable has happened. This might be when you\u2019ve received a text message, for instance, or gotten a like or comment on a social post.&nbsp;<\/p>\n\n\n\n<p>In fact, <a href=\"http:\/\/info.localytics.com\/blog\/52-percent-of-users-enable-push-messaging\" target=\"_blank\" rel=\"noreferrer noopener\">52% of mobile users<\/a> have push notifications enabled on their phones. What&#8217;s more, the same technology can be used to achieve push notifications within desktop web browsers. By enabling push notifications for your website, you can capitalize on features like geo-location to create <a href=\"https:\/\/neilpatel.com\/blog\/push-notifications-to-boost-engagement\/\" target=\"_blank\" rel=\"noreferrer noopener\">personalized experiences<\/a>, or track buyer habits to reduce abandoned shopping carts.\u00a0<\/p>\n\n\n\n<p>One example of browser notifications in action is the <a href=\"https:\/\/www.freeflys.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Freefly\u2019s coupon and free samples<\/a> website. Freefly\u2019s uses a push notification for desktop browsers. When a user visits the site, they are greeted with a notification asking if they\u2019d like to get their \u201cFreebies Alerts\u201d. You can select \u201cYes\u201d or \u201cNo Thanks\u201d, and continue viewing the website:<\/p>\n\n\n\n<p>A <a href=\"https:\/\/pushcrew.com\/case-studies\/freeflys-push-notifications-for-coupons-samples\/\" target=\"_blank\" rel=\"noreferrer noopener\">case study on Freefly\u2019s<\/a> implementation of push notifications reveals that its objective was to provide instant communication of time-bound deals to visitors. This approach attracted 4,400 new subscribers in 30 days, after just a three-minute setup process.\u00a0<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Set Up Browser Notifications With WordPress (In 6 Steps)<\/h2>\n\n\n\n<p>Now let\u2019s take a look at <a href=\"https:\/\/wordpress.org\/plugins\/onesignal-free-web-push-notifications\/\" target=\"_blank\" rel=\"noreferrer noopener\">OneSignal<\/a>, a free WordPress plugin that offers unlimited mobile push and web notifications for up to 30,000 subscribers.<\/p>\n\n\n\n<p>OneSignal also features the ability to segment audiences, implement localization features, track results with <a href=\"https:\/\/wpengine.com\/resources\/wordpress-google-analytics-tag-manager\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google Analytics<\/a>, and make use of a robust API.<\/p>\n\n\n\n<p>This means you can integrate it with all the top <a href=\"https:\/\/www.wpbeginner.com\/showcase\/best-email-marketing-services\/\" target=\"_blank\" rel=\"noreferrer noopener\">email marketing services<\/a> to send newsletters via push notifications, for an even more personalized customer experience. Let\u2019s take a look at how to get started with OneSignal by following these six steps.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Download and Install the OneSignal Plugin<\/h3>\n\n\n\n<p>First, you\u2019ll want to head over to the <a href=\"https:\/\/wordpress.org\/plugins\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress Plugin Directory<\/a> and search for OneSignal. Once you download the plugin\u2019s files, you\u2019ll need to then visit the <em>Plugins<\/em> section in your WordPress site\u2019s admin area.<\/p>\n\n\n\n<p>Alternatively, you can search for OneSignal from within the <em>Plugins<\/em> section, and add the free plugin right there.<\/p>\n\n\n\n<p>After you\u2019ve installed the plugin, make sure to select the <em>Activate<\/em> button that appears after installation is complete. When you\u2019ve done that, you can click on the <em>OneSignal<\/em> link to complete the process.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Visit the OneSignal Website to Connect With WordPress&nbsp;<\/h3>\n\n\n\n<p>Over at the <a href=\"https:\/\/onesignal.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">OneSignal website<\/a>, you\u2019ll need to create a free account. There are also a few steps you\u2019ll have to complete to make sure OneSignal is configured for your WordPress site, and to choose the browsers you want to use.<\/p>\n\n\n\n<p>Once you sign up, you\u2019ll be asked to select an application for your notifications.<\/p>\n\n\n\n<p>In our example, we are going to use Chrome. You\u2019ll need to name your application to continue to the next step. On the following screen, you\u2019ll be asked to configure your web push.<\/p>\n\n\n\n<p>You\u2019ll want to select <em>WordPress plugin or Website Builder<\/em> at the top of the screen to change the options presented. Once you do that, you\u2019ll see a WordPress icon you can choose from, among a list of other web applications.&nbsp;<\/p>\n\n\n\n<p>After you select the <em>WordPress<\/em> icon, more configuration options labeled <em>WordPress Site Setup<\/em> will appear below. This is where you\u2019ll be able to add your website\u2019s information and upload a custom icon if you want to.<\/p>\n\n\n\n<p>In this setup dialogue, you\u2019ll also find documentation regarding sites that are <a href=\"https:\/\/documentation.onesignal.com\/docs\/web-push-http-vs-https\" target=\"_blank\" rel=\"noreferrer noopener\">not fully HTTPS<\/a>. If you\u2019re in that situation, you\u2019ll want to review this documentation and follow OneSignal\u2019s recommendations. When you\u2019ve completed filling out your site\u2019s information, save your changes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Confirm Configurations in Your WordPress Plugin Settings Panel<\/h3>\n\n\n\n<p>Once you\u2019ve saved your WordPress <em>Site Setup<\/em> information, you\u2019ll be presented with a screen of important details that need to be transferred to your OneSignal settings panel in WordPress. These include your API ID and API Key for the application you just set up.<\/p>\n\n\n\n<p>You can use the <em>Go To My Website<\/em> button below the API information, or navigate to your WordPress dashboard in another browser tab to complete the setup.<\/p>\n\n\n\n<p>Once you\u2019re in your dashboard, you\u2019ll want to click on <em>OneSignal Push <\/em>in the left-hand menu and select the <em>Configuration<\/em> tab. This is where you\u2019ll need to enter those API codes, in order to make the final connection between WordPress and OneSignal.<\/p>\n\n\n\n<p>To set up a push notification for the Apple Safari Browser as well, you\u2019ll have to go back to the OneSignal website and add Safari as an application (and so on for other browsers).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Customize Your Popup Message<\/h3>\n\n\n\n<p>Now that you\u2019ve made the connection between WordPress and OneSignal, you can start customizing all the various options included in the plugin. This includes the popup message for subscribing to your push notifications.<\/p>\n\n\n\n<p>Within the OneSignal Push settings in WordPress, you can scroll down below the API information and decide what you want your push invitation text to say.<\/p>\n\n\n\n<p>This is an excellent way to personalize the experience and entice visitors to use your notifications.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. Customize Your Notification Icon<\/h3>\n\n\n\n<p>Another key item you can customize is the notification icon. This will enable you to tweak the way visitors receive notifications in their browsers. For example, you can design a custom thank-you message that visitors will receive once they subscribe.<\/p>\n\n\n\n<p>Additionally, you can configure the text for notifications that will appear if a visitor blocks or unsubscribes from your push notification service. While this will sometimes happen, you can try to keep the visitor hooked by crafting a message that makes it clear why staying subscribed to your notifications is beneficial.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">6. Send Notifications From Your WordPress Website<\/h3>\n\n\n\n<p>Now that you\u2019re all set up with OneSignal, you might be wondering how to send notifications. Fortunately, the OneSignal application will automatically send push notifications any time a new post is published on your website.<\/p>\n\n\n\n<p>However, if you want to manually send a notification for a page or post, you can do that from any WordPress editing screen.<\/p>\n\n\n\n<p>Under the <em>Document<\/em> tab, you\u2019ll now have a OneSignal option. From there, you can check the box to push a new browser notification whenever the post is updated. This might be particularly useful if you are updating an item in your online store, for example. You can also configure OneSignal to automatically send push notifications for certain <a href=\"https:\/\/wordpress.org\/support\/article\/post-types\/\" target=\"_blank\" rel=\"noreferrer noopener\">custom post types<\/a>.\u00a0<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Need Help Improving Your Digital Experience?<\/h2>\n\n\n\n<p>Setting up push notifications for your WordPress website can be a perfect way to create a dynamic experience for your site\u2019s visitors. If you enjoyed learning about this tool, you\u2019ll love the other <a href=\"https:\/\/wpengine.com\/resources\/\" target=\"_blank\" rel=\"noreferrer noopener\">excellent developer resources<\/a> we have to share here at WP Engine.\u00a0<\/p>\n\n\n\n<p>WP Engine provides more than just fast and reliable <a href=\"https:\/\/wpengine.com\/wordpress-hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress hosting<\/a> services. With our <a href=\"https:\/\/wpengine.com\/managed-wordpress-hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\">fully managed hosting platform<\/a> and 24\/7 support, you can focus on developing an excellent website design for your customers, and leave the hosting management to us!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you\u2019ve tried growing your email subscriber list but aren\u2019t seeing visitors return to your site, you might be wondering what else you can do. Keeping site visitors informed of updates and driving return traffic to your site can be a challenge.&nbsp; Fortunately, browser notifications or \u2018push\u2019 notifications can add a dynamic element to your<span class=\"tile__ellipses\">&hellip;<\/span><span class=\"tile__ellipses--animated\"><\/span><\/p>\n","protected":false},"author":297,"featured_media":149765,"template":"","resource-topic":[904],"resource-role":[896,903],"resource-type":[916],"class_list":["post-89809","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How To Add Browser Notifications for WordPress<\/title>\n<meta name=\"description\" content=\"Push notifications for your website can be a useful tool to get returning users back to your site. See the benefits of WordPress Push Notifications and how to add them to your site.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Add Browser Notifications for WordPress\" \/>\n<meta property=\"og:description\" content=\"Push notifications for your website can be a useful tool to get returning users back to your site. See the benefits of WordPress Push Notifications and how to add them to your site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/push-notification-for-website\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-28T17:35:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2019\/08\/popup-header.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"How To Add Browser Notifications for WordPress\" \/>\n<meta name=\"twitter:description\" content=\"Push notifications for your website can be a useful tool to get returning users back to your site. See the benefits of WordPress Push Notifications and how to add them to your site.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2019\/08\/popup-header.png\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/push-notification-for-website\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/push-notification-for-website\/\",\"name\":\"How To Add Browser Notifications for WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2019-08-12T14:16:39+00:00\",\"dateModified\":\"2024-02-28T17:35:04+00:00\",\"description\":\"Push notifications for your website can be a useful tool to get returning users back to your site. See the benefits of WordPress Push Notifications and how to add them to your site.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/push-notification-for-website\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/push-notification-for-website\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/push-notification-for-website\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Add Browser Notifications for WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/3a22232b01de39dcf588fb8e421c0521\",\"name\":\"Erin Myers\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g\",\"caption\":\"Erin Myers\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Add Browser Notifications for WordPress","description":"Push notifications for your website can be a useful tool to get returning users back to your site. See the benefits of WordPress Push Notifications and how to add them to your site.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"How To Add Browser Notifications for WordPress","og_description":"Push notifications for your website can be a useful tool to get returning users back to your site. See the benefits of WordPress Push Notifications and how to add them to your site.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/push-notification-for-website\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2024-02-28T17:35:04+00:00","og_image":[{"width":1100,"height":500,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2019\/08\/popup-header.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_title":"How To Add Browser Notifications for WordPress","twitter_description":"Push notifications for your website can be a useful tool to get returning users back to your site. See the benefits of WordPress Push Notifications and how to add them to your site.","twitter_image":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2019\/08\/popup-header.png","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/push-notification-for-website\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/push-notification-for-website\/","name":"How To Add Browser Notifications for WordPress","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2019-08-12T14:16:39+00:00","dateModified":"2024-02-28T17:35:04+00:00","description":"Push notifications for your website can be a useful tool to get returning users back to your site. See the benefits of WordPress Push Notifications and how to add them to your site.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/push-notification-for-website\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/push-notification-for-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/push-notification-for-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"How to Add Browser Notifications for WordPress"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/3a22232b01de39dcf588fb8e421c0521","name":"Erin Myers","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g","caption":"Erin Myers"}}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2019\/08\/popup-grid.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Developer, Marketer","topic":"<strong>Topics:<\/strong> Marketing","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/89809","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/297"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/149765"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=89809"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=89809"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=89809"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=89809"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}