Bravo Studio Help Center
  • Get started with Bravo Studio 👏
  • Get Started
    • 🚀Create your first app
    • 🌟Bravo introduction
      • Get ready to create your app with ChatGPT
      • Create an app
        • Creating an app with Figma
        • Creating an app with Adobe XD
      • Duplicate an app
      • Delete an app
      • Replace linked Figma file
      • The app page
      • Sharing your app
      • Add an editor to your app
      • Fonts
        • Adobe XD - Supported fonts
    • 📱Bravo Vision previewer
    • ✨Unlock power features to create interactive apps
    • 🎓Help and tutorials
      • 📖App guide tutorials
        • Sample app tutorial: Your first binding
        • How to build a Fitness app with Bravo, Xano and RevenueCat
        • Foodgram: Social content sharing
        • Expedition journal: Write and share your adventures
        • My Subscriptions: Display data based on device ID
        • My Notes: using user ID and email from Firebase
        • My Store: Sell physical products with Bravo and Stripe
        • Titan: How to create a Smart Home App with No-Code?
        • n8n: Building an expense tracking app in 10min
      • 📺Learn with videos
      • 📚Learn with articles
      • 🗃️Browse by app feature
        • Save or "bookmark" a page
        • Backend search with Airtable
        • Backend search with Xano
        • Nested lists (list within a list)
        • Create and edit user profile (Firebase + Airtable)
        • Skeleton loader
        • Create albums in your app with Bravo Infinite images
  • Set up your design
    • 🖌️Get your Figma ready for Bravo
      • 🗃️Structuring the design: the layer hierarchy
      • 🪄Bravo Tags: adding functionality to the UI elements
      • 🧱The container
        • Setting up a container on Figma
        • Setting up a container on Adobe XD
      • 📲App navigation
        • Setting up app navigation on Figma
        • Setting up app navigation on Adobe XD
    • 🔌Bravo plugin for Figma
    • 💾Sample design files
    • 🤓Best Practices
  • App components
    • 📒Bravo Tags Master List
    • 🚪Menus
      • Modal Menu
      • Modal pages
      • Tabs Menu
      • Pop Up pages
      • Slide Menu
    • 🍞Pages
      • Modal pages
      • Pop-up pages
      • Swipe page
      • Transitions page
      • Page reveal animations
      • Page tabs
      • 🔮Stateful pages
    • 📦Containers
      • Swipe to delete
      • Top bar
      • Carousel slider
      • Aspect ratio relative to screen
      • Sortable List
      • Layer (sticky element)
    • 👋Intro & Onboarding
      • Intro page
      • Post-login page (Onboarding)
    • ⌛Loading experience
      • Loading page
      • Custom loading page
      • No loading
      • Preload
    • 📝Form & input fields
      • 👁️Password Visibility Toggle
      • 🩷Stateful input
        • ☑️Checkboxes (Multiple select)
        • ✅Required Checkbox
        • 🔘Radio buttons (Single select)
      • ⏳Input time Interval
      • 📄Dropdown selector
      • 🎚️Slider control
      • 🗓️Calendar picker
      • 📄Send form input to a database
    • 💎Components
      • Autoplay Video
      • GIF
      • SVG Component
      • Web view
      • Web Components using AI
      • Web view communication
      • LottieFile
      • Lottie-animated component
      • Flexible text (Flexo)
      • Zoomable image
      • Component states
      • Stateful component (like button)
      • Setting up the backend of Stateful component (like button)
      • Haptic Feedback (Buzzz)
      • Progress bar
      • Rich text
      • Date, Time and Currency Formatter
      • Scrollable text
      • Text Lines & Truncation
      • Status bar
    • ⚡Mobile actions
      • Mobile Actions
      • Play audio
      • Record audio
      • Play video
      • Scan QR code (external URL)
      • Scan codes (remote action)
      • Search & filter
      • Refresh page
      • Share location
    • 📱App Icon & Splash Screen
    • 🗺️Map with markers
    • 📈Charts
  • Data and Backend
    • 🗂️Set up a no-code backend
      • Xano
        • Nested lists (list > list > detail page) with Xano
        • Create a bookmark functionality with remote actions and device ID with Xano
        • Multi-user setup with Xano
        • 🔒Setting up the Xano Log in Snippet
          • ♻️Refresh Token
      • Airtable
        • Nested lists (list > list > detail page) with Airtable
        • Sort list with Airtable
        • Connect multiple tables from Airtable to one app
        • Update Airtable's API key to Access Token
      • Backendless
      • Bubble
      • Notion
        • Getting data from a Notion table
      • Firebase
        • Getting data from Firestore
    • 💾Set up API requests
      • Set up from scratch
        • Airtable
          • Set up an API GET request for list page - Airtable
          • Set up an API GET request for detail page - Airtable
          • Set up an API POST request - Airtable
          • Set up an API DELETE request - Airtable
        • Xano
          • Set up an API GET request for list page - Xano
          • Set up an API GET request for detail page - Xano
          • Set up an API PATCH request - Xano
          • Set up an API POST request - Xano
          • Set up an API DELETE request - Xano
      • Using GraphQL body type
      • Set up with API wizard & importer
        • Using the Airtable API Wizard
        • Using the Xano API wizard
    • 🎲Variables
      • Built-in variables
      • Set Variable
    • 📚Data Collection & Binding: Complete Collection
    • 🗂️Pagination
    • 🐛Debugging API issues
      • ⚙️Debugging requests in the API Collection
      • 📲Event logger
      • 🔗Link property
  • Data binding
    • 🤝Data binding types
      • API binding types
      • Bind multiple API requests to one screen
      • How to connect my API to a mobile actions
      • Remote actions: trigger an API request with a UI element
    • 💡Display data in your app
      • Bind data to design for a list page
      • Bind data to design for a detail page
    • 🆕Create data from your app
    • 🗑️Delete data from your app
    • 🚦Conditional Visibility
    • 🎛️Conditional Actions
  • Integrations & Settings
    • 🖇️Deep Links
      • 🖇️Deep Links for Bravo Vision
      • 🖇️Deep Links for published apps
      • 🖇️Troubleshooting Deep Links
    • 🔔Push Notifications with OneSignal
      • How to get a Bravo page URL
    • ⚙️Firebase Configuration
    • 🔐User Authentication
      • 🔑Authentication with Kinde and Xano
      • 🧙🏽Authentication with OAuth 2.0
        • Using social logins to authenticate users
        • Using AWS Cognito to authenticate users
        • Connecting to Spotify API
      • 📲User login with Firebase
        • ✉️Email and password Login with Firebase
        • 📞Phone Login with Firebase
        • 🍎Social Login with Firebase
        • 👻Anonymous Login with Firebase
      • ⛓️Authentication with custom backend
        • Set up Xano as your user authentication backend
    • 💰Stripe: One-time Payment
    • 💬Chat: CometChat
    • 💸RevenueCat: In-app purchases and subscriptions
    • 📉Bravo Analytics
    • 📳Facebook App Events
    • 📊Google Analytics
    • 🌐Multilingual apps
    • 🕸️How to connect with Webflow API
    • 📡NFC connection
    • 🎯Admob
  • App Publication
    • 🚀Publishing your app
      • iOS Publication: Complete Process
        • 1. Generate Certificates, AppIDs and Provisions
        • 2. Get the IPA
        • 3. Upload IPA to App Store Connect
        • 4. Test your app on TestFlight (optional)
        • 6. App Store publication
        • 7. Updating an app in the App Store
      • Android Publication: Complete Process
        • 1. Create a Keystore File (optional)
        • 2. Get the Debug APK to install
        • 3. Install the Debug APK in your device
        • 4. Get the AAB (Android App Bundle) file to publish
        • 5. Google Play publication
        • 6. Updating an app in Google Play
      • Android APK Installation Guide
      • Rejection from the app stores
    • 🎛️Making changes to your app after publication
    • 🛍️Versioning
    • 🌟App rating alert
  • Good to Know
    • 🤔Troubleshoot
      • Errors when logging in
      • Errors when creating an app
      • Errors in API requests
        • Request timeouts on Bravo
      • Errors after importing
      • Errors in publication form
    • 🧑‍💻Manage your account
    • 💳Billing
      • Bravo Subscription Plans Overview
      • App Add-ons
      • Upgrading a plan
      • Downgrading a plan
      • App allowance
      • Invoices & payment method
      • FAQ
    • ❓FAQs
      • About Bravo Studio
      • Importing a design file
      • Bravo Vision
      • Bravo Tags
      • API & Data Library
      • Login & Account
      • Other Features
  • NEED SOME HELP?
    • 📖Bravo Support Guide
    • 🤝Join the Bravo community
    • 🤖Bravo Assistant
    • 👥Production support
    • 🐞Report an issue
