This guide will walk you through how to set up web push on WordPress and WordPress VIP. If you do not use WordPress, or wish to write custom code, please go to Web Push Quickstart.

📘

Video Setup Guides!

For more visual people, we have created HTTP and HTTPS video setup guides:

HTTPS WordPress Setup
HTTP WordPress Setup

HTTPS WordPress Setup

HTTP WordPress Setup

Step 1. Choose Integration

Head over to onesignal.com to create an account. If this is not your first app with OneSignal, select New App/Website, name your app, select "Web Push" and "Next".

Select WordPress Plugin or Website Builder to continue:

Step 2. Site Setup

Once you've selected WordPress as your integration, you must fill out information about your site.

Enter Site URL

This must be the exact URL you see in the browser when you visit the site.

Include http or https and www or non-www links (e.g. https://example.com, https://www.example.com), please only enter the URL that you wish to send push notifications from.

We recommend redirecting traffic from one to the other (e.g. users that visit https://www.example.com are redirected to https://example.com), so that all your traffic only goes to one.

Auto Resubscribe

Recommended: This feature is only for HTTPS sites and you do not select "My site is not fully HTTPS". This allows users to automatically resubscribe upon returning to the site without being prompted if they clear their browser cache or if you are transferring to OneSignal from another push provider.

Default Notification Icon URL

Enter a link to an icon file that is at least 80x80 pixels (Recommended size is 192x192). The file must be .png, .jpg, or .gif.

Choose a Label

If WordPress.com hosts your site

WordPress-hosted implementations must use a label to send push notifications. Select My site is not fully HTTPS and choose a unique label (e.g. mylabel), which will be displayed as mylabel.os.tc.

If you self-host WordPress

If your site uses WordPress technology but is hosted on a hosting provider that is not WordPress, you will need to determine if your site fully supports HTTPS.

Web Push works best with sites that fully support HTTPS, and we recommend using HTTPS for Web Push when possible. To determine if your site fully supports HTTPS, look for the following:

• Your site URL must begin with https://, and display a green lock icon on the browser's address bar
• Your site must redirect all http:// requests to https:// requests. In other words, users accessing the site via HTTP will be redirected to the HTTPS version.

If your site does not fully support HTTPS, you should select 'My site is not fully HTTPS':

Once you've selected this, you will need to choose a unique label to be displayed in your notifications. For example, the below image shows notifications are coming from mylabel.os.tc:

Warning: You can only change your label if you have less than 100 web users. Once you have 100+ web users, this setting is disabled.

FAQ

How does OneSignal work differently with HTTP sites?

What if my site is in a subfolder?

Why does my site require a label?

Why can't I change my label?

Step 3. Install OneSignal WordPress Plugin

To enable OneSignal on your WordPress site, you will need to install the OneSignal WordPress Plugin.

Once you've installed the WordPress plugin, you'll need to copy your App ID and API Keys.

Paste these keys into your WordPress plugin Configure section in the appropriate inputs:

Be sure to Save your configuration once you've added these keys.

Step 4. Add Prompts in WordPress Plugin

Next, you'll want to configure your prompts in the OneSignal WordPress Plugin, so that users can subscribe to push notifications. You can do this in the Configure section of the plugin.

Subscription Bell

A small icon at the corner of your page that users can interact with to subscribe

Slide Prompt

A small modal that comes from the center of the page and asks if users are interested in signing up.

HTTP Pop-Up (HTTP-only) - a pop-up window that appears after other prompts that is required for HTTP sites.

Step 5. Welcome Notification

Optional: Welcome notifications an optional way to thank users after subscribing to your site. Users will see a welcome notification as soon as they subscribe. You can edit or disable them in the Configure section of your plugin.

👍

You're Done!

Next step: Sending Push Messages

FAQ

Frequently Asked Questions about the WordPress Plugin

How do I send a notification when a post is published?