📖
Ravenhub Docs
  • Getting started with Ravenhub
  • Ravenhub API
  • Templates
  • Broadcasts
  • Event Types
  • Notification Center
  • Event Stream
  • Slack Integration
Powered by GitBook
On this page
  • Add the Notification Center to your application

Was this helpful?

Notification Center

PreviousEvent TypesNextEvent Stream

Last updated 4 years ago

Was this helpful?

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:

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

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 . A running version on (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.

react-notification-center-component
vue-notification-system
example of embed code
jsfiddle
See the Getting Started guide for an end to end tutorial.