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

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

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

    1. Create a new project in Firebase
    2. Add project details to the app – in Fliplet Studio
    3. Setup the app to ask users to accept notifications – in Fliplet Studio

    Step 1 – Create a new project in Firebase

    1. Go to the Firebase console and click on add project


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

    3. Select create project, and then continue
    4. Now you will be launched to the project dashboard, where you find the relevant information for the push notifications
    5. Click the settings button and then click on project settings
    6. Keep this page open and switch back to Fliplet studio

     

    Step 2 – Add 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. Here you need to enter the following information from Firebase: 
    4. Firebase sender ID – find this in the Cloud Messaging tab
    5. Firebase server key – find this in the Cloud Messaging tab
    6. Project ID – find this in the General
    7. Copy the detail from Firebase and then click save

    Step 3 – 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

    NoteYour 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