Powered by GitBook
On this page
  • 👉 The Tags
  • Test Push Notifications in Bravo Vision
  • Set up push notifications for live apps
  • Getting the platform-specific assets
  • For Android
  • For iOS
  • Setting up the notifications from Bravo Integrations
  • 🧙🏽 Using the Bravo OneSignal account
  • 🧙🏽 Using your own OneSignal account
  • Using the OneSignal API
  • Creating a "Go to page" notification action via OneSignal API

Was this helpful?

  1. Integrations & Settings

Push Notifications with OneSignal

This guide covers how to set up and send push notifications to engage with your app users.

PreviousTroubleshooting Deep LinksNextHow to get a Bravo page URL

Last updated 2 months ago

Was this helpful?

Requirements: - A mobile phone (Android or iOS)📱 - account (optional)

If sending to a published app: - -

In case your app is targeted to children and you want to publish to Google Play (Android), you won't be able to include notifications in it, as per Google Play policy. Read more in the .

👉 The Tags

Action: Enable notifications

📍 Where to add the tag: Any layer (except top-level app page).

[action:enablenotifications]

Start by adding this tag into a button or any UI element of a screen. This action triggers a pop up informing the user that the push notification has been enabled. When triggered, this action will also register your device on OneSignal.

Enable push notifications setup in Figma

