Implement Mobile Push Notifications

Learn how to send mobile push notifications from your mobile app

MagicBell can help you implement mobile push notifications in four steps.

Setup iOS push notifications

To deliver push notifications from your iOS app you need to register a new auth key for the Apple Push Notification service (APNs) and send it to us. MagicBell will use p8 tokens to authenticate requests made to the APNs.

Follow these steps to register a new key:

  • Login to your Apple developer account and open the keys page (you have to enroll in Apple's Developer Program, before).
  • Register a new key, make sure you enable "Apple Push Notifications service (APNs)"
  • Apple will generate a 10-digit ID and an authentication token signing key. Store it safely.

MagicBell needs the p8 key, ID, team ID for your Apple account, and iOS app's bundle ID. Please get in touch with us so we can help you set them up for your account.

Setup Android push notifications

To deliver push notifications from your Android app you need to create a Firebase project and set your Firebase credentials for MagicBell. Follow these steps to do it:

  • Login to your Firebase account, pick your project and open the settings page of that project. If you don't have a project yet, create one.
  • Open the Cloud Messaging settings tab, copy the server key and sender ID.

MagicBell needs the project's server key, sender ID, and the bundle ID of your Android app. Please get in touch with us so we can help you set them up for your account.

Configure your mobile app

Good, your credentials are set! However, you still need to configure your app.

If you are developing your app with Expo or any other React Native library we recommend using this React Native library. Here you have a short example:

React-Native
import PushNotification from 'react-native-push-notification';
import React, { Component } from 'react';
import { Alert, View, Text } from 'react-native';

export default class App extends Component {
  constructor() {
    PushNotification.createChannel({
      channelId: 'default-channel-id',
      channelName: 'Default channel',
      soundName: 'default',
      vibrate: true,
    });
  }

  render() {
    return (
      <View>
        <Text>welcome to MagicBell</Text>
      </View>
    );
  }
}

PushNotification.configure({
  onNotification: (notification) => {
    Alert.alert(notification.title, notification.message);
  },
  requestPermissions: true,
});

If you face any issues while configuring the library, please feel free to shoot us a note, we will be happy to help. You might also find it helpful to read the full React Native example we created.

This is a sample payload MagicBell will push to your app:

json
{
  "notification": {
    "id": "7fb3ce9f-a866-4dff-8ce8-2f64f7c5ed4c",
    "title": "Pickup Instructions – In-Store",
    "action_url": "https://magicbell.com/pricing",
    "content": "<ul><li>Bring your valid government-issued photo ID.</li></ul>",
    "category": "order_ready",
    "custom_attributes": {
      "order_number": "W846MD",
      "part_number": "MRJL74/C"
    }
  }
}

If you set overrides for the mobile_push channel, those values will be pushed to your app.

Forward device tokens to MagicBell

Both Android and iOS will generate a registration token when someone installs your app on their device. Please retrieve it and forward it to MagicBell.

React-Native
import { Platform } from 'react-native';
import PushNotification from 'react-native-push-notification';

PushNotification.configure({
  onRegister: (token) => {
    fetch('https://api.magicbell.com/push_subscriptions', {
      method: 'POST',
      headers: {
        'X-MAGICBELL-API-KEY': MAGICBELL_API_KEY,
        'X-MAGICBELL-USER-EXTERNAL-ID': CURRENT_USER_ID,
      },
      body: JSON.stringify({
        push_subscription: {
          device_token: token,
          platform: Platform.OS,
        },
      }),
    });
  },
  requestPermissions: true,
});

Keep in mind that a new device token will be generated when the user reinstalls the app or clears the app data. Therefore, you will have to forward the new token to MagicBell each time a new one is generated.

Now MagicBell will deliver mobile push notifications when you create notifications through the create notifications API endpoint!