Comment on page
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.
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.
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.
- 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.
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.
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:
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.
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
Send Notification
curl
javascript
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'}
});
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 [email protected]
Last modified 2yr ago