Skip to main content
All CollectionsIntegrations
Send push notifications with Bubble & Progressier
Send push notifications with Bubble & Progressier

This article explains how to use Progressier in a Bubble workflow to send personalized push notifications

Kevin Basset avatar
Written by Kevin Basset
Updated over a week ago

Prerequisites

  1. You'll need a valid Progressier subscription and have completed the onboarding

  2. You'll need to make sure your user data is in sync with Progressier.

  3. You'll need a Bubble app on the Personal plan or higher

Install the official Progressier plugin

  1. Go to your Bubble dashboard, click on Plugins in the menu, and click on Add plugins.

  2. Search for Progressier, choose Progressier — PWA & Web Push, click Install, and then Done.

  3. In the Progressier dashboard, go to Settings > Danger Zone > API Key and copy the value you find there. Then paste it into your Bubble dashboard in the API key field.

  4. Follow the instructions in this article to connect your Bubble data with push subscriptions.

Use the API in a workflow

Now that you've initialized the connection with Bubble, you can use Progressier in a workflow. The email targeting action enables you to send a notification to a specific user. The general targeting action allows you to send a notification to all subscribed users in one go (or to all users with a specific tag).

Select Insert dynamic data to use your user data. You can now trigger push notifications as part of any workflow!

API Fields

title required

The title of the push notification, up to 50 characters. This typically identifies the sender of the notification, i.e. you or one of your users depending on the purpose of the notification.

body required

The main message of the push notification, up to 100 characters. Avoid repeating your app name or what you already set in title. It's generally a good idea to display a text preview of the content users will see when they click the notification.

url required

The URL where users will be taken when they open the push notification.

email required with the email targeting plugin action

The email of the user to notify. You may want to use Bubble's native function: Insert dynamic data > Current's User email for testing purposes. But in most cases, you'll want to generate a dynamic list of emails based on other criteria. Note that you can enter a single email (e.g. hello@progressier.com) or a comma-separated list of emails (e.g. user1@progressier.com,user2@progressier.com,user3@progressier.com).

recipients required with the general targeting plugin action

An JSON object with key/value pairs that identify one or more recipients of the push notification. The push notification will be sent to every user that matches your rule. For example, if you set this to {"tags": "premium"}, the notification will be sent to any user who has premium as a tag. To send a notification to ALL users, set recipients to {"users": "all"}.

icon optional

The URL of an icon that represents the sender of the notification. If not specified, Progressier uses the image specified at My PWA > Icons & Colors > Default push sender icon. On iOS, notifications always use your app icon.

  • Minimum resolution: 192x192 pixels

  • Recommended aspect ratio: square 1:1

  • Format: JPG or PNG

  • Android/macOS/Windows only

badge optional

The URL of a monochrome badge that replaces the Chrome icon on Android. If not specified, Progressier uses the image specified at My PWA > Icons & Colors > Monochrome app badge.

  • Minimum resolution: 72x72 pixels

  • Format: PNG with transparency

  • Android only

image optional

The URL of a large image accompanying the push notification. Use this field to show an image preview of the content the user will see when they open the notification. If not specified, no image will be used.

  • Recommended aspect ratio: 2:1 landscape

  • Recommended size: 1440x720px

  • Max width: 2000px

  • Min width: 300px

  • Format: JPG

  • Android/Windows only

Did this answer your question?