Implement mobile push notifications

MagicBell can help you implement mobile push notifications in three 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 will need to be registered as an
• 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

Once your credentials are set, MagicBell will deliver mobile push notifications when you create notifications through the create notifications API endpoint. 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 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.