Notification Center

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. See the Getting Started guide for an end to end tutorial.

PreviousEvent Types NextEvent Stream

Last updated 4 years ago

Was this helpful?

Add the Notification Center to your application

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 should now see the notification center bell in your app. If you click on it, there won’t be any notifications yet. See the Getting Started guide for an end to end tutorial.