If you add the tag to a group (like in our example), the tag must be added to every element within the group. See how it's set up on the sample app.

If the user accepts, that component will disappear. Note that in this example, we placed a “Push notification enabled” message just behind the button so it is shown after the user accepts the permission.


Action: Require notifications (Optional)

📍 Where to add the tag: Any top-level app page.

[require:enable-notifications]

This tag enables the app to request for notifications permissions when entering a designated page, ensuring alerts aren't missed if previously dismissed by the user. It allows for triggering the notification enablement pop-up in various app sections, beyond the device's general settings.

The [require:enable-notifications] tag is currently supported in Final apps.

Google Play Publication Requirement: The notification icon should have a transparent background, white color and size 96x96. If it doesn't meet these requirements, you'll see Bravo Studio's icon instead.

Disabling notifications cannot be done directly from the app. This action needs to be handled by users through their device settings.

We suggest adding an informative text to guide users on how to turn off the notifications like "To turn notifications off, go to your device's app notification settings."

You can test push notifications on Bravo Vision before your app is published.

  1. Go to your app project page, click on the three dots located on top right of the screen and from the dropdown menu, choose Push Notifications.

  2. Complete the notifications message by adding a title, message and setting the notification action. Bravo allows setting four different notification actions. These will happen when the users click on the push notification you send.

    • None: the push notification will still be clickable, but nothing will happen upon clicking.

    • Show alert: an alert message will be displayed once the user clicks on the push notification.

    • Open URL: an external URL will be opened in the mobile browser.

    • Refresh: the app screen will be refreshed. In case it's bound to API requests, these requests will be performed again, and the related data will be updated in the screen.

  3. Finally, Click on the "Send Bravo Vision Test" button to send the push notification.

