# 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.
## [Getting started video guide](https://www.loom.com/share/95e25a1a81be41c2b426e47779b51d86)
[If you'd rather watch a video on how to get started, click here to see our video walk through.](https://www.loom.com/share/95e25a1a81be41c2b426e47779b51d86)
## Signup for an account
Go to [**app.ravenhub.io**](http://app.ravenhub.io) to signup for an account
## Create a Template
{% hint style="info" %}
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.
{% endhint %}
* [ ] 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.
#### Buttons
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.
#### Test data / Preview
* [ ] 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.
## Create an Event Type
{% hint style="info" %}
An Event Type is some action or event in your application that will trigger a notification to be sent.
{% endhint %}
* [ ] 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.
## 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:**
* 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 \ tag of any page that you plan to use the Notification Center
```markup
```
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
```
| 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, but we’ll get to that next.
## Send your first notification
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.
## Send 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.
#### Path Parameters
| Name | Type | Description |
| ------------ | ------ | ------------------------------------------------------------------------------------- |
| 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. |
{% tabs %}
{% tab title="200 Successfully created the event" %}
```
event created successfully
```
{% endtab %}
{% tab title="400 Failed to create event" %}
```
failed to create event :
```
{% endtab %}
{% endtabs %}
{% tabs %}
{% tab title="curl" %}
```bash
curl https://api.ravenhub.io/company/MK6ey8wi3b/subscribers/foo1/events/owtDEKN0iP \
-H 'Content-Type: application/json' \
-d '{ "priority" : "Critical" }'
```
{% endtab %}
{% tab title="javascript" %}
```javascript
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'}
});
```
{% endtab %}
{% endtabs %}
## Using Event Stream
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.
{% hint style="info" %}
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.
{% endhint %}
## Dashboard
You can track your notification activity and engagement by going to the Dashboard tab.
#### Need more help?
Contact us at **
# Ravenhub API
## Send Notification
`POST` `https://api.ravenhub.io/company/:appId/subscribers/:subscriberId/events/:eventId`
Sends event data to Ravenhub which will trigger a notification(s) to be sent to the subscriber identified in the path. The body of the request can include JSON data that can be used in notification templates.
#### Path Parameters
| Name | Type | Description |
| ------------ | ------ | ------------------------------------------------------------------------------------- |
| 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. |
{% tabs %}
{% tab title="200 Successfully created the event" %}
```
event created successfully
```
{% endtab %}
{% tab title="400 Failed to create event" %}
```
failed to create event :
```
{% endtab %}
{% endtabs %}
{% tabs %}
{% tab title="curl" %}
```bash
curl https://api.ravenhub.io/company/MK6ey8wi3b/subscribers/foo1/events/owtDEKN0iP \
-H 'Content-Type: application/json' \
-d '{ "priority" : "Critical" }'
```
{% endtab %}
{% tab title="javascript" %}
```javascript
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'}
});
```
{% endtab %}
{% endtabs %}
## Send Broadcast
`POST` `https://api.ravenhub.io/company/:appId/broadcasts/:broadcastId`
Sends broadcast notifications to the list of subscriber IDs specified in the body of the request. See example below for formatting. The body of the request can include JSON data that can be used in notification templates.
#### Path Parameters
| Name | Type | Description |
| ----------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| appId | string | Ravenhub app ID can be found in the top right corner of the Ravenhub admin app. |
| broadcastId | string | Broadcast ID is automatically generated when you create a broadcast through the admin app. Find it on the broadcast page in the URL or in the API endpoint field when viewing the Broadcast page |
{% tabs %}
{% tab title="200 Successfully created the event" %}
```
event broadcast sent successfully
```
{% endtab %}
{% tab title="400 Failed to create event" %}
```
failed to send broadcast :
```
{% endtab %}
{% endtabs %}
{% tabs %}
{% tab title="curl" %}
```bash
curl https://api.ravenhub.io/company/MK6ey8wi3b/broadcasts/owtDEKN0iP \
-H 'Content-Type: application/json' \
-d '{"notifications":[{"subscriberId":"foo1"},{"subscriberId":"foo2"}]}'
```
{% endtab %}
{% tab title="javascript" %}
```javascript
var endpoint = 'https://api.ravenhub.io/company/MK6ey8wi3b/broadcasts/owtDEKN0iP';
/*
The "data" key is optional within each notification
object in the notifications array below.
*/
var postBody =
{
"notifications" : [
{
"subscriberId" : "foo1",
"data" : {
"val1" : "hello again",
"val2" : "hi",
"urlvar" : "https://google.com"
}
},
{
"subscriberId" : "foo2",
"data" : {
"val1" : "hello again",
"val2" : "hi",
"urlvar" : "https://yahoo.com"
}
}
]
}
axios.post(endpoint, postBody, {
headers: {'Content-type': 'application/json'}
});
```
{% endtab %}
{% endtabs %}
# Templates
Templates define the content of the notifications that are sent to your users. Templates can include data from your application using merge tags as well as actionable buttons and of course emojis!
## Creating template
* [ ] 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.
#### Buttons
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.
#### Test data / Preview
* [ ] 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.
Now you can use this template with [Broadcasts](/broadcasts) and [Event Types](/event-types)
# Broadcasts
You can use broadcasts to send one-time messages like announcements and promotions that show up in your users' notification centers
## Sending a broadcast
First you'll need to create a template for your broadcast message.
### Create a Template
{% hint style="info" %}
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.
{% endhint %}
* [ ] 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.
#### Buttons
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.
#### Test data / Preview
* [ ] 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.
### Create a broadcast
* [ ] Go to the Broadcasts tab and click the New Broadcast notification button
* [ ] Give the Broadcast a name and description. Then you can click “+Add Template” to assign the template you created in the step before to this Broadcast.
* [ ] Finally, at the bottom you can put in a comma separated list of subscriber IDs of the users that you want to receive this broadcast.
{% hint style="info" %}
If you need to send custom data for your template, or if you'd prefer to use an API for sending the broadcast, see our [API docs](/ravenhub-api)
{% endhint %}
* [ ] To send the broadcast, just click the "Send Broadcast" button. It will then take you to the Event Stream page where you can see the notifications being sent.
* [ ] You can also go to the dashboard to see the results and engagement with your broadcast notifications.
# Event Types
Use event types to send notifications to your users based on activities and actions in your app. Think of these as triggers for your notifications.
## Create an Event Type
{% hint style="info" %}
An Event Type is some action or event in your application that will trigger a notification to be sent. For example, in a social media application this might be "Someone added you as a friend." or "Someone liked your photo."
{% endhint %}
* [ ] 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](/templates) 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. [See the Getting started guide for a full end to end example](/)
# 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:**
* 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 \ tag of any page that you plan to use the Notification Center
```markup
```
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
```
| 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.](/)
##
# Event Stream
The Event Stream page can be used for debugging notifications and seeing the latest notifications
## How it works
The Event Stream tab shows the most recent notifications being sent to your users. It has live updates as notifications are sent to your users. You can see the notifications on the left side. If you click on one of the notifications in the list, it will show details on the right side. There are 2 sections: Raw Data and a Preview. The Raw Data section shows the data that was received by the Ravenhub API and the Preview section below shows what the user will see in their notification center.
## Using the Event Stream for debugging
You can use the event stream to debug issues with templates. For example, if notifications aren't appearing properly, you can check that the data is coming through in the Raw Data section and check that against the template to make sure that variable names are properly matched. It also allows you to see what your users are going to see without logging into each of your user's apps to see for yourself.
# Slack Integration
## How it works
When you enable the Slack integration, it allows your user's to choose to receive notifications in their own slack workspace in addition to the in-app notification center. They can even choose to receive specific Event Types to be sent to different channels in their Slack workspace. They'll see these options in the notification center in the settings tab:
## Enabling the Slack integration
To enable the Slack integration, just go to the Settings tab in Ravenhub, and click the enable switch under Slack settings.
## Make Slack messages send from your own Slack app
By default, messages sent to your users' Slack workspace will come from Ravenhub. This might be confusing for your users. If you want the Slack messages to come from your own Slack app, you'll have to create your Slack app and copy the Client ID and Client Secret and paste them into the settings page in Ravenhub. If you need assistance with this, please contact us at and we'll get you set up!
