What is a push notification?
Push notifications are clickable pop-up messages that appear on your user’s device normally with a call to action or an alert

Why use push notifications?
Adding push notifications to your app means you can reach your app’s audience when you want, even without them being in the app, encouraging better engagement.

Get started

This article will cover the following topics:

  1. Configure push notifications on iOS
  2. Configure push notifications on Android
  3. Test push notifications
  4. Rotating configuration details

Configure push notifications on iOS

To configure push notifications on iOS see the below video or guided steps

    1. Enable push notifications for the app ID – in your Apple developer account
    2. Create an APNs key – in your Apple developer account
    3. Upload details from APNs key – in Fliplet Studio
    4. Setup the app to ask users to accept notifications – in Fliplet Studio

    Step 1 – Enable push notifications for the app ID

    1. Sign into your Apple Developer account and click on “Certificates, IDs & Profiles”

    2. If you have already requested your app to be built via Fliplet studio (recommended) click identifiers, and select the app you are configuring push notifications for

    3. If you have not requested your app and you do not have an app ID yet, click on the blue + button at the top and add it there.
      You need to make sure the bundle ID added here is the same as the one used in Fliplet Studio. You can check your apps bundle ID in the Publish section if you select ‘Publish to Apple Devices’ and go to ‘App technical details’ 
    4. Scroll down and check the box next to Push Notifications and then save your changes

    Step 2 – Create an APNs key

    1. Still in your Apple developer account,  go to “Keys” and click the + to create a new key

    2. Select the Apple Push Notification service (APNs) and give it a name

    3. On the next screen, click confirm and then your APNs key is created

    4. Download it from here, but make sure to store this somewhere safe as it cannot be downloaded again

    5. Note: you can re-use your APNs key across any of your apps and this key doesn’t expire

    Step 3 – Upload details from APNs key in Fliplet Studio:

    1. Once you have downloaded your APNs key, head back into Fliplet Studio, 

    2. Go to the ‘Publish’ section, and click manage settngs under publish to Apple 

    3. Select the push notifications tab. This is where you need to add the details from the APNs key you just created

    4. You can find the Key ID in your Apple developer account under “Keys” and “All”. Click on your specific key to see the information:

    5. Paste this into the Key ID section in Fliplet Studio

    6. Open the APNs file you downloaded (it should be a p8 file) in a text editor or your browser window to get the key and copy everything, including the —- Begin private key —- part


    7. Paste the text of the Key into the Authentication Key section in Fliplet Studio
    8. Click save

    Step 4 – Set up the app to ask users to sign up for notifications

    1. In Fliplet Studio, go to  ‘Send notifications’ in the publish section
    2. In the ‘Permission popup’ tab, either select the option to “Show notification pop-up automatically” or copy the snippet and paste that into a screen of your choice if you want the user to be asked on a specific screen
    3. Click save
    4. The final step is to publish an update to your app so that the settings are applied to your live app. Do this by clicking on ‘Update your app’ and selecting your update method. For more help on publishing and update to your app, please read this article.

    How to Configure Push Notifications on Android

    1. Create a new project in Firebase
    2. Visit Google Cloud to set up your FCM services
    3. Create service account
    4. Create a new key
    5. Submit the information in Fliplet
    6. Setup the app to ask users to accept notifications – in Fliplet Studio

    Step 1 – Create a new project in Firebase

    1. Each app will need it’s own firebase project.
    2. To get started, Go to the Firebase console and click on add project


    3. Give your project a name, this can be anything but we recommend your app name, specify your location, and then click create project

    4. Select create project, and then continue
    5. Register your app. Each app should have a separate firebase project.
      1. Select the Android app in the project
      2. For the Android package name- Enter the Bundle id found in the Google publish tab of Studio
      3. Click on “register app”
      4. This will enable you to download the google-services file. Make sure to save this to your files, as this will be required later in the process
        Note: each app will need it’s own service file

    Step 2 – Visit Google Cloud to set up your FCM services

    1. Start by opening Google Cloud


    2. Now, select the project that relates to your existing app from the dropdown menu


    3. Once you have selected the project, use the search bar to search for “roles” and select


    4. Now select “Create Role”


    5. Enter the following information in the Title, Description, ID, and Role launch stage:
      Title – pushnotifications
      Description – Created on “today’s date”
      ID: pushnotifcations
      Role launch stage – General availability

    6. Select “Add Permissions” and filter by “cloudmessaging.messages.create”

    7. Click “add” to add and save the permission



    8. Now, click “Create” to create the role


    Step 3 – Create service account

    1. Next, go to “Service Accounts” on the left hand side menu, and select “Create Service Account”



    2. Give the service account a name and select “create and continue”


    3. Under roles, search for the role you just created




    4. Select “done”

    Step 4 – Create a new key

    1. Click on the 3 dots next to the service account you named, and select “manage keys”



    2. Select “Add key” and choose “Create new key”



    3. Select “JSON” and then “Create”. This will auto-download the JSON file, which you can then use to upload it into Fliplet Studio for configuring FCM notifications

    Step 5 – Submit the information in Fliplet

    1. Open your app in Fliplet Studio
    2. In the top right hand corner select “publish” and choose “more publishing options”
    3. Select “publish to Android”
    4. Open the “push notifications” tab
    5. Under “Step 3” upload the Google services file from step 1 in this article. You will see “file is valid” if the file is correct
    6. Under “Step 5” upload the services account file. This is the key you created in step 3 of this article. You will see “file is valid” if the file is correct
    7. Check your submission details 
    8. Finally, save the updates and click “submit” to rebuild the app with the new push notification service

    Step 6 – Set up the app to ask users to sign up for notifications

    1. In Fliplet Studio, go to  ‘Send notifications’ in the publish section

    2. Click settings
    3. Configure the settings for the notification interface that will ask the user if they want to enable push notifications
    4. Click save
    5. The final step is to publish a new version of the app to either the Google play store or your Enterprise app store.
    6. For more information read the article about how to publish to Google play store or how to publish an Enterprise Android app

    Test push notifications

    Note – Your app must have push notifications already enabled. If you have not done this please see above.

    If you are looking for information on in-app notifications, read this article.

    To test push notifications you’ll need to:

    1. Set up the push notification test
    2. Send the push notification test
    3. Send the push notification test again (optional)

    Step 1 – Set up the push notification test

    1. In your app, select publish
    2. Select the notifications button
    3. Click create new
    4. Enter a title and a message for your test notification
    5. Add a link to test that the link feature is working. Select one of the following options:
      Link to screen, and then select a screen from the dropdown and select an animation
      Link to webpage, and enter a web page
    6. Click select recipients 
    7. Under send notification to, select test devices, this will show you can see the estimated number of recipients who will receive your message
    8. Under device IDs enter the ID for your device. To find the ID, go into your app and click on “about this app” (usually at the bottom of your hamburger menu)
    9. Optionally, add notes to the recipients of your notification
    10. Click prepare for send

    Step 2 – Send the push notification test

    1. Under send notification, select now
    2. Under Show notification as select both “in-app notification” and “push notification”
    3. Click  review
    4. Check the preview of what your push notification will look like. You can see a confirmation of the message that you will see for the in-app notification but not what it will look like at this stage
    5. Click send notification
    6. A success message will appear. Click ok
    7. If the test was successful, you will be able to see that the notification has been sent, it will appear as a sent message rather than a draft
    8. The edit option will have disappeared now that the notification has been sent. However, you can click “Copy” if you wish to create a duplicate.
    9. To see the results of your push notification, click on the “Push notification result” button next to copy. You will see how many devices received the notification and how many batches of the notification were sent

    Step 3 – Send the push notification test again (optional)

    If you already sent the push notification test to yourself but wish to send it again to a department:

    1. Next to your notification, click copy
    2. Make any changes you require to the text and then click select recipients
    3. Under send notification to, select signed in users
    4. Under recipients must match all of the following, choose which department(s) you would like the push notification to be sent to
    5. Click prepare for send
    6. Select whether you would like to send the notification now or later
    7. Under show notification as select in app notification and push notification 
    8. Click review
    9. If you chose to send the notification now, then click send notification and, if you chose later, click save notification

    Rotating configuration details

    How to rotate Apple Push Notification service (APNs) details

    To rotate your APNs key details, you need to create a new APNS key and upload it to replace the old one. Here’s a step-by-step guide on how to do this:

    1. First, go to the Apple Developer website and log in with your Apple ID which has the necessary privileges
    2. Revoke your current APNs key
      1. Navigate to the “Certificates, Identifiers & Profiles” section
      2. Click into keys
      3. Select your current key and choose revoke
    3. Create a new APNs key
      1. Click on the “+” button to create a new key
      2. Name the key
      3. Select to enable Apple push notification service (APNs)
      4. Select Continue to download the key

    4. Upload details from APNs key in Fliplet Studio.
      Note: If you have multiple apps using APNs, make sure to follow the next steps for each app  
      1. Once you have downloaded your APNs key, head back into Fliplet Studio, 
      2. Go to the ‘Publish’ section, and click manage settngs under publish to Apple 
      3. Select the push notifications tab. This is where you need to add the details from the APNs key you just created
      4. You can find the Key ID in your Apple developer account under “Keys” and “All”. Click on your specific key to see the information:

      5. Paste this into the Key ID section in Fliplet Studio

      6. Open the APNs file you downloaded (it should be a p8 file) in a text editor or your browser window to get the key and copy everything, including the —- Begin private key —- part

      7. Paste the text of the Key into the Authentication Key section in Fliplet Studio

      8. Make sure to save any changes
      9. Test the new configuration by logging into your live app and sending a test notification

    How to rotate Google Firebase information 

    To rotate your Google Firebase information, you need to create a new server key and upload it to replace the old one. Here’s a step-by-step guide on how to do this:

    1. Log into the Firebase Console
    2. Create a new server key
      1. Select your project
      2. Click on the gear icon next to “Project Overview” to enter the “Project settings”.
      3. Inside the project settings, navigate to the “Cloud Messaging” tab.
      4. Generate a new server key by scrolling to the “Project credentials” section.
      5. Click on “Add server key” to create a new one
    3. Add new project details in Fliplet Studio
      1. In your app, click publish in the top right corner
      2. Click ‘Publish to Android devices” and go to the ‘push notifications’ tab

      3. Replace the Firebase server key but ensure that the Firebase sender ID and Firebase project ID stay the same
      4. Use the “test” button to verify the configuration is correct

      5. Save changes
      6. Test the new configuration by logging into your live app and sending a test notification
    4. Once you have confirmed the new server key is working, you can delete the old server key from the Firebase console to ensure security.

    Related Articles

    Was this article helpful?
    YesNo