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.
Last updated
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.
Last updated
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
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.
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.
An Event Type is some action or event in your application that will trigger a notification to be sent.
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
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:
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.
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.
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.
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.
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.
You can track your notification activity and engagement by going to the Dashboard tab.
Contact us at help@ravenhub.io
