How to add Push Notifications to a Webflow Site

Webflow (as you probably know) is an amazing solution that can help you build a website without coding skills. While navigating through their blog one day, we noticed that a lot of people were looking for a way to integrate web push notifications into their Webflow site.

Most push notifications solutions require that you upload a Javascript (.JS) file — this file serves as the service worker, which is essential for push notifications to work. The free Webflow plan doesn't currently allow custom code uploads of this kind, so you'll need a Webflow Site plan, Account plan, or Enterprise plan in order to get started.

In this how-to guide, we’ll show you how to add push notifications into your Webflow site using OneSignal. The good news is, you can create a OneSignal account and send unlimited push notifications for free.

Guide Overview:

• Step 1: Set up Your Webflow Site
• Step 2: Set up Your OneSignal Account
• Web Push Configuration
• Step 3: Integrate OneSignal into Webflow
• Step 4: Testing Time!
• Recap

Step 1: Set up Your Webflow Site

If you haven’t done so already, create your Webflow site and choose your preferred plan type. If you currently have a free Webflow account, upgrade to the plan that best fits your budget and goals in order to unlock custom coding options.

After you’ve created your site in Webflow, copy your site URL. In our example, our site URL is: https://onesignal-webpush-devrel.webflow.io/

Step 2: Set up Your OneSignal Account

• If you don't have on already, create a free OneSignal account. When you first log in, you will be prompted to set up a new app or website.
• To get started, insert the name of your website and select _ Web Push _ as your chosen platform.

Web Push Configuration

• In section _ 1. Choose Integration _, select _ Typical Site _.
• Under _ 2. Site Setup _, enter your web configuration. Our configuration is shown in the image below. Paste the Webflow URL you previously copied into the section entitled _ SITE URL _.

• Make sure you select _ My site is not fully HTTPS _ and input a custom label. This is the main trick to get push notifications from OneSignal to work on a Webflow site.
• In section _ 3. Permission Prompt Setup _, you should see a blue button to configure the HTTP Pop-up setup. This pop-up is an iFrame that will act as a mirror of your page that will allow you to receive notifications on your Webflow website.

• After clicking on the blue button, a window will appear where you can modify the configuration of your pop-up. For this example, we left the automatic placeholder text in place, but you can change the text of your pop-up to better fit your website UX. Click _ Done _ in the bottom right corner of the window when you’ve finished making changes.

• Finally, scroll down to the bottom of the page and click _ Save _.
• In the final setup step, you will see a grey _ COPY CODE _ button — click this button to copy the code.

Step 3: Integrate OneSignal into Webflow

Now it’s time to integrate OneSignal into your Webflow site.

• Return to your Webflow dashboard. You should see all the projects you’ve created under your Webflow account. Select the site you’d like to add push notifications to by clicking on the three dots next to the project name, then select _ Settings _ from the drop-down menu that appears.

• In the settings menu for this Webflow project, click on _ Custom Code _ on the far right of the navigation bar.

• Under the _ Add Custom HTML & CSS _ > _ Head Code _ section in this tab, paste the code you previously copied from your OneSignal account. If you haven’t copied anything else since completing the _ Web Push Configuration _ step, the code snippet should be in your clipboard. If you need to, you can go back to your OneSignal project settings and re-copy the code.

• After pasting the code into the appropriate box, click on the green _ Save Changes _ button.

Step 4: Testing Time!

Push notifications require user opt-in permission. In order to preview your notifications, you’ll first need to subscribe to notification on your site.

• Navigate to your Webflow site in your browser and click _ allow _ in the permission prompt that appears.

You’ve successfully integrated OneSignal with your Webflow account! Now, you can create and send custom messages from your OneSignal account and they will appear to subscribers on your website. As you build your subscriber list, you can hone your messaging strategy by sending custom notifications to specific audience segments.

If you don’t know how to send a push notification using OneSignal, follow these instructions to send your first notification.

Recap

This setup process is a breeze as long as you remember two key things:

• You must have a paid Webflow account in order to add notifications to your website.
• As you complete Web Push Configuration on your OneSignal account, make sure you select the option _ My site is not fully HTTPS _ and add a custom label. This is the main trick to get push notifications from OneSignal to work inside of a Webflow site.

Still have questions? We've got answers. Reach out to us at support@onesignal.com.