Onymos Raises $12M Series A: Learn why

onymos-logo
notification icon

Quickstart Guide: Notification Component

Notification Component

Select a framework to get started.

Get started

Using Ionic or Cordova? Get the Notification component working in your app in four easy steps.

  1. Download the component
  2. Add it to your environment
  3. Using Notification
  4. Troubleshooting

1. Download the Onymos Notification component

Sign up! We’ll send you a link to your component, set up your Onymos Cloud Account, and generate your Onymos license credentials. In the meantime, you can get familiar with our API Documentation and developer resources, or join a whole community of developers building apps with Onymos on Reddit!

2. Add it to your environment

Add your components to a folder in your app’s root (e.g., onymos_components).

Add the Onymos Initialize component to your environment.

$ ionic cordova plugin add onymos_components/onymos-component-initialize

Then we can add the Onymos Notification component.

$ ionic cordova plugin add onymos_components/onymos-component-notification

Then update the widget inside your config.xml with the Onymos Widget ID you receive after you create an Onymos Cloud Account.

3. Using Notification

Using the Notification component in your app
Messages, likes, updates—every app notifies its users of something, but writing code that does it, across multiple platforms and frameworks, isn’t easy. Unless you use the Onymos Notification component! You can enable badging, include distinctive sounds, and navigate a user where they need to go.

Before we use Notification, let’s make sure we have everything we need to configure your onymosConnectObject. The onymosConnectObject requires the appropriate Onymos license credentials: your Customer ID (also called an Onymos ID) and your Onymos Auth Token. You’ll need these credentials to use this (or any) component in your app. To generate your Onymos license credentials, create an Onymos Cloud Account.

NOTE: Your Onymos Auth Token will work with any number of apps and components. Onymos has a developer—and project—friendly pricing model. You can use any or all of our components in an app at no cost until they’re installed on 100 or more devices. This is ideal for iterating your MVP (see detailed pricing here).

Next, let’s go inside your Ionic app’s app.component.ts file and initialize Notification.

 import { Component } from '@angular/core';
 import { Platform } from '@ionic/angular';
    
 declare var OnymosInitialize: any;
 declare var OnymosLocation: any;
    
 @Component({
   selector: 'app-root',
     templateUrl: 'app.component.html',
     styleUrls: ['app.component.scss'],
  })
  
  export class AppComponent {
    constructor(
      private platform: Platform
    ) 
    {
      this.initializeApp();
    }
    
     initializeApp(){
        this.platform.ready().then(() => {
    
          const OnymosConnectObject={
            customerId : 'Your customerId goes here', 
            onymosAuthToken : 'Your onymosAuthToken goes here',  
            envType: 'PRD',
            version: '2'
            }
    
          OnymosInitialize.initialize(
            OnymosConnectObject,
          
            function onymosInitializeSuccess(status){
              console.log("Onymos initialized Successfully.", status)
            },
    
            function onymosInitializeFailure(error){
              console.log("Onymos failed to initialize.", error)
           })
         })
      }
    }
    

Great! If we configured your onymosConnectObject correctly, onymosInitializeSuccess() should print its message to the console. Now we’re ready to use Notification. Let’s create a function called login() in the app.component.ts file.

logIn(){         
  // OnymosNotification.register() is typically invoked after an app initializes and a user is authenticated. In this
  // example, we have a function called logIn() where you can authenticate a user before invoking it.

  [...]

  OnymosNotification.register( 
    registerObj,
                  
      function registerSuccess(message){
        console.log(message)
      },
		
      function registerFailure(error){
	      console.log(error);
	});
  }

Once logIn() authenticates a user, the register() method, well, registers your app to incorporate all of Notification’s functionality! The registerObj is an object with a property called userId, whose value is the id of the user. If we’re also using the Onymos Access component, we can use @AUTHID@ as that value, which automatically captures the id.

// Here's an example of what your registerObject could look like.
{
  userId: '@AUTHID@',
}
// or
{
  userId: 'hg4hd-pakd3-nsag64-ng45f-ahn7d'
}

But how would your app actually send a notification to a user’s device? For that, we’ll need the notifyUser() method. We can add it to the app.component.ts file and use our own notifyUser() function to invoke it.

notifyUser() {
  OnymosNotification.notifyUser(
    sender, 
    recipients, 
    message,

    function onymosNotifySuccess(status){
      console.log(status)
    },

    function onymosNotifyFailure(error){
      console.log(error)
    },

    payload,
    options
  )
}

Sender is an object with a property called userId. Just like before, we can use @Auth@ if we’re using the Onymos Access component. Recipients is an array of objects, each with a userId property, and they identify the users you’re notifying. Message is the actual notification message itself. Payload is an object that can contain any specific data to be transmitted—you might use payload to pass the route to a page a user will be navigated to when they open the message. You can choose to include options that further customize how your notifications behave.

{
  expiry: 'The time after which the notification will expire.',
  iosSound: 'The name of the iOS sound to be played when the notification is displayed. This name is specific to the iOS platform.'
  androidSound: 'The name of the Android sound to be played when the notification is displayed. This name is specific to the Android platform.'
}

Let’s actually configure the notifyUser() method.

notifyUser() {
  OnymosNotification.notifyUser(
    {
      userId: @Auth@
    }, 
    [
      {
        userId: 'Include the recipient id here.' 
      }

    ], 
    "You've been notified!",

    function onymosNotifySuccess(status){
      console.log(status)
    },

    function onymosNotifyFailure(error){
      console.log(error)
    },

    {},
    {
      iosSound: 'default',
      androidSound: 'default' 
    })
}

Now your app can send notifications! Make sure it can receive them too, and add Notification’s receive() method to your app. You can find it, and more methods, in Notification’s API documentation.

You can learn more about how to use Notification in my “An Ionic Starter Template vs the Onymos Starter App” post.

4. Troubleshooting

How do I squash this bug? Is Ionic supposed to do that? Why is this iOS build failing?

Let’s figure it out—join the Onymos community on Reddit! More of a loner? You can email us directly at customersuccess@onymos.com.

Dig into our API documentation

Developer support

Got questions? Our support team is here to help.

Think differently about app development

Download our free white paper today to learn how Onymos Features can maximize the value of your developer resources — and shave days or weeks off your development timeline.

Get your free white paper