The Enable Push notification trigger is required only once per app. If you are testing in with Bravo Vision and you have already enabled "automatic updates" in Bravo Vision, then you will not get the alert to allow notification in your app as it is already enabled.

In this section, we'll guide you how to set up push notifications for published apps. It will also work in a debug APK (Android) or TestFlight (iOS).

Getting the platform-specific assets

For Android

If you see this warning in your OneSignal account, your push notifications might have stopped working. Skip to step 4 for instructions to generate a Private Key JSON fileComment

  1. Click on Create a project or select an existing one below. If you already have a project for your app, use the same.

  1. If not, enter a project name, accept the Firebase terms and press Continue.

If you publish several apps with your Bravo account, you should create one Firebase project for each app. The tokens cannot be reused for more than one app.

  1. Click the gear icon in the top left and select Project settings. Then, select the Cloud Messaging tab.

  2. If you've just created a new project, this should already be enabled by default and you can skip this step. However, if you are using an existing Firebase project, especially an older one, ensure Cloud Messaging API (V1) is enabled. If Firebase Cloud Messaging API (V1) is disabled, then click the kebab menu icon on the top right corner and open the link.

  3. On the subsequent page, click Enable. You may need to wait a few minutes for the action to propagate to Firebase systems.

  4. Now you need to generate a Private Key JSON file. Back in your Firebase Project Settings, go to the Service accounts tab.

    Click Generate new private key at the bottom of the page.

  5. Save the JSON file somewhere secure. You will need it shortly to upload it to your OneSignal account.

For iOS

