# Notification Center

## Add the Notification Center to your application

{% hint style="info" %}
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.
{% endhint %}

{% hint style="success" %}
Using React? You can use our React notification center component found on npm.  Check it out here: [react-notification-center-component](https://www.npmjs.com/package/react-notification-center-component)
{% endhint %}

{% hint style="success" %}
Using Vue? You can use our VueJS notification center component found on npm. Check it out here: [vue-notification-system](https://www.npmjs.com/package/vue-notification-system)
{% endhint %}

**The Notification Center has two parts:**&#x20;

* 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**](https://gist.github.com/javimendezona/ebee8f0f8009abee4a15f0a03085a63f)**. A running version on** [**jsfiddle**](https://jsfiddle.net/ravenhub/gzc45rtf/30/) **(just click Run).**

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

```markup
<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:

```markup
<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.              |

{% hint style="info" %}
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.)
{% endhint %}

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.](/master.md)

![](/files/-M4k30ELTda2HzGXlk2X)

##


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ravenhub.io/notification-center.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
