Getting started with Ravenhub

Ravenhub is a complete, real-time notification system that you can add to your web app. This guide will walk you through adding the notification center to your app and sending your first notification.

Getting started video guide

If you'd rather watch a video on how to get started, click here to see our video walk through.

Go to app.ravenhub.io to signup for an account

Create a Template

You can use templates to define what should be sent to your customers or users upon certain events happening in your application. Templates can include data from your application using merge tags as well as emojis.

Go to the templates tab and click the New Template button

Give your template a name and fill out the message body. You can use merge tags by using the {{tag_name}} notation. You can also use the emoji selector in the top right of the message body box.

Buttons

You can optionally add buttons and links to your notifications to make them actionable. Links can be URLs that take your users to a specific page in your app and can also use variables similar to the ones in the message body.

Test data / Preview

Use the Test Data and preview section to preview what your notification will look like with some test data. When you’re ready click Save.

Create an Event Type

An Event Type is some action or event in your application that will trigger a notification to be sent.

Go to the Event Types tab and click the New Event Type button

Give the event type a name and description. The description will be helpful for your customers to understand when they are viewing the settings page within the notification center. The API Endpoint will automatically be generated after you save. At the bottom you can click “+Add Template” to assign the template you created before to this Event Type. This will make it so that whenever this Event Type occurs, the template is used to send a notification to your customer. Click save when you’re done.

After saving, you’ll see the API Endpoint generated. You’ll want to save this and use it when sending your first notification.

Add the Notification Center to your application

The Notification Center is the customer or end-user-facing component of Ravenhub. You can add the Notification Center anywhere in your application by including the below code snippets. Your users will be able to see their notifications in the Notification Center as well as control their preferences and connect to Slack to receive notifications there as well.

Using React? You can use our React notification center component found on npm. Check it out here: react-notification-center-component

Using Vue? You can use our VueJS notification center component found on npm. Check it out here: vue-notification-system

The Notification Center has two parts:

A javascript tag
An HTML tag that you can put anywhere in your application

In your application, you’ll include the javascript tag on any page where you plan to put the notification center. See those below:

A full example of embed code. A running version on jsfiddle (just click Run).

Place in the <head> tag of any page that you plan to use the Notification Center

<script src="https://embed.ravenhub.io/js/app.js"></script>

In addition to that, you can place the Notification Center html tag anywhere that you want to position the Notification Center in your application. There are two attributes to pass in the tag:

<notification-center appId="MK6ey8wi3b" subscriberId="foo1"/>

Attribute

Description

appID

Automatically generated when you sign up. You can find it in the Ravenhub app in the top right corner next to the logout button.

subscriberId

The unique ID that you use to identify the user who is logged in. This is how we know who to send notifications to.

You can apply custom styles to any component in the Notification Center. Simply check for class names in your inspector to identify the correct classes to use to apply your customer styles. (Documentation coming.)

You should now see the notification center bell in your app. If you click on it, there won’t be any notifications yet, but we’ll get to that next.

Send your first notification

Now you’re ready to send your first notification. Going back to the Event Type that you created, copy the API Endpoint url. You’ll use this to send a POST request to create a notification. You’ll notice that in the URL there is one variable: “subscriberId” which is the unique ID that you use to identify the user that should receive the notification.

Send Notification

POST https://api.ravenhub.io/company/:appId/subscribers/:subscriberId/events/:eventId

Sends event data to Ravenhub which will trigger the notification(s) to be sent to the subscriber identified in the path.

Path Parameters

Name	Type	Description
eventId	string	Event Type ID which can be found in the Event Type section of the Ravenhub admin app.
subscriberId	string	Unique ID for the user who should receive the notification
appId	string	Ravenhub app ID can be found in the top right corner of the Ravenhub admin app.

Name

Type

Description

eventId

string

Event Type ID which can be found in the Event Type section of the Ravenhub admin app.

subscriberId

string

Unique ID for the user who should receive the notification

appId

string

Ravenhub app ID can be found in the top right corner of the Ravenhub admin app.

event created successfully

failed to create event : <details>

curl https://api.ravenhub.io/company/MK6ey8wi3b/subscribers/foo1/events/owtDEKN0iP \
  -H 'Content-Type: application/json' \
  -d '{ "priority" : "Critical" }'

const subscriberId = 'foo1';
let endpoint = 'https://api.ravenhub.io/company/MK6ey8wi3b/subscribers/'
               + subscriberId + '/events/owtDEKN0iP';
 
axios.post(endpoint, { "priority" : "Critical" }, {
 headers: {'Content-type': 'application/json'}
});

Using Event Stream

Now that you've sent your first notification, you can use the Event Stream to verify that your event data has been received by Ravenhub, and how the notification will look to your users.

Just go to the Event Stream tab within the Ravenhub admin app and click on an event on the left side. You should see the raw data on the right side as well as a preview of what the notification will look like to your users based on the templates.

The Event Stream has a realtime connection to Ravenhub, so as soon as new events are created you'll see them show up in the Event Stream list.