Introduction

The Notification Component is a core part of delivering notifications to your users. The Belltastic Notification Component is a Web Component that is supported by all major browsers. It is a simple in-app inbox for your users to receive their notifications. It is easy to get started, but it has a number of configuration options for your specific use case.

Let's install it first!

Installing the component

Installation is as easy as copy/pasting a code snippet to your app.

Head to your list of Projects, select a project and go to its settings. You will notice a code snippet similar to this:

<belltastic-notifications
    api-key="{PROJECT_API_KEY}"
    project-id="{PROJECT_ID}"
    user-id="{USER_ID}"
></belltastic-notifications>
<script src="https://belltastic.com/component/belltastic.es.js" defer></script>

Property Reference

There's a number of additional properties available for this component to provide additional details about the user. Here's a full list of the properties of this component:

Prop	Required	Description
api-key	yes	The API key to your Belltastic Project. Cannot use account-level API tokens.
project-id	yes	The ID of the Belltastic Project. Must be the same for which the API token is for.
user-id	yes	The user ID from your app. This can be an incrementing ID, an email, UUID, or any other string of up to 255 characters. Multi-tenancy is supported with Compound IDs.
user-hmac	no	The HMAC hash for this user. It is only required when enabled in the project settings. You can learn more about it on the HMAC documentation.
user-name	no	The name of your user. It will make it easier to identify this user within Belltastic dashboard.
user-email	no	The email of your user. It is required in order to send email notifications to this user.
user-avatar-url	no	The avatar of your user. At the moment, this only shows up in Belltastic dashboard to help you identify the users easier.