Requirements:

  • An iOS mobile app. (This method won't work for websites / web push)

  • An App created on the Apple Developer Account.

Generate the CSR

1. Open the Keychain Access app on your macOS system. It is located in Applications -> Utilities -> Keychain Access.

2. At the top menu, select Keychain Access -> Certificate Assistant -> Request a Certificate From a Certificate Authority...

3. Select Save to disk and enter your information in the required fields. This creates a certification request file that will be used later.

Generate the Apple certificates

2. In Certificates, click on the + button.

3. Select Apple Push Notification Service SSL (Sandbox & Production), and click Continue.

4. Select the App ID (the one without the OneSignalNotificationServiceExtension suffix.

5. Click Continue, choose the CSR file generated before, click Continue and finally Download.

Generate the p12 file

1. On your computer, open the push certificate file (aps.cer):

2. One the Keychain Access app, search for the Apple Push Certificate. You should see a certificate called "Apple Push Services ...." (If it is not there try double-clicking in the downloaded file).

3. Right click on the certificate (make sure it's folded!) and click "Export "Apple Push Services..."

You will be asked to enter a password, add one if you want but be sure you remember it later. After entering the password, it asks your computer user password to finish the export.

Setting up the notifications from Bravo Integrations

Once you have the files and tokens specified in the previous section, it's time to set up the notifications with OneSignal.

In order to unlock the most advanced notifications features OneSignal offers (such as scheduling and API access), you'll need to create a OneSignal account. However, this is optional - you can also use the default Bravo account for OneSignal. In this case, you don't need to create a OneSignal account. You won't be able to use the advanced features OneSignal provides, but you'll still be able to send notifications manually from the Bravo dashboard, and include some actions bound to the push notification (such as go to page, or open URL).

🧙🏽 Using the Bravo OneSignal account

In case you want to use the default Bravo account for OneSignal, open Bravo and go to Integrations → Notifications inside your project. There, activate the OneSignal toggle. Once you do that, select Bravo Account in the first step. In the following steps, you'll need to provide the assets for Android and iOS we got in the previous section.

  • Android: Firebase Sender Key and Server ID.

  • iOS: p12 certificate and password (in case you specified one when generating the certificate).

Once you provide all the assets, click "Save". Now, you'll be able to generate your app bundle.

In case you already have a published app bundle, and you change these settings, you'll need to generate a new bundle and publish an update to the stores.

After you install it on your device (either downloading it from the app stores, or using debug APK or TestFlight), you can start sending notifications from the Bravo dashboard (Notifications section on the project dashboard).

🧙🏽 Using your own OneSignal account

With your own OneSignal account, you'll be able to leverage all its features for push notifications in the apps, including scheduling, user segmentation, and API access.

After selecting a platform and clicking Next, you'll be asked for the platform-specific assets obtained in the previous chapter [LINK].

🤖 Android

Open the app you just created, and then go to Settings → Platforms→ Google Android (FCM)→ Activate. You can also access this dashboard in the process of creating a new app.

Next to "Service Account JSON" select Choose file and upload the Private Key JSON file you downloaded from your Firebase project in a previous step of this tutorial.

In the next step, select Native Android. Then, click Save & Continue.

Finally, you can leave the Install and Test section as it is, and click Done.

🍏 iOS

Open the app you created before, and then go to Settings → Platforms and select Apple iOS. You can also access this dashboard in the process of creating a new app. You'll be asked to upload your .p12 file, and to introduce its password in case you created one for it.

After uploading the .p12 file, click Save & Continue. In the next step, select Native iOS. Click Save & Continue again.

Finally, you can leave the Install and Test section as it is, and click Done.

Setting the OneSignal tokens in Bravo

Once you've configured your app in OneSignal (for iOS, Android or both), you need to connect your newly created OneSignal app with Bravo. In order to do that, in OneSignal, go to the Integrations → Keys & IDs section inside the OneSignal app you just created. Copy the OneSignal App ID and Rest API Key values.

The OneSignal App ID cannot be changed once an app build is generated. If you change the App ID, you must request a new build. Otherwise, you may see "0" users registered in OneSignal.

Then, go to Bravo and enter your project dashboard. Go to Integrations → Notifications and activate the OneSignal toggle. Select My Account and paste the values copied in the previous step. Then, click Save.

Now, you'll be able to generate your app bundle.

In case you already have a published app bundle, and you change these settings, you'll need to generate a new bundle and publish an update to the stores.

After you install it on your device (either downloading it from the app stores, or using debug APK or TestFlight), you can start sending notifications from the OneSignal dashboard (and also from the Bravo notifications section). Feel free to explore all the options OneSignal has to offer, so you are able to make the most of the tool.

Using the OneSignal API

In case you're looking for more flexibility and control, you can use the OneSignal API, creating a script or using another tool. This will allow you, for instance, to send targeted notifications (to one user o a group of users), send a notification when a specific event happens, or any other functionality you create with your own program or tool.

This is an advanced option that requires some technical knowledge and coding skills.

Below, we describe how to get the URL for a specific app screen. This URL can then be used to send a notification that will open a specific screen in the app, when the user clicks on the push notification.

Creating a "Go to page" notification action via OneSignal API

Generating Bravo internal URLs dinamically

A Bravo internal URL looks like this

https://apps-service.bravostudio.app/devices/apps/{{app-id}}/node/{{node-id}}

We will need the following information, app-id, node-id and some params if some elements in the page are bound to external data.

How to get app-id:

Open your app project in the Bravo dashboard, and copy the identifier in the URL between /apps/ and /screens

How to get node-id:

In your Bravo project screens, clicking on each page, the URL will look like this:

https://projects.bravostudio.app/apps/XXXXXXXXX/screens/XXXXX/bindings

The node-id is the string between /screens/ and /bindings/.

Optional Query strings:

  • params: is a Base64 encode of a plain JSON containing the input parameters needed to fullfill the bound requests. Example {"input-name": <value>}

  • state: is a Base64 encode of a plain JSON containing the pagination state: { "limit": number, "start": number }

Below, we show code examples of how to generate the URL in case the target page has bound data. For instance, a detail page where the displayed data will depend on the associated ID.

<?php

$appId = 'appID';
$nodeId = 'nodeID';
$recordId = 'recordID';
$params = base64_encode(json_encode([
	"Id" => $recordId,
]));
$url = "https://apps-service.bravostudio.app/devices/apps/$appId/node/$nodeId?params=$params";
echo $url;

Example with Javascript:

appId = 'appID';
nodeId = 'nodeID';
recordId = 'recordID';
params = Buffer.from(JSON.stringify({
	Id: recordId,
})).toString('base64');
url = `https://apps-service.bravostudio.app/devices/apps/${appId}/node/${nodeId}?params=${params}`;
console.log(url);

Where appId and nodeId are:

https://projects.bravostudio.app/apps/<appId>/screens/<nodeId>/bindings

and recordId is the ID of the data item associated to the detail page.

Generating the API request message

To create a push notification via OneSignal API, this is the endpoint that needs to be targeted (via POST):

https://onesignal.com/api/v1/notifications

The JSON body you need to use in the request is the following:

{
  "app_id": "<app_id>",
  "include_player_ids": ["<player_id>"],
  "contents": {"en": "Text in English."},
  "data": {
    "action":"goto", 
    "params": 
      {"href": "node-id",
      "hrefRemote": "https://apps-service.bravostudio.app/devices/apps/{{app-id}}/node/{{node-id}}"
      }}
}
  • include_player_ids: This is used to send notifications only to specific devices or users. Read more in the OneSignal API reference.

  • contents: here, you need to specify the message of the push notification. In the example, the text is in English.

  • data: this JSON object contains the following objects inside it:

    • action: the action that the push notification will trigger when it's pressed. To create a go to page action, we need to set it to goto.

    • params: this object will contain another two objects:

Test Push Notifications in Bravo Vision

Before sending the test, make sure that the app is opened, , and to trigger the enable action from your mobile device to see the push notification coming in Bravo Vision. If not you will get an alert in Bravo Studio with this error message: #422 Could not send the push notification. Please reload the page and try again.

Go to page: the user will navigate to the app screen URL specified in the text input field under the action selector. .

Set up push notifications for live apps

Visit the and create a new project.

A with Admin Role.

1. Go to the and access the Certificates section.

Go to and create an account. Once you do that, add a new app and select the operating system your app will be published for (iOS, Android or both). You can only select one platform in this step, but in case your app is published on both iOS and Android, you'll be able to add another platform later.

You can check out the OneSignal API documentation . We encourage you to try out all the options yourself, to unlock all the power of the API.

First, we need to get the internal URL of the page we want to link, we can get the URL of that page manually using Bravo Vision (), or you can generate Bravo Links if the process needs to be automated.

Example with PHP (test the snippet ):

app_id: The OneSignal application ID. It can be found on OneSignal, in the section.

href: here, we'll specify the node-id as defined .

hrefRemote: this will be the Bravo internal URL specified .

📱
⚙️
See here how to get the URL for an app screen
Firebase Console
Paid Apple Developer Account
Apple Developer Portal
onesignal.com
here
Long press once you're in that page and Select Copy Page URL
https://3v4l.org/TQMHq#focus=7.3.28
Keys & IDs
the push notification is configured in Integrations
here
here
🔔
OneSignal
A Google account
Apple Developer account with admin role
Bravo Sample: Push NotificationsFigma
Bravo Sample - Push notifications
Android publication guide
Logo
145KB
Bravo Sample - Push notifications.xd.zip
archive
Bravo Sample - Push Notifications.xd
How to set up [require:notifications] tag in Figma.
The notifications dashboard in OneSignal
Page cover image